ReactJS + babelJS + Webpack +在Android 4.0.x上失败 [英] ReactJS + babelJS + Webpack + fails on Android 4.0.x
问题描述
我花了一天的时间使用Android 4.0.3
(〜3岁左右)下的webpack
和babeljs
的非常常见的组合来调试ReactJS应用程序构建.
I spent a day debugging our ReactJS app build using the very common combination of webpack
and babeljs
under Android 4.0.3
(~3 yo).
在这种情况下,任何人都可能会遇到2个问题:
2 problems will probably arise for anybody in this situation:
- 应用程序代码将无法加载,并引发关于
readonly __esModule property can't be overwritten
的错误
- 触摸事件不会触发.单击按钮,链接等.只会中断抛出
illegal use constructor
- The app code will just fail to load throwing an error about
readonly __esModule property can't be overwritten
- Touch events won't trigger. Clicking a button, link etc.. will just break throwing
illegal use constructor
推荐答案
第一个问题是,__esModule
问题来自使用以下方法实现ES6模块的babel方法:
The first problem, the __esModule
thing comes from babel way of implementing ES6 modules using:
Object.defineProperty(exports, '__esModule', {value: true});
在Android 4.0.x上,这似乎很不正常.
This seems very broken on Android 4.0.x.
解决方法是在es6.modules
上启用babel
松散模式.您可以在.babelrc
:"loose": ["es6.modules"]
上添加它,或参考文档用于CLI指令.
The workaround is to enable babel
loose mode on es6.modules
. You can add this on your .babelrc
: "loose": ["es6.modules"]
or refer to the doc for CLI instruction.
第二个问题是由于.
The second problem is due to new Event('stuff')
instructions in React source code. As this code is only wrapped in if (process.env.NODE_ENV !== 'production') {}
, you want to ensure process.env.NODE_ENV
value is set to "production"
.
When using webpack
, this can be done quite easily achieved using the DefinePLugin
// in your webpack config:
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
})
],
如果您希望该值实际反映env
,只需编写肮脏但有效的:
If you want the value to actually reflect env
, just write the dirty but working:
'process.env.NODE_ENV': '"' + process.env.NODE_ENV + '"'
这篇关于ReactJS + babelJS + Webpack +在Android 4.0.x上失败的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!