web-dev-qa-db-ja.com

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

私はReact.jsアプリケーションをInternet Explorerでテストしてきましたが、驚いたことに、Array.prototype.includes()のようなES6コードはそれを壊します。 creat-react-app スターターキットを使用していますが、babelはこれの一部であり、ES6コードを記述できると考えました。

それほど単純ではないことがわかりました。私が見ることができることから、彼らは誰もがそれを必要としないので、多くのポリフィルを含めないことを選択しました、そして、それは構築時間を遅くします。たとえば、 here および here を参照してください。 document this が試みられましたが、実際にポリフィルを自分で行う方法については言及されていません。これだけ：

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

だから...それらを「手動で」含める最良の方法は何ですか？それがバベルの目的の一部だと思いましたか？ babel-polyfill の要素を部分的にインポートする必要がありますか？

reactjsecmascript-6babeljscreate-react-app
59
Daniel Loiterton

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

80
Daniel Loiterton

react-app-polyfill を使用します。これには、Reactで使用される一般的なES6機能のポリフィルが含まれています。そして、それは create-react-app の一部です。 READMEで定義されているように、index.jsの先頭に必ず含めてください。

8
icewhite

糸を使用してポリフィルをダウンロードし、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';
...

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

6
gus3001

Create React Appプロジェクトからイジェクトします

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

ファイルの最後に次を追加します

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

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

1
webmaster

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

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

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

同じ問題がありました。ダニエル・ロイタートンのソリューションはうまくいきませんでした。しかし！ core-js import 'core-js/modules/es6.symbol';からもう1つインポートを追加しました。これはIE11で機能します。

0
Dual