vue 打包失败问题UglifyJs Unexpected token: name

104 阅读 0 评论 69 点赞

我是靠谱客的博主真实丝袜，这篇文章主要介绍vue 打包失败问题UglifyJs Unexpected token: name，现在分享给大家，希望可以做个参考。

注：适用于大多数 UglifyJs Unexpected token: name 的情况，犹如 element-ui、image-conversion、xlsx等插件。

问题背景：

最近在做一个 vue读取本机的excel文件的两种方式的需求，即本地浏览器将用户上传的excel文件解析出来并展示给用户查看，再选择要导入的数据，将其调用接口保存到数据库。

在打包时（jenkins构建）报了一个错误，如下：

复制代码

1
2
3
4
5
6
7
8
ERROR in static/js/24.js from UglifyJs
Unexpected token: name (_fs) [./~/xlsx/xlsx.mjs:3163,0][static/js/24.js:3200,4][39m[22m

  Build failed with errors.

Build step 'Execute shell' marked build as failure
Finished: FAILURE

问题原因：

所使用的插件中，使用了ES6 的语法，UglifyJs只支持 ES5，无法对 ES6进行混淆压缩。

至于ES6语法，犹如：let、箭头函数等，请自行度娘。

问题解决：

修改打包文件webpack.base.conf.js设置：

找到 工程/build 目录下的webpack.conf.js 文件增加如下配置，用 babel 解析。

写法如下：

复制代码

1
2
3
4
5
6
{
        test: /.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/xxx')]
}

我的工程写法：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
{
	test: /.(js|mjs)$/,
	loader: 'babel-loader',
	include: [
	    resolve('src'),
        resolve('test') ,
        resolve('/node_modules/element-ui/src'),
        resolve('/node_modules/element-ui/packages'),
        resolve('/node_modules/image-conversion'),
		resolve('/node_modules/xlsx'),
   ]
}