关于npm run build 报错解决方案

# 特定的错误 node

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]webpack

 通过一顿 stackoverflow以后 发现这么几点问题es6

1.没有配置babel web

2.UglifyJs插件不支持es6chrome

我针对这些答案都尝试了一遍最后得出以下方案npm

问题1的解决bash

若是是没有配置babel 也是有可能的由于若是你在chrome下开发不装babel 也是能够跑得顺畅的由于chrome对es6的支持是很好的babel

 # 安装babel 的依赖
npm install babel-loader babel-core babel-preset-env babel-preset-stage-2 -D

 以上依次是babel的转换器,核心库,预处理和预处理的es6版本app

而后须要在根目录创建一个.babelrc的文件 配置以下ide

{
 "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/scr/utils')]
}

 若是你选择更新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"]
  }
};
相关文章
相关标签/搜索