npm|npm run build报错(UglifyJs Unexpected token: name)

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

npm|npm run build报错(UglifyJs Unexpected token: name)
文章图片
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 task-system-admin@1.0.0~build: Failed to exec build script npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! task-system-admin@1.0.0 build: `node build/build.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the task-system-admin@1.0.0 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文件

npm|npm run build报错(UglifyJs Unexpected token: name)
文章图片
build/webpack.base.config.js在项目中的位置
2、打开文件,把 module 的 rules 的 test: /.js$/做出修改 【npm|npm run build报错(UglifyJs Unexpected token: name)】
// 修改前 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的转化

npm|npm run build报错(UglifyJs Unexpected token: name)
文章图片
修改后的webpack.base.config.js 修改后重新 npm run build 结果
npm|npm run build报错(UglifyJs Unexpected token: name)
文章图片
npm run build 成功打包

    推荐阅读