[解決済み] create-react-appを使用したReactアプリでES6機能をポリフィルする最良の方法

質問

インターネットエクスプローラでReact.jsアプリケーションをテストしたところ、以下のようなES6/7コードがあることがわかりました。 Array.prototype.includes() のような ES6/7 コードがそれを破壊することを発見しました。

を使っているのですが create-react-app を使用していますが、どうやら誰もがポリフィルを必要とするわけではなく、ビルド時間が遅くなるため、ポリフィルをあまり含めないことにしたようです (例として ここで と はこちら ). ドキュメント(執筆時)では

ランタイムサポートを必要とする他のES6+機能(例えば Array.from() や Symbol など) を使用する場合は、適切なポリフィルを手動でインクルードしていることを確認します。 ポリフィルを手動で含めるか、対象とするブラウザがすでにそれらをサポートしていることを確認してください。 サポートしていることを確認してください。

では... 手動で "含める "ための最良の方法は何でしょうか？

どのように解決するのですか？

更新 : create-react-app polyfillのアプローチとドキュメントはこの質問と回答から変更されました。現在では react-app-polyfill ( ここで ) を使用すると、ie11 などの古いブラウザに対応することができます。ただし、これには、" ...最小要件と一般的に使用される言語機能 のような）一般的でないES6/7機能については、以下のアプローチのいずれかを使用したいと思うでしょう。 Array.includes )

この2つのアプローチはどちらも有効です。

1. react-app-polyfillとcore-jsから手動でインポートする。

インストール react-app-polyfill と core-js (3.0+):

npm install react-app-polyfill core-js または yarn add react-app-polyfill core-js

polyfills.jsというファイル（のようなもの）を作成し、ルートのindex.jsファイルにインポートしてください。そして、基本的なreact-appのpolyfillsに加え、特定の必要な機能を以下のようにインポートしてください。

/* polyfills.js */

import 'react-app-polyfill/ie11';
import 'core-js/features/array/find';
import 'core-js/features/array/includes';
import 'core-js/features/number/is-nan';

/* index.js */

import './polyfills'
...

2. ポリフィルサービス

を使用します。 polyfill.io CDN を使用して、index.html に次の行を追加することで、ブラウザ固有のカスタムポリフィルを取得できます。

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes"></script>

注：私は Array.prototype.includes 機能はデフォルトの機能セットには含まれていないため、明示的に要求する必要がありました。