UglifyJS webpack 插件抛出：Unexpected token: name (features)

Question

我曾经在使用 UglifyJS for Webpack 和 ES6 模块时遇到问题：

来自 UglifyJs 的 static/js/vendor.6ccd9e38979a78765c7a.js 中的错误 意外令牌：名称（功能） [./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 中的错误 意外令牌：名称（功能） [静态/js/vendor.6ccd9e38979a78765c7a.js:39003,6]

可能是什么问题？

Answer 1

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

Uglify 无法自行解析 ES6（据我所知），因此您需要将代码转换为 ES5，使用 babel 对生成的 JS 进行后处理，或者使用不同的压缩器。我的推荐是 Babelify，在 Uglify 经常出错后我切换到它。

编辑：问题可能出在您的 new webpack.optimize.UglifyJsPlugin 声明中，在 Webpack 3+ 中使用此声明存在问题。您需要导入uglifyjs-webpack-plugin 并将插件声明更改为new UglifyJSPlugin（示例）。这是reference。

例子：

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

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