Почему создание сборки приложения React (с помощью Webpack и Babel) использует неправильную разработку env с HMR, которая вызывает ошибки?

Question

Я пытаюсь создать производственную сборку моего проекта React, но он выбирает неправильную конфигурацию.

В версии разработки я использую HMR (замена горячего модуля). Это настроено в .babelrc, под env > development > plugins. При добавлении дополнительного узла env > production он, кажется, игнорируется. Он по-прежнему с использованием конфигурации разработки с ГМР, который вызывает ошибку:

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

Конечно, я проверил эту информацию, но все кажется правильным. Когда я удалил плагин HMR из конфигурации разработки .babelrc, он работает, доказывая, что он действительно использует конфигурацию конфигурации вместо производства. Вот мои файлы:

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?

Кстати, поиск часто приводит к issue #5 on the React-transform-HMR Github page, который является длинной нитью без четкого решения.

Редактировать 2016.03.30: Добавляем 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' 
      } 
     ] 
    } 
}; 

Answer 1

& в оболочке означает, что она будет работать в фоновом режиме, так что, может быть, ваша переменная декларация не пойманы сборки материала, что происходит в то же время , Хорошо, что вы можете просто добавить команду с объявлениями переменных.

Вы могли бы упростить подобные команды:

"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" 

Answer 2

Вы можете просто использовать 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'] 
       } 
      } 
     } 
    } 

Answer 3

Кажется, что независимо от того, что Бабель держит используя development часть стоимости, указанной в env.babelrc. То, что решило проблему для меня, заключалось в том, чтобы использовать имя, отличное от «разработки», и установить его как значение BABEL_ENV.

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

Я использую отдельный conf для разработки. В плагинами у меня есть:

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

Answer 4

Единственное, что работал для меня, это то, что я написал -

process.env.NODE_ENV = 'production'; 

в начале моего файла webpack.config.prod.js.