使用npm run dev時運行是ok的,但是npm run build打包時iview報錯,
如下:

原因是iview中使用了es6語法,然而uglifyJs是不支持的,打開我們的build/webpack.prod.conf.js文件,可以看到
// UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minifynew webpack.optimize.UglifyJsPlugin({compress: {warnings: false},sourceMap: config.build.productionSourceMap,parallel: true}),已經提示了uglifyJs不支持es6.
解決方案:
在webpack.base.conf.js中,我們先在js編譯的時候添加如下:
{test: //.js$/,loader: 'babel-loader',include: [resolve('src'),resolve('test'),resolve('/node_modules/iview/src'),resolve('/node_modules/iview/packages')]},先讓iview的es6語法經過babel來轉換,然后在build/webpack.prod.conf.js中,注釋掉原來的uglifyJs,引入外部的uglifyJs對js進行壓縮混淆,代碼如下:
// UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify// new webpack.optimize.UglifyJsPlugin({// compress: {// warnings: false// },// sourceMap: config.build.productionSourceMap,// parallel: true// }),new UglifyJsPlugin({// 使用外部引入的新版本的js壓縮工具parallel: true,uglifyOptions: {ie8: false,ecma: 6,warnings: false,mangle: true,// debug falseoutput: {comments: false,beautify: false,// debug true},compress: {// 在UglifyJs刪除沒有用到的代碼時不輸出警告warnings: false,// 刪除所有的 `console` 語句// 還可以兼容ie瀏覽器drop_console: true,// 內嵌定義了但是只用到一次的變量collapse_vars: true,// 提取出出現多次但是沒有定義成變量去引用的靜態值reduce_vars: true,}}}),當然我們要先引入外部插件:
const UglifyJsPlugin =require('uglifyjs-webpack-plugin');如此便可解決。
以上這篇解決iview打包時UglifyJs報錯的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。
新聞熱點
疑難解答