Vue 添加自定义 JS 文件参与 ES6 转义

vue 中可能存在部分 JS 文件使用了 ES6 语法,但默认不会被 babel-loader 扫描到,从而出现编译后的项目 ES6 语法没有被转义

报错信息

  1. 下列报错信息就是说明在 node_modules/quill-image-extend-module/index.js 文件中存在 ES6 的语法糖
  2. 由于目前大部分浏览器默认不支持 ES6 语法,所以项目编译后如果没有把 ES6 语法转义成 ES5 语法,浏览器则会报错
1
2
3
4
ERROR in static/js/vendor.9447dc694e95071dbce3.js from UglifyJs
Unexpected token operator «=», expected punc «,» [./node_modules/quill-image-extend-module/index.js:12,0][static/js/vendor.9447dc694e95071dbce3.js:28927,35]

  Build failed with errors.

解决方式

  1. 在 ::webpack.base.conf.js:: 中添加如下语法
1
2
3
4
5
6
7
8
9
10
{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [
    resolve('src'),
    resolve('test'),
	  // 只有这一行是添加的,由于指定自定义扫描文件
    resolve('node_modules/quill-image-extend-module/index.js')
  ],
},