Beste Methode zum Polyfill von ES6-Funktionen in der React-App, die create-react-app verwendet

Ich habe meine React.js-Anwendung im Internet Explorer getestet und festgestellt, dass einige ES6 / 7-Codes wie Array.prototype.includes() bricht es.

Ich benutze Erstellen-Reagieren-Appund anscheinend haben sie sich entschieden, nicht viele Polyfills einzuschließen, da sie nicht jeder braucht und sie die Bauzeiten verlangsamen (siehe zum Beispiel hier und hier). Die Dokumentation (zum Zeitpunkt des Schreibens) schlägt vor:

Wenn Sie andere ES6+-Funktionen verwenden, die Laufzeitunterstützung benötigen (z. B. Array.from() oder Symbol), stellen Sie sicher, dass Sie die entsprechenden Polyfills manuell einschließen oder dass die Browser, auf die Sie abzielen, diese bereits unterstützen.

So… Was ist der beste Weg, sie “manuell” einzuschließen?

Aktualisieren: Der Polyfill-Ansatz von Create-React-App und die Dokumentation haben sich seit dieser Frage/Antwort geändert. Sie sollten jetzt einschließen react-app-polyfill (hier), wenn Sie ältere Browser wie ie11 unterstützen möchten. Dies beinhaltet jedoch nur die „…Mindestanforderungen und häufig verwendete Sprachmerkmale“, also sollten Sie immer noch einen der folgenden Ansätze für weniger gebräuchliche ES6/7-Funktionen verwenden (wie z Array.includes)

Diese beiden Ansätze funktionieren beide:

1. Manuelle Importe aus React-App-Polyfill und Core-Js

Installieren reagieren-app-polyfill und core-js (3.0+):

npm install react-app-polyfill core-js oder yarn add react-app-polyfill core-js

Erstellen Sie eine Datei mit dem Namen (so etwas wie) polyfills.js und importieren Sie sie in Ihre index.js-Stammdatei. Importieren Sie dann die grundlegenden React-App-Polyfills sowie alle erforderlichen spezifischen Funktionen wie folgt:

/* 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-Service

Verwenden Sie die polyfill.io CDN zum Abrufen benutzerdefinierter, browserspezifischer Polyfills durch Hinzufügen dieser Zeile zu index.html:

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

Beachten Sie, dass ich das ausdrücklich anfordern musste Array.prototype.includes Feature, da es nicht im Standard-Feature-Set enthalten ist.

Verwenden Sie die reagieren-app-polyfill die Polyfills für die gemeinsamen ES6-Funktionen enthält, die in React verwendet werden. Und es ist Teil von Erstellen-Reagieren-App. Stellen Sie sicher, dass Sie es am Anfang von index.js einfügen, wie in der README-Datei definiert.

Ich habe Garn verwendet, um das Polyfill herunterzuladen und es direkt in meine index.js zu importieren.

In der Eingabeaufforderung:

yarn add array.prototype.fill

Und dann, ganz oben index.js:

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

Ich mag diesen Ansatz, da ich genau das importiere, was ich in das Projekt benötige.

Für das, was es wert ist, hatte ich Probleme mit der neuen Google Search Console und meiner React-App (create-react-app). Nach dem Hinzufügen des es6shim war alles gelöst.

Ich habe das Folgende zu meiner öffentlichen index.html-Seite hinzugefügt.

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

Auswerfen aus Ihrem Create React App-Projekt

Danach können Sie alle Ihre Polyfills in Ihre einfügen /config/polyfills.js Datei

Fügen Sie Folgendes an das Ende der Datei ein

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

Webpack wird dies automatisch für Sie beheben 😉

Ich hatte das gleiche Problem. Eine Lösung von Daniel Loiterton hat bei mir nicht funktioniert. Aber! Ich habe einen weiteren Import von core-js hinzugefügt import 'core-js/modules/es6.symbol'; und das funktioniert bei mir auf IE11.