npm run build报错：UglifyJs Unexpected token: name

在vue + element-ui的项目中执行 npm run build时出现以下异常。

npm run build报错.png

ERROR in static/js/0.b872446cd2a353bd1400.js from UglifyJs
Unexpected token: name (scrollBarWidth) [./~/element-ui/src/utils/scrollbar-widt
h.js:3,0][static/js/0.b872446cd2a353bd1400.js:96,4]

 Build failed with errors.

npm info lifecycle [email protected]~build: Failed to exec build script
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `node build/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\bank_gz\AppData\Roaming\npm-cache\_logs\2018-08-27T03_28_2
0_039Z-debug.log

异常出现原因

1、element-ui中使用了es6 的语法，UglifyJs无法对 es6进行混淆压缩。

解决方法

1、在项目中找到 build/webpack.base. config.js文件

build/webpack.base.config.js在项目中的位置

2、打开文件，把 module 的 rules 的 test: /.js$/做出修改

// 修改前
rules: [
  test: /\.js$/,
  loader: 'babel-loader',
  include: [resolve('src'), resolve('test')]
]

// 修改后
rules: [
  test: /\.js$/,
  loader: 'babel-loader',
  include: [resolve('src'), resolve('test'),resolve('/node_modules/element-ui/src'),resolve('/node_modules/element-ui/packages')]
]
// 即把element-ui框架的源码进行 es6到 es5的转化

修改后的webpack.base.config.js

修改后重新 npm run build 结果

npm run build 成功打包