基于Vue的WebApp开发工程构建中踩的坑

在js里new Vue()，模板用的html页面上的元素，报出了错误

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

查资料，说要配置webpack的配置项 resolve.alias，说是组件别名，让js里引用路径可以简写

  resolve: {
    extensions: ['.js', '.vue'],
    alias: {
      vue$: 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  },

这样让vue对象挂上compile方法。

output.filename:'[name].js?[hash]' 将会使在file://协议访问时，访问不到文件，所以作electron开发时，不要带上[hash]
externals 配置项是为了使用全局变量代替对库的引用，库内容不用再打包到app.js中，适合于库已经在页面中引入的情况，
```
externals : {
// 库已经在页面中引入，使用全局变量代替对库的引用，库内容不用再打包到app.js中
vue : 'Vue',
axios : 'axios',
'axios-mock-adapter' : 'AxiosMockAdapter',
'vue-router' : 'VueRouter',
'element-ui' : 'ELEMENT'
},
```
本项目最后没有使用这个方法，而用上了 DllPlugin、DllReferencePlugin 插件 http://blog.csdn.net/ailongyang/article/details/59494570 ，配合js中写 window.axios = axios 将变量暴露到全局。

babel 在webpack1中配置方式为

module : {
  loaders : [{
      test : /\.jsx?$/,
      loader : 'babel',
      exclude : /node_modules|lib/
    }
  ]
},
babel: {
  presets: ['es2015']
},

在webpack2中改为了

module: {
rules: [
  {
    test : /\.jsx?$/,
    exclude : /node_modules|lib/,
    loader : 'babel-loader',
    options : {
      presets : [
        [
          "env", {
            "targets": {
              "chrome": 54
            },
            "useBuiltIns" : true
          }
        ]
      ]
    }
  }
]
},

babel的插件由babel-preset-es2015更换为babel-preset-env （http://2ality.com/2017/02/babel-preset-env.html）上面的配置让babel将js编译目标定为chrome54（尚不支持async/await），会将async编译成yield实现。
支持的浏览器写法见 https://github.com/ai/browserslist

原来用到将库导出为全局变量的功能，
```
plugins : [
  new webpack.ProvidePlugin({ //将库导出为全局变量，跨js文件不用再打包一次相同的库，可通过全局变量访问
    axios : 'axios'
  })
]
```
但在实际使用中没有使用此方案，最开始用的js引入到页面上，库都自己暴露到了全局(但有些库(如axios)可能写法与electron环境(存在require方法)冲突，不能导出到全局)，后来使用 DllPlugin 插件与 ProvidePlugin 插件冲突，无法暴露库到全局。
将babel的编译目标设置为chrome 54时，保留了大量ES6的语法，导致UglifyJsPlugin压缩js时抛错，要压缩js只能更换为 BabiliPlugin，https://doc.webpack-china.org/plugins/babili-webpack-plugin/
感觉 BabiliPlugin 压缩js的速度很慢。1M大小的js要10秒时间甚至更久。
```
if (process.env.NODE_ENV == 'production') {
config.plugins.push(new BabiliPlugin()) // UglifyJsPlugin不支持ES6，换用BabiliPlugin，感觉压缩速度比较慢
}
```
webpack-stream 用来配合gulp作webpack打包，但它有一些问题，其一它里面包含的webpack版本为1，不能识别Webpack2的配置文件的配置项。其二，它与webpack的配置项watch相冲突。最终在gulpfile.js里没有使用webpack-stream，而用的原生的webpack。
```
watch(['./JS/**/*.{js,vue}'], function (event) {
gulp.src([event.path,'./JS/app.js'])
  .pipe(webpackStream(webpackConfig))
  .pipe(gulp.dest('./UI/'))
})
```

    watch([src.assets], function () {
      runSequence('copyAssets', electron.reload)
    })

  var electronStarted = false
  webpack(webpackConfig).watch(200, function (err, stats) {
      if (err) {
        throw new gutil.PluginError('webpack', err)
      }
      gutil.log('webpack', stats.toString())
      if (!electronStarted) {
        electronStarted = true
        electron.start()
      } else {
        electron.reload()
      }
  })

webpack-dev-server 没有提reload浏览器的接口（也许有，但找了一阵资料没找到），又不能监听没有被js导入的css文件的修改，所以我使用了browser-sync来启动服务和监听资源文件的修改、刷新浏览器中的页面。而后在开发electron时换成了electron-connect来刷新electron中的页面。
最开始用 gulp-watch 监听vue文件的修改，然后调用webpack-stream编译js，再通过browser-sync通知浏览器中页面刷新。后来为了使用上webpack的watch方法来加快开发时的编译速度，流程改为，webpack.watch监听主要的js文件的修改，然后（electron-connect或browser-sync）通知页面刷新。build时比较慢，但开发时热编译性能有所提升。

以后可能要用到的一个插件 ContextReplacementPlugin

// 内置的方法类 ContextReplacementPlugin 过滤掉 Moment.js 中那些用不到的语言包
new webpack.ContextReplacementPlugin(/moment[\\/]locale$/, /^\.\/(zh-cn)$/)

https://github.com/webpack/webpack/issues/3128#issuecomment-291790964

abeet / Blog

基于Vue的WebApp开发工程构建中踩的坑 #25