解决iview打包时UglifyJs报错的问题


Posted in Javascript onMarch 07, 2018

使用npm run dev时运行是ok的,但是npm run build打包时iview报错,

如下:

解决iview打包时UglifyJs报错的问题

原因是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/minify
new 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 false
output: {
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报错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
js模拟点击事件实现代码
Nov 06 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
绑定回车enter事件代码
May 18 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
DOM基础教程之使用DOM控制表单
Jan 20 Javascript
基于JavaScript实现瀑布流效果
Mar 29 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 #Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 #Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 #Javascript
关于Vue的路由权限管理的示例代码
Mar 06 #Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 #Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 #Javascript
解决vue build打包之后首页白屏的问题
Mar 06 #Javascript
You might like
PHP实现时间轴函数代码
2011/10/08 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
php中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
多广告投放代码 推荐
2006/11/13 Javascript
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
python写的一个文本编辑器
2014/01/23 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
Django分组聚合查询实例分享
2020/04/29 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
Otel.com:折扣酒店预订
2017/08/24 全球购物
生产车间标语
2014/06/11 职场文书
同志主要表现材料
2014/08/21 职场文书
十佳党员事迹材料
2014/08/28 职场文书
信用卡工作证明模板
2014/09/14 职场文书
北京故宫的导游词
2015/01/31 职场文书
世界红十字日活动总结
2015/02/10 职场文书
小学庆六一主持词
2015/06/30 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
欧元符号 €
2022/02/17 杂记