UglifyJS webpack插件抛出错误: 意外标记: 名称 (features)

Question

我曾经在使用UglifyJS处理Webpack和ES6模块时遇到问题:

来自UglifyJs的static/js/vendor.6ccd9e38979a78765c7a.js中的错误 意外的标记: name (features) [./node_modules/pica/lib/mathlib.js:19,0][static/js/vendor.6ccd9e38979a78765c7a.js:39003,6]

我了解到Webpack插件的新测试版本支持ES6:

https://github.com/webpack-contrib/uglifyjs-webpack-plugin

new webpack.optimize.UglifyJsPlugin({
  uglifyOptions: {
    ie8: false,
    ecma: 8, // I also tried 7 and 6
    parse: {},
    mangle: {
      properties: {
        // mangle property options
      }
    },
    output: {
      comments: false,
      beautify: false
    },
    compress: {},
    warnings: true
  }
}),

然而，现在我又遇到了另一个错误：

来自UglifyJs的static/js/vendor.6ccd9e38979a78765c7a.js中的ERROR 意外的令牌：名称（features） [static/js/vendor.6ccd9e38979a78765c7a.js:39003,6]

可能是什么问题呢？

- alex

Answer 1

你可以尝试安装babel-preset-env并在你的webpack.config.js或babelrc中添加presets": [ "env" ]。

Uglify无法独立解析ES6（据我所知），所以你需要将你的代码转换为ES5，并用Babel生成的JS进行后处理，或者使用不同的代码压缩工具。我的建议是Babelify，我因为一直遇到Uglify的常见错误而切换到了它。

编辑：问题可能在于你的new webpack.optimize.UglifyJsPlugin声明。使用此声明时，在Webpack 3+中会出现问题。你需要导入uglifyjs-webpack-plugin并更改插件声明为new UglifyJSPlugin（例如）。这里提供一个参考链接。

示例：

const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

    const config = {
      ...
      plugins: [
        new UglifyJSPlugin({ uglifyOptions: { ...options } })
      ]
    }

- Darko Tasevski

---

{btsdaf} - alex

有一些插件使用ES6语法，我没有注意到上面的提示信息，这里指uglifyjs不支持ES6，所以我将其移除，并尝试使用babel-minify代替。 - Osify

Answer 2

对于因webpack3和webpack.optimize.UglifyJsPlugin而陷入困境的人：

对我们来说，答案是让我们的webpack babel-loader转译那些node_modules。你可以排除所有除了特定的包和包名称模式之外的所有node_modules，而不是将所有node_modules都通过babel loader发送（这不推荐出于性能原因），像这样：

exclude: /node_modules\/(?!(react-markdown|mdast-util-.*|micromark-.*)\/).*/

- Matt Wills