解決iview打包時UglifyJs報錯的問題，iviewuglifyjs

解決iview打包時UglifyJs報錯的問題，iviewuglifyjs

使用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報錯的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。