webpack 构建遇到 ERROR in app.js from UglifyJs Unexpected token: operator(>) 的解决方法

在前端开发中，webpack 是一个非常常用的构建工具。它可以将多个 JavaScript 文件打包成一个文件，减小文件体积，提高加载速度。但是，在使用 webpack 进行构建时，我们有时会遇到 ERROR in app.js from UglifyJs Unexpected token: operator(>) 的错误，这时应该怎么办呢？

错误原因

这个错误的原因是因为 UglifyJs 在压缩代码时，遇到了一个不被支持的语法。具体来说，就是在代码中使用了类似于大于号（>）这样的符号，而 UglifyJs 并不支持这种符号。因此，在压缩代码时，就会出现 Unexpected token: operator(>) 的错误。

解决方法

解决这个错误的方法有两种，一种是升级 UglifyJs 的版本，另一种是在 webpack 的配置文件中增加一个插件。

升级 UglifyJs 的版本

升级 UglifyJs 的版本是一种较为简单的解决方法。我们只需要将 UglifyJs 的版本升级到最新版本即可。

npm install uglify-js@latest --save-dev

在 package.json 中，将 uglify-js 的版本号修改为最新版本：

{
  "devDependencies": {
    "uglify-js": "^3.14.2"
  }
}

然后重新运行 webpack 即可。

增加插件

另一种解决方法是在 webpack 的配置文件中增加一个插件。这个插件叫做 babel-plugin-transform-remove-strict-mode。

npm install babel-plugin-transform-remove-strict-mode --save-dev

在 webpack 的配置文件中增加这个插件：

// www.javascriptcn.com code example
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const babelTransformRemoveStrictMode = require('babel-plugin-transform-remove-strict-mode');

module.exports = {
  // ...
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            // 在 UglifyJs 压缩代码时，移除 "use strict" 语句
            directives: {
              // 用 babel-plugin-transform-remove-strict-mode 插件来移除 "use strict" 语句
              // 这个插件的作用是移除代码中的 "use strict" 语句
              // https://github.com/estools/escodegen/issues/297
              // https://github.com/babel/babel/issues/4480
              strict: false,
            },
          },
        },
        sourceMap: true,
      }),
    ],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['env'],
              plugins: [
                babelTransformRemoveStrictMode,
              ],
            },
          },
        ],
      },
    ],
  },
};

这个插件的作用是移除代码中的 "use strict" 语句。在移除了 "use strict" 语句之后，UglifyJs 就可以正常压缩代码了。

示例代码

下面是一个使用了大于号（>）的 JavaScript 代码示例：

const a = 1;
const b = 2;
const c = a > b ? a : b;
console.log(c);

在使用 webpack 进行构建时，会出现 ERROR in app.js from UglifyJs Unexpected token: operator(>) 的错误。我们可以使用上面介绍的两种方法来解决这个错误。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d3d4bca941bf713473dfc8