Ich habe meine React.js-Anwendung im Internet Explorer getestet und festgestellt, dass ES6 / 7-Code Array.prototype.includes()
sie beschädigt .
Ich verwende die Create-React-App und anscheinend haben sie sich dafür entschieden, nicht viele Polyfills einzuschließen, da nicht jeder sie benötigt, und sie verlangsamen die Erstellungszeiten (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 einfügen oder dass die Browser, auf die Sie abzielen, diese bereits unterstützen.
Also ... was ist der beste Weg, um sie manuell einzuschließen?
quelle
babel-polyfill
als einfache ES6 + Polyfüllung.Array.prototype.includes()
tatsächlich in ES7 und nicht in ES6 istAntworten:
Update : Der Ansatz zum Erstellen und Reagieren von App-Polyfills und die Dokumente haben sich seit dieser Frage / Antwort geändert. Sie sollten jetzt
react-app-polyfill
( hier ) angeben, ob Sie ältere Browser wie ie11 unterstützen möchten. Dies beinhaltet jedoch nur die " ... Mindestanforderungen und häufig verwendeten Sprachfunktionen ". Daher sollten Sie für weniger gebräuchliche ES6 / 7-Funktionen (wie z. B.Array.includes
) weiterhin einen der folgenden Ansätze verwenden.Diese beiden Ansätze funktionieren beide:
1. Manuelle Importe von React-App-Polyfill und Core-Js
Installieren Sie react-app-polyfill und core-js (3.0+):
npm install react-app-polyfill core-js
oderyarn add react-app-polyfill core-js
Erstellen Sie eine Datei mit dem Namen (so etwas wie) polyfills.js und importieren Sie sie in Ihre Stammdatei index.js. Importieren Sie dann die grundlegenden React-App-Polyfills sowie alle erforderlichen spezifischen Funktionen wie folgt:
2. Polyfill-Service
Verwenden Sie das CDN polyfill.io , um benutzerdefinierte, browserspezifische Polyfills abzurufen, indem Sie diese Zeile zu index.html hinzufügen:
Beachten Sie, dass ich die Funktion explizit anfordern musste,
Array.prototype.includes
da sie nicht im Standardfeature-Set enthalten ist.quelle
core-js
einzelne globale Polyfills von Ihrem installieren und importierenpolyfills.js
. Davon abgesehen klingen beide Ansätze gut.<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,es6"></script>
(beachten Sie dases6
) aufgenommen und jetzt funktioniert es wie ein Zauber. Ich glaube, das Hauptproblem war die Notwendigkeit einer Polyfüllung für Symbol.Verwenden Sie die React -App-Polyfill mit Polyfills für die in React verwendeten allgemeinen ES6-Funktionen. Und es ist Teil der Create-React-App . Stellen Sie sicher, dass Sie es am Anfang von index.js einfügen, wie in der README-Datei definiert.
quelle
Array.prototype.includes()
oder andere.Ich habe die Polyfüllung mit Garn heruntergeladen und direkt in meine index.js importiert.
In der Eingabeaufforderung:
Und dann oben auf
index.js
:Ich mag diesen Ansatz, da ich speziell das, was ich brauche, in das Projekt importiere.
quelle
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 von es6shim wurde alles behoben.
Ich habe das Folgende zu meiner öffentlichen index.html-Seite hinzugefügt.
quelle
Aus Ihrem Create React App-Projekt auswerfen
Anschließend können Sie alle Ihre Polyfills in Ihre
/config/polyfills.js
Datei einfügenFügen Sie Folgendes am Ende der Datei ein
Webpack wird dies automatisch für Sie beheben;)
quelle
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 dies funktioniert für mich unter IE11.quelle