javascript - 为什么React应用(与Webpack和Babel一起)的生产版本会在HMR上使用错误的开发环境，从而导致错误？

我试图创建我的React项目的生产版本，但是它选择了错误的配置。

在开发版本中，我正在使用HMR(热模块更换)。这是在.babelrc中的env > development > plugins下配置的。
当添加额外的节点env > production时，它似乎被忽略了。它仍在使用带有HMR的开发配置，这会导致错误:



当然，我已经检查了该信息，但是一切似乎都正确。
当我从.babelrc的开发配置中删除HMR插件时，它起作用了，证明它确实是在使用开发配置而不是生产环境。
这是我的文件:

package.json

{
  "name": "myproject",
  "main": "index.js",
  "scripts": {
    "serve": "cross-env NODE_ENV=development webpack-dev-server --content-base bin/ --devtool eval --progress --colors --hot --inline",
    "deploy": "cross-env NODE_ENV=production BABEL_ENV=production webpack -p --config webpack.production.config.js"
  }
  //dependencies omitted in this example
}

.babelrc

{
    "presets": ["react", "es2015", "stage-0"],
    "plugins": [
        ["transform-decorators-legacy"]
    ],
    "env": {
        "development": {
            "plugins": [
                ["react-transform", {
                    "transforms": [{
                        "transform": "react-transform-hmr",
                        "imports": ["react"],
                        "locals": ["module"]
                    }]
                }]
            ]
        },
        "production": {
            "plugins": []
        }
    }
}

如您在package.json > scripts > deploy中看到的，我什至将BABEL_ENV显式设置为'production'。

为什么会这样呢？如何确保生产版本忽略HMR插件？

顺便说一下，搜索通常会导致issue #5 on the React-transform-HMR Github page，这是一个长线程，没有明确的解决方案。

编辑2016.03.30:根据要求添加我的webpack配置的Babel部分。
编辑2016.04.06:根据要求添加整个webpack文件。

webpack.production.config.js

require('es6-promise').polyfill();
var path = require('path');

module.exports = {
    entry: './main.jsx',
    context: __dirname + path.sep + 'src',
    output: {
        path: path.resolve(__dirname, './bin'),
        filename: 'index.js'
    },
    devServer: {
        port: 3333
    },
    module: {
        loaders: [
            {
                test: /\.js(x?)$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015', 'stage-0'],
                    plugins: [['transform-decorators-legacy']]
                }
            },
            {
                test: /\.css$/,
                loader: "style!css"
            },
            {
                test: /\.scss$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'style-loader!css-loader!sass-loader?sourceMap'
            }
        ]
    }
};

最佳答案

唯一对我有用的是我写的-

process.env.NODE_ENV = 'production';

在我的webpack.config.prod.js文件的开头。

关于javascript - 为什么React应用(与Webpack和Babel一起)的生产版本会在HMR上使用错误的开发环境，从而导致错误？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36153628/