16

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

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

未捕获的错误：locals[0] 似乎不是module启用了热模块替换 API 的对象。env您应该使用Babel 配置中的部分来禁用生产中的 react-transform-hmr 。请参阅自述文件中的示例：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": []
        }
    }
}

正如您在 中看到的package.json > scripts > deploy，我什至明确地将 BABEL_ENV 设置为“生产”。

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

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

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

4 回答 4

8

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

process.env.NODE_ENV = 'production';

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

于 2016-07-13T10:42:36.423 回答
5

似乎无论 Babel一直使用development. 为我解决问题的方法是使用“开发”以外的名称并将其设置为 BABEL_ENV 的值。env.babelrc

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

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

new webpack.DefinePlugin({
  'process.env': {
    'NODE_ENV': JSON.stringify('development'),
    'BABEL_ENV': JSON.stringify('dev')
  }
}),
于 2016-05-24T14:53:16.423 回答
0

&在 shell 中意味着它将在后台运行，因此您的变量声明可能不会被同时发生的构建内容捕获。好消息是您可以在命令前添加变量声明。

您可以像这样简化命令：

"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"
于 2016-03-30T11:53:34.057 回答
0

你可以只使用babel-preset-react-hmre.

.babelrc

{
    "presets": ["react", "es2015", "stage-0"],
    "plugins": [
        "transform-decorators-legacy"
    ],
    "env": {
        "development": {
            "presets": ["react-hmre"]
        }
    }
}

网页包

    {
        test: /\.js(x?)$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
            presets: ['es2015', 'react', 'stage-0'],
            plugins: ['transform-decorators-legacy'],
            env: {
              development: {
                presets: ['react-hmre']
              }
            }
        }
    }
于 2016-04-04T13:41:33.653 回答