Uglify 报错详解及解决方案
背景介绍
UglifyJS 是一个广泛使用的 JavaScript 压缩工具，旨在减少 JavaScript 文件的体积，提高加载速度，由于其默认仅支持 ES5 语法，因此在处理包含 ES6 及以上版本语法的代码时，常常会出现报错问题，本文将详细探讨 UglifyJS 报错的原因及其解决方案。
一、UglifyJS 报错原因分析
1. ES6+ 语法不支持
UglifyJS 默认只支持 ES5 语法，而现代 JavaScript 开发中大量使用了 ES6 及以上版本的新特性，如const、let、箭头函数等，当这些新语法出现在代码中时，UglifyJS 无法正确解析，导致报错。
Unexpected token: name (const)
这种错误通常表明代码中存在 ES6 语法，而 UglifyJS 无法处理。
2. 依赖包未转译为 ES5
部分 npm 包在发布前未按照约定使用 Babel 等工具转译为 ES5 代码，这会导致在使用 UglifyJS 压缩时出现语法错误，一些依赖包可能包含箭头函数或模板字符串，而这些语法在 UglifyJS 中不被支持，从而导致压缩失败。
3. Webpack 配置不当
在使用 Webpack 进行项目构建时，如果未正确配置 Babel 和 UglifyJS，也可能导致报错，Babel 的配置文件中未包含必要的插件或预设，或者 UglifyJS 的配置文件中未正确设置参数，都可能导致压缩过程中出现错误。
二、解决方案
1. 使用 Babel 编译 ES6+ 代码
为了解决 UglifyJS 不支持 ES6+ 语法的问题，可以在构建过程中使用 Babel 将代码转译为 ES5，具体步骤如下：
（1）安装 Babel 及相关插件：
npm install savedev @babel/core @babel/presetenv babelloader
（2）配置 Babel：
在项目根目录下创建或修改.babelrc 文件，添加以下内容：
{
"presets": ["@babel/presetenv"]
}（3）配置 Webpack：
在 Webpack 配置文件中添加 Babel loader，确保所有 JavaScript 文件都经过 Babel 转译。
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babelloader',
},
},
],
},
};通过上述配置，Webpack 会在构建过程中使用 Babel 将所有 JavaScript 文件转译为 ES5，从而避免 UglifyJS 报错。
2. 替换 UglifyJS 为 Terser
UglifyJS 已经停止维护，官方推荐使用 Terser 作为替代方案，Terser 是 UglifyJS 的一个 fork，支持更多的 JavaScript 语法，并且性能更好，使用 Terser 可以有效解决 UglifyJS 报错的问题，具体步骤如下：
（1）安装 Terser webpack plugin：
npm install terserwebpackplugin savedev
（2）配置 Webpack 使用 Terser：
在 Webpack 配置文件中，将 UglifyJS 替换为 Terser。
const TerserPlugin = require('terserwebpackplugin');
module.exports = {
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},
};通过上述配置，Webpack 会在构建过程中使用 Terser 进行代码压缩，从而避免 UglifyJS 不支持 ES6+ 语法的问题。
3. 检查并更新依赖包
如果报错是由于某些依赖包未转译为 ES5 导致的，可以尝试更新这些依赖包到最新版本，或者在项目中手动将这些依赖包转译为 ES5，还可以使用es5imcompatibleversions 这个库来收集和解决不兼容的依赖包版本问题，具体步骤如下：
（1）安装 es5imcompatibleversions：
npm install es5imcompatibleversions savedev
（2）使用 es5imcompatibleversions：
根据该库的文档，自动 resolve 到项目里有问题的 npm 包路径，添加到 Babel loader 的 Include 参数里，这样，遇到已被收录的 es6 包，会自动走 Babel 编译；遇到未被收录的，可以在 es5imcompatibleversions 提 PR，被合并发布后，重装 npm 依赖再构建，自动生效。
UglifyJS 报错通常是由于不支持 ES6+ 语法或依赖包未转译为 ES5 导致的，通过使用 Babel 编译 ES6+ 代码、替换 UglifyJS 为 Terser 以及检查并更新依赖包等方法，可以有效解决这些问题，在实际开发中，建议根据项目需求选择合适的解决方案，以确保项目的顺利构建和部署。
