解决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 相关文章推荐
完美解决IE低版本不支持call与apply的问题
Dec 05 Javascript
JavaScript调用客户端Java程序的方法
Jul 27 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
Javascript创建类和对象详解
May 31 Javascript
vue-router项目实战总结篇
Feb 11 Javascript
js中如何完美的解析数据
Mar 18 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
微信小程序实现点击页面出现文字
Sep 21 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
Vue组件生命周期运行原理解析
Nov 25 Vue.js
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四舍五入、取整、round函数使用示例
2015/02/06 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
jquery的颜色选择插件实例代码
2008/10/02 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
详解nodejs模板引擎制作
2017/06/14 NodeJs
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
React中使用collections时key的重要性详解
2017/08/07 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
Python里隐藏的“禅”
2014/06/16 Python
在Python中使用判断语句和循环的教程
2015/04/25 Python
python实现将内容分行输出
2015/11/05 Python
用Python将IP地址在整型和字符串之间轻松转换
2017/03/22 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
大学生军训自我评价分享
2013/11/09 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
抗洪救灾标语
2014/10/08 职场文书
收银员岗位职责范本
2015/04/07 职场文书
政协常委会议主持词
2015/07/03 职场文书
2016继续教育研修日志
2015/11/13 职场文书
运动会主持人开幕词
2016/03/04 职场文书
python中sys模块的介绍与实例
2021/04/17 Python
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript