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:

1. 应用程序代码将无法加载，并引发关于readonly __esModule property can't be overwritten
的错误
2. 触摸事件不会触发.单击按钮，链接等.只会中断抛出illegal use constructor

1. The app code will just fail to load throwing an error about readonly __esModule property can't be overwritten
2. 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".

使用webpack时，使用

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屋！