web-dev-qa-db-ja.com

Reactアプリ（WebpackとBabelを使用）の本番ビルドがHMRで間違った開発環境を使用するのはなぜですか？エラーが発生しますか？

Reactプロジェクトの本番ビルドを作成しようとしていますが、間違った構成を選択します。

開発バージョンでは、HMR（ホットモジュール交換）を使用しています。これは、.babelrcのenv > development > pluginsの下で構成されます。ノードenv > productionを追加すると、無視されるようです。まだHMRで開発構成を使用しているため、エラーが発生します。

キャッチされないエラー：locals [0]は、ホットモジュール置換APIが有効になっているmoduleオブジェクトではないようです。 Babel構成でenvセクションを使用して、本番環境でreact-transform-hmrを無効にする必要があります。 READMEの例を参照してください： https://github.com/gaearon/react-transform-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を「本番」に明示的に設定しています。

なんでこんなことが起こっているの？本番ビルドがHMRプラグインを無視するようにするにはどうすればよいですか？

ちなみに、検索すると React-transform-HMR Githubページの問題＃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'
            }
        ]
    }
};
javascriptreactjswebpackbabeljswebpack-hmr
16
Micros

私のために働いた唯一のことは、私が書いたことです-

process.env.NODE_ENV = 'production';

webpack.config.prod.jsファイルの先頭にあります。

9
alexunder

Babelが.babelrcで指定されたdevelopment値のenvセクションを使用し続けているようです。私にとって問題を解決したのは、「開発」以外の名前を使用し、それをBABEL_ENVの値として設定することでした。

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

開発には別のconfを使用します。私が持っているプラ​​グイン：

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

& in 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"
0
Mijamo

babel-preset-react-hmre 。

。babelrc

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

webpack

    {
        test: /\.js(x?)$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
            presets: ['es2015', 'react', 'stage-0'],
            plugins: ['transform-decorators-legacy'],
            env: {
              development: {
                presets: ['react-hmre']
              }
            }
        }
    }
0
andykenward