在开发版本中,我使用HMR(热更新)。这是在. babelrc中配置的,在env下
未捕获错误:locals[0]似乎不是启用了热模块替换API的module
对象。您应该在Babel配置中使用env
部分禁用react-transport-hmr。请参阅README中的示例: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": []
}
}
}
正如你在pack. json中看到的
为什么会发生这种情况?如何确保生产版本忽略HMR插件?
顺便说一句,搜索经常会导致React-transform-Github页面上HMR问题#5,这是一个没有明确解决方案的长线程。
编辑2016.03.30:根据请求添加我的webpack配置的Babel部分。编辑2016.04.06:根据请求添加整个webpack文件。
网络包.生产.配置. 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一直使用. babelrc
中指定的env
值的开发
部分。对我来说,解决问题的是使用“开发”以外的名称并将其设置为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"