为什么React app的生成版本（使用Webpack和Babel）使用错误的开发环境与HMR，这会导致错误？ [英] Why does production build of React app (with Webpack and Babel) use wrong development env with HMR, which causes errors?

问题描述

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

I'm trying to create a production build of my React project, but it picks the wrong configuration.

在开发版本中，我使用的是HMR（热模块更换）。这是在.babelrc中，在 env>下配置的。发展>插件。
添加额外节点 env>生产似乎被忽略了。它仍在使用HMR的开发配置，这会导致错误：

In the development version I'm using HMR (Hot Module Replacement). This is configured in .babelrc, under env > development > plugins. When adding an extra node env > production it seems to be ignored. It's still using the development configuration with HMR, which causes an error:

未捕获错误：locals [0]似乎不是模块对象，启用了
热模块替换API。您应该在Babel
配置中使用 env 部分禁用生产中的
react-transform-hmr。请参阅自述文件中的示例： https://github.com/gaearon/react-transform-hmr

Uncaught Error: locals[0] does not appear to be a module object with Hot Module replacement API enabled. You should disable react-transform-hmr in production by using env section in Babel configuration. See the example in README: https://github.com/gaearon/react-transform-hmr

我当然检查了这些信息，但一切似乎都是正确的。
当我从.babelrc的开发配置中删除HMR插件时，它可以工作，证明它确实使用了开发配置而不是生产。
这是我的档案：

Of course I've checked that information, but everything seems right. When I removed the HMR plugin from .babelrc's development config, it works, proving it is indeed using the development config instead of production. Here's my files:

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>中看到脚本>部署，我甚至明确地将BABEL_ENV设置为'production'。

As you can see in package.json > scripts > deploy, I'm even explicitly setting the BABEL_ENV to 'production'.

为什么会这样？如何确保生成构建忽略HMR插件？

Why is this happening? How do I make sure the production build ignores the HMR plugins?

顺便说一下，搜索通常会导致在React-transform-HMR Github页面上发布＃5 ，这是一个没有明确解决方案的长线程。

By the way, searching often leads to issue #5 on the React-transform-HMR Github page, which is a long thread without a clear solution.

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

Edit 2016.03.30: Adding the Babel part of my webpack config on request. Edit 2016.04.06: Adding whole webpack file on request.

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'
            }
        ]
    }
};

推荐答案

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

The only thing that worked for me, is that I wrote -

process.env.NODE_ENV = 'production';

。

这篇关于为什么React app的生成版本（使用Webpack和Babel）使用错误的开发环境与HMR，这会导致错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！