解决iview打包时UglifyJs报错的问题
时间:2019-04-13
本文章向大家介绍解决iview打包时UglifyJs报错的问题,主要包括解决iview打包时UglifyJs报错的问题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
使用npm run dev时运行是ok的,但是npm run build打包时iview报错,
如下:
原因是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报错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- 剑指OFFER之反转链表(九度OJ1518)
- Android Studio快捷键每日一练(4)
- Android Studio快捷键每日一练(3)
- 一分钟教你在博客园中制作自己的动态云球形标签页
- Python标准库06 子进程 (subprocess包)
- 摩拜、美团也伸手共享汽车拉!众多品牌里面,这三家最牛!
- Android Studio快捷键每日一练(2)
- Linux进程间通信
- Android Studio快捷键每日一练(1)
- Android开发中的全屏背景显示方案
- Android中的FragmentManager的问题
- Premiere Pro & After Effects插件开发调试方法
- RegQueryValueEx正确使用方法
- 区块链+医疗五类应用前景广阔,英美已有企业试水
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法