关于npm run build 报错解决方案
Posted artiely
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于npm run build 报错解决方案相关的知识,希望对你有一定的参考价值。
# 特定的错误
ERROR in statics/mobile/js/vendor.cef13a0e680a5bc0d8b3.js from UglifyJs
Unexpected token: punc (() [D:/Users/Administrator/Desktop/WTFpolice/newPolice/~/mint-ui/src/utils/clickoutside.js:12,0][statics/mobile/js/vendor.cef13a0e680a5bc0d8b3.js:43784,6]
经过一顿 stackoverflow之后 发现这么几点问题
1.没有配置babel
2.UglifyJs插件不支持es6
我针对这些答案都尝试了一遍最后得出如下方案
问题1的解决
如果是没有配置babel 也是有可能的因为如果你在chrome下开发不装babel 也是可以跑得顺畅的因为chrome对es6的支持是很好的
# 安装babel 的依赖 npm install babel-loader babel-core babel-preset-env babel-preset-stage-2 -D
以上依次是babel的转换器,核心库,预处理和预处理的es6版本
然后需要在根目录建立一个.babelrc的文件 配置如下
{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], }
但很多情况下我们都是配置了,那么我们来看问题2
如果是UglifyJs插件不支持处理es6 官网有对应支持es6的版本,不过我们不是为了压缩es6
修改webpack.base.conf配置
function resolve (dir) { return path.join(__dirname, ‘..‘, dir) } # 修改前 { test: /\.js$/, loader: ‘babel-loader‘, include: [resolve(‘src‘), resolve(‘test‘)] } # 修改后 { test: /\.js$/, loader: ‘babel-loader‘, include: [resolve(‘src‘), resolve(‘test‘),resolve(‘node_modules/mint-ui‘)] }
如果你选择更新UglifyJs插件可以配合安装babel-polyfill , babel-polyfill可以模拟ES6使用的环境,可以使用ES6的所有新方法
# 安装 npm install -save babel-polyfill # 修改在webpack.config.js配置 # 修改前 module.exports = { entry: { app: "./src/main.js" } }; # 修改后 module.exports = { entry: { app: ["babel-polyfill", "./src/main.js"] } };
以上是关于关于npm run build 报错解决方案的主要内容,如果未能解决你的问题,请参考以下文章
npm run build 打包命令报错,npm i -g npm 后使用任何跟npm相关的命令都报错 的解决方案
webpack run build 报错:ERROR in static/js/vendor.js from UglifyJs