webpack 2 uglify plugin ES6

Question

我使用webpack将用ES6编写的React模块进行打包。一切都运行正常，直到我添加了json-immutable插件。它需要json-stream-stringify，并且有一个类：

class JSONStreamify extends CoStream {...}
module.exports = function(obj, replacer) {
    return new JSONStreamify(obj, replacer);
};

webpack的功能很好，但无法修改文件，因为Uglify会抛出错误。

Unexpected token: name (JSONStreamify)

我在这里找到了有关模块的信息https://github.com/webpack-contrib/uglifyjs-webpack-plugin。我已安装并添加了ecma支持，但仍然面临相同的错误。我尝试过删除和添加排除node_modules，但没有结果。

我的webpack.config.js文件是

const path = require('path');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  entry: {
    backend: './src/backend.js',
    frontend: './src/frontend.js',
  },
  output: {
    path: path.resolve(__dirname,'./dist'),
    filename: '[name].sakui.min.js'
  },
  externals: {
    'jQuery':'jQuery',
    'Foundation':'Foundation',
    'react': 'React',
    'react-dom': 'ReactDOM',
    'redux': 'Redux',
    'react-redux': 'ReactRedux',
    'immutable': 'Immutable',
    'lodash': '_',
    '_': '_'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            "only": "src/**",
            "presets": [
              "env",
              "react",
              "es2017",
              "stage-3"
            ],
            "plugins": [["transform-class-properties", { "spec": true }],"transform-decorators-legacy","minify-simplify"],
            "babelrc": false
          }
        }
      }
    ]
  },
  plugins: [
    new UglifyJSPlugin({
      ecma: 6
    })
  ]
}

有什么提示可以解决这个问题吗？也许有任何外部工具在 webpack 后压缩文件的方法？

- jaroApp

---

Uglify 对 ES6 的支持不是很好。你有两个选择，将代码转换为 ES5 再使用 Uglify，或者不使用 Uglify 而使用 Babel 自带的压缩工具（Babili）。 - Keith

我能否为webpack添加选项，只将node_modules转译为ES5？（我会检查Babili是否适合） - jaroApp

顺便说一句，我从我的webpack文件中删除了uglify插件，但仍然出现错误。我应该清除一些缓存吗？我看到它使用了正确的webpack.config文件。 - jaroApp

现在UglifyJsPlugin已经内置了，无需导入。只需使用新的webpack.optimize.UglifyJsPlugin即可。 - Niels Steenbeek

Answer 1

解决方案：

我发现的一种方法是使用Babel将所有带有node_modules的内容转换为ES5，这样可以实现功能。

我的webpack.config.js文件：

const path = require('path');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  entry: {
    backend: './src/backend.js',
    frontend: './src/frontend.js',
  },
  output: {
    path: path.resolve(__dirname,'./dist'),
    filename: '[name].sakui.min.js'
  },
  externals: {
    'jQuery':'jQuery',
    'Foundation':'Foundation',
    'react': 'React',
    'react-dom': 'ReactDOM',
    'redux': 'Redux',
    'react-redux': 'ReactRedux',
    'immutable': 'Immutable',
    'lodash': '_',
    '_': '_'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            "presets": [
              "env",
              "react",
              "es2017",
              "stage-3"
            ],
            "plugins": [["transform-class-properties", { "spec": true }],"transform-decorators-legacy"],
            "babelrc": false
          }
        }
      }
    ]
  },
  plugins: [
    new UglifyJSPlugin()
  ]
}

也许对某些人有用。

- jaroApp