最近在作vue項目,用的 webpack-simple 模板。開發過程當中都沒有問題。當打包上線的時候出現問題了。也就是運行vue
npm run build //這個你們都知道是上線時打包用的,會把代碼壓縮。
複製代碼
提示了以下錯誤
node
ERROR in build.js from UglifyJs
Unexpected token operator «=», expected punc «,» [./node_modules/quill-image-extend-module/index.js:12,0][build.js:76527,35]
複製代碼
從網上找了一大圈都沒有能解決掉(傷心),有說配置babel的presets。我這個用的是模板默認配置確定是沒有問題的(pass)。也有說是webpack壓縮器new webpack.optimize.UglifyJsPlugin的問題,讓重新安裝uglifyjs-webpack-plugin,通過嘗試也沒有能解決掉問題。
不過也不是沒有任何收穫,通過反覆百度發現,其實最終的問題是es6的問題,weback默認的webpack.optimize.UglifyJsPlugin不能壓縮es6的代碼文件。順着這個思路只要咱們把es6的代碼用babel轉換成es5便可。
但是我用的是默認的模板,babel都是配置好的,問題出在了哪裏呢。緣由確定仍是在webpack.config.js上。通過反覆觀測發現。問題出如今了loader配置上,loader上有一項是配置js文件轉換的。webpack
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
}
複製代碼
上面的配置exclude: /node_modules/。這一項排除了/node_modules,也就說是這項配置在用loader轉化es5的時候不對node_modules下的引用進行es5轉換。
看上面的報錯信息,我項目中引用了/node_modules/quill-image-extend-module/index.js。根據exclude: /node_modules/,這個配置打包的時候是不會對這個文件進行es5轉碼。而webpack.optimize.UglifyJsPlugin不能壓縮es6語法的文件,因此就報錯了。
知道問題所在,那麼就好解決了。代碼以下es6
{
test: /\.js$/,
loader: 'babel-loader',
//exclude: /node_modules/, //只要把這個註釋掉就能夠了。就會先進行es5轉換,而後在打包壓縮
}
複製代碼
再次運行 npm run build 不在報錯。正常編譯成功了。
咱們在項目開發中會常常引用第三方插件,因此我以爲這項配置能夠直接去掉。避免麻煩發生。web