使用npm dev运行时运行是可以的,但是npm运行构建打包时iview报错,
原因是iview中使用了es6语法,然而uglifyJs是不支持的,打开我们的构建/webpack.prod.conf.js文件,可以看到
//UglifyJs不支持ES6 +,您还可以使用更好的treeshaking babel-minify: https://github.com/babel/minify
新webpack.optimize.UglifyJsPlugin ({
压缩:{
警告:假
},
sourceMap: config.build.productionSourceMap,
并行:真
}),
已经提示了uglifyJs不支持es6。
在webpack.base.conf.js中,我们先在js编译的时候添加如下:
{
测试:/\ . js/美元,
装载机:“babel-loader”,
包括:[解决(“src”),
解决(“测试”),解决(/node_modules/iview/src),解决(/node_modules/iview/包))
},
先让iview的es6语法经过巴别塔来转换,然后在构建/webpack.prod.conf.js中,注释掉原来的uglifyJs,引入外部的uglifyJs对js进行压缩混淆,代码如下:
//UglifyJs不支持ES6 +,您还可以使用更好的treeshaking babel-minify: https://github.com/babel/minify//新webpack.optimize.UglifyJsPlugin ({//压缩:{//警告:假的//},//sourceMap: config.build.productionSourceMap,//并行:没错//}),
新UglifyJsPlugin ({//使用外部引入的新版本的js压缩工具
并行:没错,
uglifyOptions: {
ie8:假的,
ecma: 6,
警告:假的,
损坏:没错,//调试错误
输出:{
评论:假的,
美化:假的,//调试真实
},
压缩:{//在UglifyJs删除没有用到的代码时不输出警告
警告:假的,//删除所有的“控制台”语句//还可以兼容ie浏览器
drop_console:
真的,//内嵌定义了但是只用到一次的变量
collapse_vars:
真的,//提取出出现多次但是没有定义成变量去引用的静态值
reduce_vars:
真的,
}
}
}),
当然我们要先引入外部插件:
const UglifyJsPlugin=要求(“uglifyjs-webpack-plugin”);
如此便可解决。
以上这篇解决iview打包时UglifyJs报错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
