uglifyjs es6报错

UglifyJs 是一个流行的JavaScript压缩工具，它通过移除代码中不必要的字符来减小文件体积，提高加载速度，它默认只支持到 ES5 的语法，这意味着如果代码中包含了 ES6 或更高版本的JavaScript语法，使用 UglifyJs 进行压缩时就会遇到问题。

当您在构建过程中遇到 UglifyJs 报错，提示不支持 ES6 语法时，通常会出现类似下面的错误信息：

ERROR in static/js/vendor.f1c68aa2d5e85847d30e.js from UglifyJs
Unexpected token: name (i), expected: punc (;) [./node_modules/elementui/src/utils/merge.js:2,0][static/js/vendor.f1c68aa2d5e85847d30e.js:17064,11]

这个错误是由于 UglifyJs 在压缩过程中遇到了它不识别的 ES6 语法，如箭头函数、模板字符串、let、const 等关键字。

为了解决这个问题，我们需要采取以下措施：

我们需要明确的是，UglifyJs 的最新版本（uglifyjs@3）并不支持 ES6 语法，如果您的代码中包含了 ES6 语法，或者您使用的第三方库（如 elementui）包含了 ES6 代码，那么您需要先将这些代码转换为 ES5。

一种常见的做法是使用 Babel 和 babelloader。Babel 是一个广泛使用的JavaScript编译器，能够将 ES6+ 代码转换为 ES5，以下是配置方法：

1、确保您已经安装了 babelloader 和相关的 Babel 插件和预设。

npm install savedev babelloader @babel/core @babel/presetenv

2、修改 webpack 配置文件（webpack.base.conf.js），确保 babelloader 会处理所有的 .js 文件。

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /.js$/,
        loader: 'babelloader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/elementui')] // 确保包含了使用ES6的第三方库
      }
      // ...
    ]
  },
  // ...
};

3、创建或更新 .babelrc 配置文件，使用 @babel/presetenv 预设。

{
  "presets": [
    "@babel/presetenv"
  ]
}

上述配置确保了 Babel 会将所有通过 babelloader 处理的文件中的 ES6 代码转换为 ES5，这样 UglifyJs 就可以正常压缩这些文件了。

如果上述方法仍无法解决您的问题，或者您希望寻找替代 UglifyJs 的方案，可以考虑以下做法：

1、使用 terserwebpackplugin 替代 UglifyJsPlugin。terserwebpackplugin 是一个基于 Terser 的 webpack 插件，Terser 是 uglifyes 的一个分支，它支持 ES6 语法。

安装 terserwebpackplugin：

“`bash

npm install terserwebpackplugin savedev

“`

在 webpack 配置文件中使用：

“`javascript

const TerserPlugin = require(‘terserwebpackplugin’);

module.exports = {

// …

optimization: {

minimizer: [

new TerserPlugin({

// 可以在这里设置terser的选项

})

]

}

// …

};

“`

2、检查您的 package.json 中 dependencies 和 devDependencies 中的依赖版本，确保它们与 ES6 兼容。

通过这些措施，您应该能够解决 UglifyJs 压缩 ES6 代码时遇到的报错问题，确保项目能够顺利构建，记住，始终关注您使用的工具和插件的最新动态，以便在遇到问题时能够快速找到合适的解决方案。