1. 程式人生 > >關於npm run build 報錯解決方案

關於npm run build 報錯解決方案

好的 修改 func cti nod pre babel 目錄 支持

# 特定的錯誤

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 報錯解決方案