create-react-appを使用するReactアプリでES6機能をポリフィルするための最良の方法

私はInternetExplorerでReact.jsアプリケーションをテストしてきましたが、ES6 / 7コードのようにArray.prototype.includes()壊れていることがわかりました。

私はcreate-react-appを使用していますが、誰もが必要としているわけではないため、多くのポリフィルを含めないことを選択したようです。また、ビルド時間が遅くなります（たとえば、こことここを参照）。ドキュメント（執筆時点）は次のことを示唆しています。

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

だから... 「手動で」それらを含めるための最良の方法は何ですか？

更新：この質問/回答以降、create-react-appポリフィルのアプローチとドキュメントが変更されました。ie11のような古いブラウザをサポートしたい場合は、ここにreact-app-polyfill（ここに）含める必要があります。ただし、これには「...最小要件と一般的に使用される言語機能」のみが含まれるため、あまり一般的でない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.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デフォルトの機能セットに含まれていないため、この機能を明示的にリクエストする必要がありました。

使用反応するアプリ-ポリフィルES6が反応に使用される機能の共通のためpolyfillsを持っています。そして、それはcreate-react-appの一部です。READMEで定義されているように、index.jsの先頭に必ず含めてください。

糸を使用してポリフィルをダウンロードし、index.jsに直接インポートしました。

コマンドプロンプトで：

yarn add array.prototype.fill

そして、上部にindex.js：

import 'array.prototype.fill' // <-- newly added import
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
...

必要なものをプロジェクトに具体的にインポートしているので、このアプローチが好きです。

新しいGoogleSearch ConsoleとReactアプリ（create-react-app）で問題が発生したことは価値があります。es6shimを追加した後、すべてが解決されました。

以下を公開index.htmlページに追加しました。

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

Create ReactAppプロジェクトからのイジェクト

その後、すべてのポリフィルを/config/polyfills.jsファイルに入れることができます

ファイルの最後に以下を入れてください

Object.values = Object.values ? Object.values : o=>Object.keys(o).map(k=>o[k]);

Webpackはこれを自動的に修正します;）

私も同じ問題を抱えていました。DanielLoitertonの解決策は私にはうまくいきませんでした。だが！core-jsからインポートをもう1つ追加しましたがimport 'core-js/modules/es6.symbol';、これはIE11で機能します。