chore: update dependencies version

Author: noahlam

.postcssrc.js

@@ -1,9 +1,7 @@
 // https://github.com/michael-ciniawsky/postcss-load-config
 
 module.exports = {
-  "plugins": {
-    // to edit target browsers: use "browserslist" field in package.json
-    "autoprefixer": {},
-    "postcss-mpvue-wxss": {}
-  }
+    "plugins": {
+        "postcss-mpvue-wxss": {}
+    }
 }

README.md

@@ -1,3 +1,9 @@
+## 关于升级 mpvue 2.0 改动通知
+
+最近经常收到项目无法运行的反馈，经排查发现大部分原因是相关依赖版本不对导致的，索性直接升级到 2.0.
+
+2.0  提供了不少新特性, 具体参考官方文档 https://github.com/Meituan-Dianping/mpvue/releases/tag/2.0.0
+
 ### 使用教程
 
 第一步 克隆项目到本地
@@ -9,18 +15,19 @@
     // 前提肯定是要进入项目目录啦 cd mpvue-tutorials
     npm i
 
-第三步 启动开发环境，并监控文件改动，实时编译
+第三步 打开你的微信开发者工具，新建一个小程序，项目目录指向`mpvue-tutorials/dist/wx`,没有这个目录的话，就自己建一个
 
-    npm run dev
 
-第四步 打开你的微信开发者工具，新建一个小程序，项目目录指向`mpvue-tutorials/dist`,就可以看到效果了
+第四步 启动开发环境，并监控文件改动，实时编译
 
+    npm run dev
 
 第五步 在`src/pages`目录下添加或者改动页面，查看效果
 如果是添加页面，需要在 `src/main.js` 里面添加对应的路由
 
 ### 发布项目
     npm run build
-打包的文件，跟` npm run dev`一样，也是放在`mpvue-tutorials/dist`中，同时，发布的是需要注意以下几点
+打包的文件，跟` npm run dev`一样，也是放在`mpvue-tutorials/dist/wx`中，同时，发布的是需要注意以下几点
 1. 如果之前有 `npm run dev` 那么在发布之前，请先停止dev。
 2. 如果打包之后，控制台有报错，请关闭微信开发者工具的 es6代码转换，代码压缩。
+

build/build.js

@@ -1,6 +1,7 @@
 require('./check-versions')()
 
 process.env.NODE_ENV = 'production'
+process.env.PLATFORM = process.argv[process.argv.length - 1] || 'wx'
 
 var ora = require('ora')
 var rm = require('rimraf')
@@ -9,15 +10,19 @@ var chalk = require('chalk')
 var webpack = require('webpack')
 var config = require('../config')
 var webpackConfig = require('./webpack.prod.conf')
+var utils = require('./utils')
 
 var spinner = ora('building for production...')
 spinner.start()
 
-rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+rm(path.join(config.build.assetsRoot, '*'), err => {
   if (err) throw err
   webpack(webpackConfig, function (err, stats) {
     spinner.stop()
     if (err) throw err
+    if (process.env.PLATFORM === 'swan') {
+      utils.writeFrameworkinfo()
+    }
     process.stdout.write(stats.toString({
       colors: true,
       modules: false,

build/dev-server.js

@@ -1,5 +1,6 @@
 require('./check-versions')()
 
+process.env.PLATFORM = process.argv[process.argv.length - 1] || 'wx'
 var config = require('../config')
 if (!process.env.NODE_ENV) {
   process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
@@ -10,7 +11,9 @@ var path = require('path')
 var express = require('express')
 var webpack = require('webpack')
 var proxyMiddleware = require('http-proxy-middleware')
+var portfinder = require('portfinder')
 var webpackConfig = require('./webpack.dev.conf')
+var utils = require('./utils')
 
 // default port where dev server listens for incoming traffic
 var port = process.env.PORT || config.dev.port
@@ -22,6 +25,9 @@ var proxyTable = config.dev.proxyTable
 
 var app = express()
 var compiler = webpack(webpackConfig)
+if (process.env.PLATFORM === 'swan') {
+  utils.writeFrameworkinfo()
+}
 
 // var devMiddleware = require('webpack-dev-middleware')(compiler, {
 //   publicPath: webpackConfig.output.publicPath,
@@ -63,7 +69,7 @@ app.use(require('connect-history-api-fallback')())
 var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
 app.use(staticPath, express.static('./static'))
 
-var uri = 'http://localhost:' + port
+// var uri = 'http://localhost:' + port
 
 var _resolve
 var readyPromise = new Promise(resolve => {
@@ -80,17 +86,26 @@ var readyPromise = new Promise(resolve => {
 //   _resolve()
 // })
 
-var server = app.listen(port, 'localhost')
-
-// for 小程序的文件保存机制
-require('webpack-dev-middleware-hard-disk')(compiler, {
-  publicPath: webpackConfig.output.publicPath,
-  quiet: true
+module.exports = new Promise((resolve, reject) => {
+  portfinder.basePort = port
+  portfinder.getPortPromise()
+  .then(newPort => {
+      if (port !== newPort) {
+        console.log(`${port}端口被占用，开启新端口${newPort}`)
+      }
+      var server = app.listen(newPort, 'localhost')
+      // for 小程序的文件保存机制
+      require('webpack-dev-middleware-hard-disk')(compiler, {
+        publicPath: webpackConfig.output.publicPath,
+        quiet: true
+      })
+      resolve({
+        ready: readyPromise,
+        close: () => {
+          server.close()
+        }
+      })
+  }).catch(error => {
+    console.log('没有找到空闲端口，请打开任务管理器杀死进程端口再试', error)
+  })
 })
-
-module.exports = {
-  ready: readyPromise,
-  close: () => {
-    server.close()
-  }
-}

build/utils.js

@@ -1,6 +1,10 @@
 var path = require('path')
+var fs = require('fs')
 var config = require('../config')
 var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var mpvueInfo = require('../node_modules/mpvue/package.json')
+var packageInfo = require('../package.json')
+var mkdirp = require('mkdirp')
 
 exports.assetsPath = function (_path) {
   var assetsSubDirectory = process.env.NODE_ENV === 'production'
@@ -37,7 +41,7 @@ exports.cssLoaders = function (options) {
 
   // generate loader string to be used with extract text plugin
   function generateLoaders (loader, loaderOptions) {
-    var loaders = [cssLoader, postcssLoader, px2rpxLoader]
+    var loaders = [cssLoader, px2rpxLoader, postcssLoader]
     if (loader) {
       loaders.push({
         loader: loader + '-loader',
@@ -62,6 +66,7 @@ exports.cssLoaders = function (options) {
   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
   return {
     css: generateLoaders(),
+    wxss: generateLoaders(),
     postcss: generateLoaders(),
     less: generateLoaders('less'),
     sass: generateLoaders('sass', { indentedSyntax: true }),
@@ -84,3 +89,29 @@ exports.styleLoaders = function (options) {
   }
   return output
 }
+
+const writeFile = async (filePath, content) => {
+  let dir = path.dirname(filePath)
+  let exist = fs.existsSync(dir)
+  if (!exist) {
+    await mkdirp(dir)
+  }
+  await fs.writeFileSync(filePath, content, 'utf8')
+}
+
+exports.writeFrameworkinfo = function () {
+  var buildInfo = {
+    'toolName': mpvueInfo.name,
+    'toolFrameWorkVersion': mpvueInfo.version,
+    'toolCliVersion': packageInfo.mpvueTemplateProjectVersion || '',
+    'createTime': Date.now()
+  }
+
+  var content = JSON.stringify(buildInfo)
+  var fileName = '.frameworkinfo'
+  var rootDir = path.resolve(__dirname, `../${fileName}`)
+  var distDir = path.resolve(config.build.assetsRoot, `./${fileName}`)
+
+  writeFile(rootDir, content)
+  writeFile(distDir, content)
+}

build/vue-loader.conf.js

@@ -16,5 +16,6 @@ module.exports = {
     source: 'src',
     img: 'src',
     image: 'xlink:href'
-  }
+  },
+  fileExt: config.build.fileExt
 }

build/webpack.base.conf.js

@@ -2,32 +2,41 @@ var path = require('path')
 var fs = require('fs')
 var utils = require('./utils')
 var config = require('../config')
+var webpack = require('webpack')
+var merge = require('webpack-merge')
 var vueLoaderConfig = require('./vue-loader.conf')
+var MpvuePlugin = require('webpack-mpvue-asset-plugin')
+var glob = require('glob')
+var CopyWebpackPlugin = require('copy-webpack-plugin')
+var relative = require('relative')
 
 function resolve (dir) {
   return path.join(__dirname, '..', dir)
 }
 
-function getEntry (dir, entryFile) {
-  const files = fs.readdirSync(dir)
-  return files.reduce((res, k) => {
-    const page = path.resolve(dir, k, entryFile)
-    if (fs.existsSync(page)) {
-      res[k] = page
-    }
-    return res
-  }, {})
+function getEntry (rootSrc) {
+  var map = {};
+  glob.sync(rootSrc + '/pages/**/main.js')
+  .forEach(file => {
+    var key = relative(rootSrc, file).replace('.js', '');
+    map[key] = file;
+  })
+   return map;
 }
 
 const appEntry = { app: resolve('./src/main.js') }
-const pagesEntry = getEntry(resolve('./src/pages'), 'main.js')
+const pagesEntry = getEntry(resolve('./src'), 'pages/**/main.js')
 const entry = Object.assign({}, appEntry, pagesEntry)
 
-module.exports = {
-  entry: entry,
+let baseWebpackConfig = {
+  // 如果要自定义生成的 dist 目录里面的文件路径，
+  // 可以将 entry 写成 {'toPath': 'fromPath'} 的形式，
+  // toPath 为相对于 dist 的路径, 例：index/demo，则生成的文件地址为 dist/index/demo.js
+  entry,
   target: require('mpvue-webpack-target'),
   output: {
     path: config.build.assetsRoot,
+    jsonpFunction: 'webpackJsonpMpvue',
     filename: '[name].js',
     publicPath: process.env.NODE_ENV === 'production'
       ? config.build.assetsPublicPath
@@ -39,7 +48,9 @@ module.exports = {
       'vue': 'mpvue',
       '@': resolve('src')
     },
-    symlinks: false
+    symlinks: false,
+    aliasFields: ['mpvue', 'weapp', 'browser'],
+    mainFields: ['browser', 'module', 'main']
   },
   module: {
     rules: [
@@ -55,9 +66,7 @@ module.exports = {
           'babel-loader',
           {
             loader: 'mpvue-loader',
-            options: {
-              checkMPEntry: true
-            }
+            options: Object.assign({checkMPEntry: true}, vueLoaderConfig)
           },
         ]
       },
@@ -74,7 +83,7 @@ module.exports = {
         loader: 'url-loader',
         options: {
           limit: 10000,
-          name: utils.assetsPath('media/[name]].[ext]')
+          name: utils.assetsPath('media/[name].[ext]')
         }
       },
       {
@@ -86,5 +95,48 @@ module.exports = {
         }
       }
     ]
-  }
+  },
+  plugins: [
+    // api 统一桥协议方案
+    new webpack.DefinePlugin({
+      'mpvue': 'global.mpvue',
+      'mpvuePlatform': 'global.mpvuePlatform'
+    }),
+    new MpvuePlugin(),
+    new CopyWebpackPlugin([{
+      from: '**/*.json',
+      to: ''
+    }], {
+      context: 'src/'
+    }),
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: path.resolve(config.build.assetsRoot, './static'),
+        ignore: ['.*']
+      }
+    ])
+  ]
+}
+
+// 针对百度小程序，由于不支持通过 miniprogramRoot 进行自定义构建完的文件的根路径
+// 所以需要将项目根路径下面的 project.swan.json 拷贝到构建目录
+// 然后百度开发者工具将 dist/swan 作为项目根目录打
+const projectConfigMap = {
+  tt: '../project.config.json',
+  swan: '../project.swan.json'
 }
+
+const PLATFORM = process.env.PLATFORM
+if (/^(swan)|(tt)$/.test(PLATFORM)) {
+  baseWebpackConfig = merge(baseWebpackConfig, {
+    plugins: [
+      new CopyWebpackPlugin([{
+        from: path.resolve(__dirname, projectConfigMap[PLATFORM]),
+        to: path.resolve(config.build.assetsRoot)
+      }])
+    ]
+  })
+}
+
+module.exports = baseWebpackConfig