提问者:小点点

为什么React应用程序的生产构建(使用Webpack和Babel)使用错误的HMR开发环境,从而导致错误?


在开发版本中,我使用HMR(热更新)。这是在. babelrc中配置的,在env下

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

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

包. 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": []
        }
    }
}

正如你在pack. json中看到的

为什么会发生这种情况?如何确保生产版本忽略HMR插件?

顺便说一句,搜索经常会导致React-transform-Github页面上HMR问题#5,这是一个没有明确解决方案的长线程。

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

网络包.生产.配置. 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'
            }
        ]
    }
};

共3个答案

匿名用户

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

process.env.NODE_ENV = 'production';

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

匿名用户

似乎无论Babel一直使用. babelrc中指定的env值的开发部分。对我来说,解决问题的是使用“开发”以外的名称并将其设置为BABEL_ENV的值。

"env": {
    "dev": {
        "plugins": [
        ]
    },
    "production": {
    }
}

我使用单独的conf进行开发。在插件中,我有:

new webpack.DefinePlugin({
  'process.env': {
    'NODE_ENV': JSON.stringify('development'),
    'BABEL_ENV': JSON.stringify('dev')
  }
}),

匿名用户

您可以像这样简化命令:

"serve": "NODE_ENV=development webpack-dev-server --content-base bin/ --devtool eval --progress --colors --hot --inline",
"deploy": "NODE_ENV=production BABEL_ENV=production webpack -p --config webpack.production.config.js"