解决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 相关文章推荐
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
树结构之JavaScript
Jan 24 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
Vue项目中跨域问题解决方案
Jun 05 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
vue如何实现自定义底部菜单栏
Jul 01 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 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实用小技巧之调用录像的方法
2019/12/05 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
js简单实现Select互换数据的方法
2015/08/17 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
Python标准库与第三方库详解
2014/07/22 Python
对Python实现累加函数的方法详解
2019/01/23 Python
Python 学习教程之networkx
2019/04/15 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
师范生自我鉴定范文
2013/10/05 职场文书
社区包粽子活动方案
2014/01/21 职场文书
畜牧兽医本科生的自我评价
2014/03/03 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js