Der beste Weg, um ES6-Funktionen in der React-App mit der Create-React-App zu füllen

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?

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 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 Stammdatei index.js. 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 das CDN polyfill.io , um benutzerdefinierte, browserspezifische Polyfills abzurufen, indem Sie diese Zeile zu index.html hinzufügen:

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

Beachten Sie, dass ich die Funktion explizit anfordern musste, Array.prototype.includesda sie nicht im Standardfeature-Set enthalten ist.

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.

Ich habe die Polyfüllung mit Garn heruntergeladen und direkt in meine index.js importiert.

In der Eingabeaufforderung:

yarn add array.prototype.fill

Und dann oben auf 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 speziell das, was ich brauche, in das Projekt importiere.

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.

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

Aus Ihrem Create React App-Projekt auswerfen

Anschließend können Sie alle Ihre Polyfills in Ihre /config/polyfills.jsDatei einfügen

Fügen Sie Folgendes am 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 dies funktioniert für mich unter IE11.