關於npm run build 報錯解決方案
阿新 • • 發佈:2017-08-14
好的 修改 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 報錯解決方案