解决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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
JS 实现随机验证码功能
Feb 15 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
vue使用element-ui实现表单验证
Dec 13 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 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
jQuery 自定义函数写法分享
2012/03/30 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
Python XML RPC服务器端和客户端实例
2014/11/22 Python
python中pass语句用法实例分析
2015/04/30 Python
python中返回矩阵的行列方法
2018/04/04 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
WxPython实现无边框界面
2019/11/18 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
Python学习之time模块的基本使用
2021/01/17 Python
美国家居装饰店:Pier 1
2019/09/04 全球购物
小学生学习感言
2014/03/10 职场文书
通用自荐信范文
2014/03/14 职场文书
2014小学年度工作总结
2014/12/20 职场文书
2015小学师德工作总结
2015/07/21 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
MySQL Router的安装部署
2021/04/24 MySQL
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技