element-ui emitter.js编译报错的解决办法

报错名称

vue使用vue-cli项目，在build element-ui时报错，问题点是emitter.js有语法错误。

报错现象

ERROR in static/js/vendor.c8ad79294b380247b828.js from UglifyJs Unexpected token: operator (>) [./~/_element-ui@1.4.4@element-ui/src/mixins/emitter.js:2,0]

编译的vendor文件奇大，有1.46MB。

报错原因

“不能识别的符号，操作符>”，疑是node模块使用了es2015的箭头函数不能被识别。

解决办法

添加webpack babel-loader对使用了es2015的该node模块的编译支持。

编辑build/webpack.base.conf.js，将报错文件路径添加到babel-loader的配置项中。我用的element-ui的版本为1.4.4，目前的最新版。

  {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test'), resolve('node_modules/_element-ui@1.4.4@element-ui/src/mixins/emitter')]
  },

再次编译后，问题得到解决，不再报错。

此时的vendor文件被压缩到627kB，相比之前，小了1倍的体积。

总结

一般的前端项目只对源码编译es2015，但是有些node模块也使用了es2015，这时候源码直接import使用该node模块会报错，可以添加对该模块的编译支持来解决该问题。