wake-up-neo.com

Die beste Möglichkeit, die ES6-Funktionen in der React-App, die die Create-React-App verwendet, polyfill zu machen

Ich habe meine React.js-Anwendung im Internet Explorer getestet, und zu meiner Überraschung bricht der ES6-Code wie Array.prototype.includes() ihn. Ich benutze das Starter-Kit creat -rea-app und ich dachte, dass Babel ein Teil davon ist und dass ich ES6-Code schreiben konnte. 

Es stellt sich heraus, dass es nicht ganz so einfach ist. Soweit ich sehen kann, haben sie sich NICHT dafür entschieden, viel Polyfill einzubeziehen, da nicht jeder es braucht und die Buildzeiten dadurch verlangsamt werden. Siehe zum Beispiel hier und hier . Es wurde versucht, dies zu dokumentieren , aber es wird nicht erwähnt, wie die Polyfills tatsächlich selbst ausgeführt werden. Nur das:

Wenn Sie andere ES6 + -Funktionen verwenden, für die Laufzeitunterstützung erforderlich ist (z. B. Array.from () oder Symbol), stellen Sie sicher, dass Sie das entsprechende .__ angeben. Polyfills manuell, oder dass die Browser, auf die Sie abzielen, bereits vorhanden sind unterstütze sie.

Also ... was ist der beste Weg, sie manuell einzubinden? Ich dachte, das ist ein Teil von, wofür Babel ist? Soll ich Elemente von babel-polyfill teilweise importieren?

48

Update: Der Polyfill-Ansatz "Create-React-App" und die Dokumente haben sich seit dieser Antwort geändert. Sie sollten jetzt react-app-polyfill ( hier ) angeben, wenn Sie ältere Browser wie ie11 unterstützen möchten. Dies beinhaltet jedoch nur "... Mindestanforderungen und häufig verwendete Sprachfunktionen", sodass Sie immer noch einen der folgenden Ansätze für weniger verbreitete ES6/7-Funktionen verwenden möchten (wie Array.includes)


Diese beiden Ansätze funktionieren beide:

1. Manueller Import von Core-js

Erstellen Sie eine Datei mit dem Namen polyfills.js und importieren Sie sie in Ihre Root-Datei index.js.

Führen Sie npm install react-app-polyfill core-js (oder yarn add react-app-polyfill core-js) aus, und importieren Sie die Grundlagen sowie alle erforderlichen spezifischen Funktionen, z.

/* polyfills.js */

import 'react-app-polyfill/ie11';
import 'core-js/fn/array/find';
import 'core-js/fn/array/includes';
import 'core-js/fn/number/is-nan';

2. Polyfill-Service

Verwenden Sie die CD-ROM polyfill.io , um benutzerdefinierte, browserspezifische Polyfills abzurufen, indem Sie index.html diese Zeile hinzufügen:

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

beachten Sie, dass ich die Array.prototype.includes-Funktion explizit anfordern musste, da sie nicht im Standard-Feature-Set enthalten ist.

67

Verwenden Sie react-app-polyfill , das Polyfills für die in React verwendeten allgemeinen ES6-Funktionen enthält. Und es ist Teil von create -react-app . Stellen Sie sicher, dass Sie sie am Anfang von index.js einfügen, wie in der Readme-Datei definiert.

6
icewhite

Ich habe den Polyfill mit Garnen heruntergeladen und direkt in meine index.js importiert.

In der Eingabeaufforderung: 

yarn add array.prototype.fill

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

5
gus3001

Auswerfen aus Ihrem Create React App-Projekt

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

Fügen Sie das Folgende 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;)

2
webmaster

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 wurde alles behoben.

Das Folgende habe ich zu meiner öffentlichen index.html-Seite hinzugefügt.

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

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

0
Dual