webpack 2 uglify 插件 ES6答案

【问题标题】：webpack 2 uglify plugin ES6webpack 2 uglify 插件 ES6
【发布时间】：2017-08-24 14:13:06
【问题描述】：

我使用 webpack 来打包用 ES6 编写的 react 模块。在我添加 json-immutable 插件之前，所有这些都已完成。需要的是json-stream-stringify，还有一个类：

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

webpack 运行良好但不能 monify 文件，因为 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 之后缩小文件？

【问题讨论】：

Uglify 对 ES6 不太了解，.. 你有 2 个选择，转译到 ES5 & Uglify，或者不使用 Uglify 并使用 Babel 自己的 Uglifyer 。（巴比利）
我可以添加 webpack 选项以仅转换为 ES5 的 node_modules 吗？（会检查 babili 看起来不错）
顺便说一句，我从我的 webpack 文件中删除了 uglify 插件，但我仍然有这个错误。我应该清除一些缓存吗？我看到它使用正确的 webpack.config 文件
UglifyJsPlugin 现在是内置的。无需导入。只需使用新的 webpack.optimize.UglifyJsPlugin

标签： javascript webpack

【解决方案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()
  ]
}

也许对某人有用。

【讨论】：