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

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

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

Неперехваченная ошибка: locals [0] не похоже на module объект с включенным API замены горячего модуля. Вы должны отключить response-transform-hmr в продакшене, используя раздел env в конфигурации Babel. См. Пример в 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 значение «production».

Почему это происходит? Как убедиться, что производственная сборка игнорирует плагины HMR?

Кстати, поиск часто приводит к проблеме № 5 на странице React-transform-HMR Github , который представляет собой длинную нить без четкого решения.

Изменить 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'
            }
        ]
    }
};

person Micros    schedule 22.03.2016    source источник
comment
Какая ОС у вас работает?   -  person Mijamo    schedule 30.03.2016
comment
Я использую OSX, но мой товарищ по команде работает в Windows. Я изменю строки сценария, так как сейчас мы используем cross-env.   -  person Micros    schedule 30.03.2016
comment
Не могли бы вы показать конфигурацию веб-пакета на всякий случай?   -  person Mijamo    schedule 30.03.2016
comment
Готово, я полагаю, это только часть модуля загрузчика Babel?   -  person Micros    schedule 30.03.2016
comment
Вы пробовали установить BABEL_ENV в своем webpack.config.js файле? Я использую предустановку react-hmre, и именно так я устанавливаю ее на production или development.   -  person Juan Carlos Farah    schedule 30.03.2016
comment
Для меня это выглядит нормально, и у меня работает аналогичная настройка, поэтому здесь должна быть какая-то внешняя проблема :(   -  person Mijamo    schedule 30.03.2016


Ответы (4)


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

process.env.NODE_ENV = 'production';

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

person alexunder    schedule 13.07.2016

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

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

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

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

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

Вы можете упростить команды следующим образом:

"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"
person Mijamo    schedule 30.03.2016
comment
Спасибо @Mijamo. Мы уже удалили SET и знаки & и добавили кросс-env для совместимости с Windows. (Я изменил вопрос, чтобы отразить это) Однако проблема сохраняется, поэтому & не был причиной проблемы ... - person Micros; 30.03.2016

Вы можете просто использовать 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']
              }
            }
        }
    }
person andykenward    schedule 04.04.2016
comment
Хотя это, кажется, устраняет эту ошибку, Babel все еще использует часть env.development моей конфигурации и игнорирует мое env.production. Так что я не получаю успешно созданный js-файл. Есть идеи по этому поводу? - person Micros; 06.04.2016
comment
@Micros, мне нужно увидеть ваш полный файл webpack. Или лучше репо, если возможно - person andykenward; 06.04.2016
comment
Хорошо, я изменил вопрос с полным файлом конфигурации веб-пакета. - person Micros; 06.04.2016
comment
хорошо, я быстро составил суть, какую установку я использую. Когда представится возможность, сделаю рабочее репо, чтобы посмотреть, работает ли оно. - person andykenward; 06.04.2016
comment
@Micros Есть новости? Я столкнулся с аналогичной проблемой, устанавливаю NODE_ENV везде, не могу придумать, что еще попробовать .... Не могли бы вы опубликовать свое решение здесь? Спасибо. - person alexunder; 13.07.2016
comment
Привет @alexunder, да, в конце концов, не было способа заставить компилятор уважать конфигурацию .babelrc. Поэтому я перестал использовать этот файл и создал два файла webpack.configs. Один для отладки, один для производства. Конфигурация babel устанавливается в файлах webpack, что устраняет всю проблему. Сообщите мне, если это сработает для вас. Я скоро добавлю этот ответ. - person Micros; 14.07.2016
comment
@Micros Привет, да, вы можете увидеть мой ответ ниже, в конце концов сделал то же самое :) - person alexunder; 14.07.2016