首页 > 代码库 > 关于npm run build 报错解决方案

关于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 报错解决方案