ReactJS + babelJS + Webpack + 在 Android 4.0.x 上失败

Question

我花了一天时间调试我们的 ReactJS 应用程序构建，使用 webpack 和 babeljs 在 Android 4.0.3（~3 岁）下的非常常见的组合。

在这种情况下，任何人都可能会遇到 2 个问题：

应用程序代码将无法加载并引发有关 readonly __esModule property can't be overwritten
触摸事件不会触发。单击一个按钮，link 等..只会中断投掷 illegal use constructor

Answer 1

第一个问题，__esModule的东西来自babel实现ES6模块的方式：

Object.defineProperty(exports, '__esModule', {value: true});

这在 Android 4.0.x.

上似乎很糟糕

解决方法是在 es6.modules 上启用 babel 宽松模式。您可以将此添加到 .babelrc："loose": ["es6.modules"] 或参考 doc 获取 CLI 说明。

第二个问题是由于React源码中的new Event('stuff')指令造成的。由于此代码仅包含在 if (process.env.NODE_ENV !== 'production') {} 中，您要确保 process.env.NODE_ENV 值设置为 "production".

当使用 webpack 时，使用 DefinePLugin

可以很容易地做到这一点

// in your webpack config:
plugins: [
    new webpack.DefinePlugin({
        'process.env.NODE_ENV': '"production"'
    })
],

如果您希望该值实际反映 env，只需编写脏但有效的代码：

'process.env.NODE_ENV': '"' + process.env.NODE_ENV + '"'

Answer 2

我遇到了同样的问题，并且能够在 webpack config-make.js 文件上解决所有问题：

var loaders = {
        "js": ""babel-loader?loose=all""
};

plugins: [
new webpack.DefinePlugin({
    'process.env.NODE_ENV': '"production"'
})],

ReactJS + babelJS + Webpack + 在 Android 4.0.x 上失败

ReactJS + babelJS + Webpack + fails on Android 4.0.x

reactjs

webpack

babeljs