Reactレガシーブラウザ対応

Reactでコードを書くにあたり、モバイルのレガシーブラウザ対応に関する調査内容を記す。
なお、React経験1ヶ月もないので有識者ではない。

古い端末対応

i0S6, 7, android4系端末対応のため下記導入

npm install --save-dev es5-shim es6-shim babel-preset-es2015-loose

.babelrcにes2015-loose追記

{
  "presets": ["es2015-loose", "es2015", "react"]
}

Promise

adnroid4系でPromise動かないからpolyfillいれる。
promiseがうごかないので下記の取得系のパッケージでバグる。ハマル。

• axios
• react-lazy-load

パッケージ導入

下記をインストール

npm install --save es6-promise

インストール後、これをルートのjsxに入れればandroid4系の標準ブラウザでpromiseが動く。

src/index.jsx

import 'es6-promise/auto';

詳細はここを参照
stefanpenner/es6-promise: A polyfill for ES6-style Promises

メモ

babelに下記を食わして、コードに影響を与えず対応したかったが、どうもまくいかなかった。

babel-plugin-es6-promise https://www.npmjs.com/package/babel-plugin-es6-promise

参考

• react/08-working-with-the-browser.ja-JP.md at 67f8524e88abbf1ac0fd86d38a0477d11fbc7b3e · facebook/react
• axios not work on android 4.4.2 · Issue #188 · mzabriskie/axios
• Can I use... Support tables for HTML5, CSS3, etc
• [フロントエンド] Reactを古いブラウザに対応させようと色々と苦労したけど、なんとか対応できた話 - YoheiM .NET
• paulmillr/es6-shim: ECMAScript 6 compatibility shims for legacy JavaScript engines https://github.com/paulmillr/es6-shim