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

[abeet]

• 在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)$/)

webpack/webpack#3128 (comment)