解决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报错的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决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 we

  • 关于maven打包时的报错: Return code is: 501 , ReasonPhrase:HTTPS Required

    今天使用jenkins构建时,报以下错误 [ERROR] Failed to execute goal on project saas20: Could not resolve dependencies for project com.ipower365.saas:saas20:war:0.0.1-SNAPSHOT: Failed to collect dependencies at com.ipower365.saas:messageserviceimpl:jar:0.0.1-SNAPSHOT

  • 解决vue-cli webpack打包开启Gzip 报错问题

    前两天项目上线,用vue-cli npm run build命令打包,打包完成后我擦吓了一跳,15M.本来暂时不打算优化的,但是每次看着部署包这么大,想想还是先优化一下,让包好看点,免得以后出现心理阴影! 在把 map文件干掉后,发现webpack这打包的速度,也忒感人了.在进行不自动生成 map文件设置时,有看到webpack自带的productionGzip功能,索性就一次性一起鼓捣鼓捣. 下面是瞎鼓捣历程,差点就鼓捣不出来了. 1.在项目 根目录config/index.js中build内

  • 安装python时MySQLdb报错的问题描述及解决方法

    问题描述: windows安装python mysqldb时报错python version 2.7 required,which was not found in the registry 网上很多方案,比如方案一: Python3.x时, from _winreg import *  改为 from winreg import * 去掉下划线 import sys from _winreg import * # tweak as necessary version = sys.version

  • 解决python使用list()时总是报错的问题

    如下所示: Traceback (most recent call last): File "<stdin>", line 1, in <module> TypeError: 'list' object is not callable 刚开始学习python的时候,可能会由于命名的不注意,导致也方法一直用不了,原因是在声明变量对的时候和python内置方法冲突了,导致方法被重新定义了,这样一来,方法自然也就不存在了 解决办法: 先复制个其他的list c = l

  • Vue安装依赖npm install时的报错问题及解决

    Vue安装依赖npm install时的报错问题及解决

    目录 安装依赖npm install时的报错 cnpm安装依赖出现各种问题 问题 解决方案 安装依赖npm install时的报错 1.vue的安装依赖于node.js,要确保你的计算机上已安装过node.js.可进入cmd编辑器,输入命令 node -v进行查看.出现版本信息即成功!没有则从浏览器上面下载安装即可,没有安装要求! 2.确定node安装后,就可以开始vue的安装了.用$ npm install -g vue-cli进行安装,输入vue -V,出现版本信息即成功! 3.建一个Vue

  • MySQL解决Navicat设置默认字符串时的报错问题

    MySQL解决Navicat设置默认字符串时的报错问题

    目录 简介 问题复现 原因分析 解决方案 简介 说明 本文介绍用Navicat添加字段(字符串类型)并设置默认值时的报错问题. 问题描述 在Java开发过程中,经常会遇到给已有的表添加字段的场景. 在插入新字段的时候,表里边可能已经有很多数据了,这时我们最好给新插入的字段设置一个默认值,这样MySQL就会将已经存在的数据的新加字段设置为默认值.设置默认值可以增加系统的可维护性. 但我在给已有的表插入新字段(字符串类型)的时候发现报错了,本文介绍如何解决这个问题. 报错信息 1064 - You

  • 三个思路解决laravel上传文件报错：413 Request Entity Too Large问题

    最近一个项目当中,要求上传图片,并且限制图片大小,虽然在laravel当中已经添加了相关的表单验证来阻止文件过大的上传,然而当提交表单时,还没轮到laravel处理,nginx就先报错了.当你仔细看报错页面时,你会发现有nginx版本信息,经过分析,这报错是因为nginx的默认上传文件大小配置client_max_body_size只有2MB, 基于nginx验证比laravel验证要早,想要友好报错而不是直接显示413 Request Entity Too Large,那么就有三个思路去解决.

  • 解决Django提交表单报错:CSRF token missing or incorrect的问题

    1.在Django提交表单时报错:Django提交表单报错: CSRF token missing or incorrect 具体报错页面如下: 2.有道词典翻译后如下: 通常,当存在真正的跨站点请求伪造时,或者Django的CSRF机制没有被正确使用时,就会出现这种情况.至于邮递表格,你须确保: 您的浏览器正在接受cookie. 视图函数将一个请求传递给模板的呈现方法. 在模板中,每个POST表单中都有一个{% csrf_token %}模板标记,目标是一个内部URL. 如果您没有使用Csrf

  • 执行Python程序时模块报错问题

    1. 在执行python程序时遇到 'ModuleNotFoundError: No module named 'xxxxx'' : 例如: 图片中以导入第三方的 'requests' 模块为例,此报错提示找不到requests模块.在python中,有的 模块是内置的(直接导入就能使用)有的模块是第三方的,则需要安装完成后才能导入使用,若未 安装直接导入使用就会出现上述报错!这里介绍最快的解决方法: 1)通过 pip (python软件包工具) 来安装所需要使用的第三方模块: 打开cmd输入

随机推荐