gulp-uglify 相关问题

[richardmyu]

初步编写了一个 gulpfile.js 的文件后，命令行执行压缩，然后报了一个错：

[15:41:38] 'miniJs' errored after 359 ms
[15:41:38] GulpUglifyError: unable to minify JavaScript
Caused by: SyntaxError: Unexpected token: punc «{», expected: punc «;»
File: D:\xx\xx..xx\xx\public\js\algolia-search.js
Line: 47
Col: 19
[15:41:38] 'default' errored after 364 ms

根据提示找到对应文件代码：

#47          return `${stats}
#48            <span class="algolia-powered">
#49              <img src="${CONFIG.root}images/algolia_logo.svg" alt="Algolia">
#50            </span>
#51            <hr>`;

47行19列的对应字符是 $，提示说是语法错误，遂猜测是不是不支持模板字符串引起的问题？（进一步猜想是不支持 ES6 语法）通过编写实例测试（编写了一个简单的目标字符串），发现不是（至少简单的目标字符串可以编译）。

于是试着注释报错代码，看看会不会还有其他类似的问题（记录了几种典型）：

// SyntaxError: Unexpected token: name «class», expected: punc «;»
result += `<b class="search-keyword">${text.substring(hit.position, end)}</b>`;
// 实测中，字符串型的 HTML 可以，但是不能是模板字符串的

// SyntaxError: Unexpected token: name «ul», expected: punc «,»
var target = document.querySelector(`.tabs ul.nav-tabs li a[href="${tHash}"]`);
// 不含 ul.nav-tabs 这种组合的类名，可以通过

// SyntaxError: Invalid assignment
document.querySelector(`iframe[data-feature=${featureID}]`).style.height = parseInt(height, 10) + 5 + 'px';

查看 gulp-uglify 仓库，了解到 gulp-uglify 基于 UglifyJS3，并没有显示说明是否支持 ES6+ 语法，所以就去看 UglifyJS (UglifyJS3 特指 UglifyJS 3.x 版本，以区别 2.x 版本)，在主页看到了这么一句：

uglify-js supports ECMAScript 5 and some newer language features.

这就很好解释了上面的问题（/(ㄒoㄒ)/~~）。

如何解决 ES6+ 语法问题呢？官方有提示：

To minify ECMAScript 2015 or above, you may need to transpile using tools like Babel.

所以要编译 ES6+ 语法，还需要安装 babel 之类的插件。不使用插件的话，还可以使用 uglify-es（但 terser 和 gulp-uglify-es 都表示该库不在维护了，慎用）。

根据 Unexpected token: keyword (const) #352 来看，可以使用 terser 来替代，其仓库也明确表示支持 ES6+ 语法 :

uglify-es is no longer maintained and uglify-js does not support ES6+.

terser is a fork of uglify-es that mostly retains API and CLI compatibility with uglify-es and uglify-js@3.

由 terser 延申了一个 gulp-terser；除此外，由 uglify-es 延申出了 gulp-uglify-es

总结一下：

最后补一句（基于当前时间：2021/01/25）：

• UglifyJS 还在持续更新中；
• uglify-es 已经三年没有更新了；
• gulp-uglify 已经两年没有更新了（维护者在 issue#352 说该项目还能配合着 terser 使用...）；
• terser 持续更新中;
• gulp-terser 是个新项目，最近更新在两个月前；
• gulp-uglify-es 近一年没有更新;

插件更迭呀！！！