UglifyJs 压缩报错 Unexpected token name «i», expected punc «;»

男娘i 2023-06-06 08:26 46阅读 0赞

# 场景 #

webpack中使用UglifyJs打包项目时，抛出了这个异常，导致无法打包成功。奈何失败的错误提示信息只有寥寥数语，根本无法定位到问题代码的位置

ERROR in build.js from UglifyJs
    Unexpected token operator «=», expected punc «,» [./node_modules/quill-image-extend-module/index.js:12,0][build.js:76527,35]

# 分析原因 #

搜索了这个问题，得知原因是因为UglifyJs无法压缩es6代码。关于这句【无法压缩es6代码】值得推敲后面再说

# 解决方法 #

首先说明，我的项目（老项目）99%的代码都是使用es5的代码写的，另外1%可能是工作过程中不小心使用了ES6。上面提到的【无法压缩es6代码】一般是指ES6或ES6+提供的新语法，例如 class、extend、let、const、=>等。而ES6/+中的新方法是可以被UglifyJs压缩的，比如数组方法的map、filter，字符串操作的includes、trim等。

## uglify-es ##

查找解决方案的过程中，看到了这个关键字。这玩意也是个npm插件。应该可以解决压缩es6，这个我没有试。有兴趣的可以自己试试

## 全局替换 ##

使用代码编辑器的全局搜索和替换功能替换到是上面提到的ES6/+的新语法。这种解决方案还得看你的代码里面包含ES6/+的语法的数量，如果数量比较多，这样做是得不偿失。由于我的项目的99.99都是ES5代码，所以我使用了这种方法。 注意

*  替换的时候要先全局搜索，预览搜索结果是否匹配了不应该替换的字符，确认无误后，再执行全局替换。比如有有个变量叫`const conster = 6`，如果不注意的话，很有可能会被替换成 `var varer = 6`。这种情况就改变了代码逻辑。

## 使用babel ##

对于项目中ES6/+代码比较多的情况，还是建议试试第一种，或者直接上babel。这里只提供个思路，大家自行研究

# 总结 #

写代码是一件磨练自己各方面素质的事情。如果遇到了下面这种情况  
![你的代码又红了][format_png]  
不要慌，深吸一口气，看下红字写了什么玩意儿。找到关键信息，弄他~~~~~~~~。  
仅以此勉励被蹂躏的自己

[format_png]: /images/20230601/df83e2f903b243d29b29ff3ec2433d8b.png