Ответ 1
Единственное, что сработало для меня, это то, что я написал -
process.env.NODE_ENV = 'production';
в начале моего файла webpack.config.prod.js.
Я пытаюсь создать производственный сборник моего проекта React, но он выбирает неправильную конфигурацию.
В версии разработки я использую HMR (Hot Mod Replocation). Это настроено в .babelrc, под env > development > plugins
.
При добавлении дополнительного node env > production
он, кажется, игнорируется. Он по-прежнему использует конфигурацию разработки с HMR, которая вызывает ошибку:
Ошибка поиска: locals [0] не является объектом
module
с Включен API замены Hot Module. Вы должны отключить реагировать-преобразовать-hmr в производстве, используя разделenv
в Babel конфигурации. См. Пример в README: https://github.com/gaearon/react-transform-hmr
Конечно, я проверил эту информацию, но все кажется правильным. Когда я удалял плагин HMR из config.babelrc development config, он работает, доказывая, что он действительно использует конфигурацию разработки вместо производства. Здесь мои файлы:
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.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'
}
]
}
};
Единственное, что сработало для меня, это то, что я написал -
process.env.NODE_ENV = 'production';
в начале моего файла webpack.config.prod.js.
Похоже, что независимо от того, что Babel продолжает использовать раздел 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')
}
}),
&
в оболочке означает, что он будет работать в фоновом режиме, поэтому, возможно, объявление переменной не попадает в материал сборки, который происходит одновременно. Хорошо, что вы можете просто добавить команду с объявлениями переменных.
Вы можете упростить такие команды:
"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"
Вы можете просто использовать 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']
}
}
}
}