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

87

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?

Daniel Loiterton
quelle
1
Babel bietet babel-polyfillals einfache ES6 + Polyfüllung.
Loganfsmyth
Beachten Sie, dass dies Array.prototype.includes()tatsächlich in ES7 und nicht in ES6 ist
huyz

Antworten:

120

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.

Daniel Loiterton
quelle
18
Ich würde wahrscheinlich granularer werden. Anstatt zu kopieren, können Sie core-jseinzelne globale Polyfills von Ihrem installieren und importieren polyfills.js. Davon abgesehen klingen beide Ansätze gut.
Dan Abramov
1
Das klingt schlauer, danke Dan. Du meinst github.com/zloirock/core-js , nehme ich an (dh npm installiere core-js)?
Daniel Loiterton
7
Ich hatte ein Problem mit einer App, die mit der neuesten Create-React-App erstellt wurde, die nicht in IE 11 und darunter angezeigt wird. Dank dieser Lösung habe ich <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,es6"></script>(beachten Sie das es6) aufgenommen und jetzt funktioniert es wie ein Zauber. Ich glaube, das Hauptproblem war die Notwendigkeit einer Polyfüllung für Symbol.
Dougmacklin
1
@dougmacklin Nur zu Ihrer Information: Es ist ein Hit oder Miss, weil in meinem Fall die Verwendung Ihres Includes meine IE 11-Probleme nicht gelöst hat. Leider war die Entwicklerkonsole in IE 11 auch nicht sehr hilfreich, um herauszufinden, welche Sprachfunktion sie auslöste. Am Ende haben wir Babel-Polyfill verwendet. Ich weiß, dass wir hartnäckig sind, aber wir mussten die Produktionsstätte in Gang bringen.
Clinton Chau
1
@ ClintonChau, völlig verständlich. Seit ich diesen Kommentar gepostet habe, musste ich babel-polyfill für ein anderes Projekt verwenden, um ein anderes IE 11-Problem zu beheben
dougmacklin
12

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.

Eisweiß
quelle
1
Ich denke, meine Antwort ist die beste, aber das liegt nur daran, dass sie neuer ist - die React-App-Polyfill wurde erst vor einigen Monaten erstellt und bis dahin waren die anderen Antworten offensichtlich besser :-)
icewhite
3
Hallo @icewhite, ich denke du hast ein bisschen über React-App-Polyfill falsch verstanden. Das Paket enthält lediglich die folgenden Angaben: Promise, window.fetch, Object.assign, Symbol, Array.from. Es ist nicht enthalten Array.prototype.includes()oder andere.
Huong Nguyen
6

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.

gus3001
quelle
1
So etwas scheint nun die empfohlene Best Practice für Create React App-Projekte zu sein. Siehe: github.com/facebook/create-react-app/blob/master/packages/…
Peter W
3

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>
David J Barnes
quelle
0

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;)

Webmaster
quelle
tatsächlich einen besseren Weg gefunden, npm installieren --save core-js; 'core-js / fn / object / values' importieren;
Webmaster
Können Sie bitte Ihre Antwort auf diese Weise besser bearbeiten?
MattSidor
0

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.

Dual
quelle