与 Webpack 反应 - UglifyJSPlugin，意外令牌：关键字（const）答案

【问题标题】：React with Webpack - UglifyJSPlugin, Unexpected token: keyword (const)与 Webpack 反应 - UglifyJSPlugin，意外令牌：关键字（const）
【发布时间】：2017-08-06 07:42:44
【问题描述】：

我正在尝试构建我的 React 项目以用于生产。当我运行我的生产命令时，我收到一条关于 UglifyJSPlugin 的错误消息：Unexpected token: keyword (const)。下面我添加了我的 package.json 和 webpack.config.js 文件中的所有代码。有几个与此问题相关的问题，但没有一个有效。任何建议都会很棒。

package.json

{
    ...
    "scripts": {
        ...
        "prod": "NODE_ENV=production webpack -p"
    },
    "dependencies": {
        "babel-plugin-add-module-exports": "^0.2.1",
        "babel-plugin-react-html-attrs": "^2.0.0",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-plugin-transform-decorators-legacy": "^1.3.4",
        "babel-preset-stage-0": "^6.24.1",
        "babel-preset-stage-2": "^6.24.1",
        ...
        "webpack": "^3.4.1",
        "webpack-dev-server": "^2.6.1"
    },
    "devDependencies": {
        "babel-core": "^6.25.0",
        "babel-loader": "^7.1.1",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "uglify-js": "git://github.com/mishoo/UglifyJS2#harmony-v2.8.22",
        "uglifyjs-webpack-plugin": "^0.4.6"
    }
}

webpack.config.js

var path = require('path');
var webpack = require('webpack');

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

var debug = process.env.NODE_ENV !== 'production';

module.exports = {
    context: path.join(__dirname, "src"),
    devtool: debug ? "inline-sourcemap" : false,
    entry: './js/client.js',
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                options: {
                    presets: ['stage-2', 'es2015', 'react'],
                    plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
                }
            },
            {
                test: /\.css$/,
                loader: ['style-loader/url', 'file-loader']
            }
        ]
    },
    output: {
        path: __dirname + "/src/",
        filename: 'client.min.js'
    },
    plugins: debug ? [] : [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new UglifyJSPlugin({
            mangle: false,
            sourceMap: false
        })
    ],
};

.babelrc

{
    "presets": [
        ["stage-2"],
        ["es2015",  {"modules": false}],
        ["react"]
    ]
}

【问题讨论】：

你运行的是什么版本的节点？
@ManasJayanth 节点 v6.11.0

标签： javascript reactjs webpack uglifyjs

【解决方案1】：

UglifyJSPlugin 说你的 js 文件有关键字 const 。我认为它是因为输出文件是 es6。但是 UglifyJSPlugin 需要 es5

【讨论】：

在这种情况下，我使用的一个 npm 包没有被转译成 es5 并且 UglifyJS 无法处理这个包。一旦我删除了包，一切都恢复正常了。