Meilleure façon de polyfiler les fonctionnalités ES6 dans l'application React utilisant create-react-app

Question

J'ai testé mon React.js application sur internet explorer, et à ma grande surprise, ES6 code comme celui - Array.prototype.includes() le brise. Je suis en utilisant le creat-réagir-app kit de démarrage et j'ai pensé babel était une partie de cela, et que ça m'a permis d'écrire ES6 code.

S'avère pas tout à fait aussi simple. De ce que je peux voir, ils ont choisi de ne PAS inclure beaucoup de polyfill que pas tout le monde en a besoin, et il ralentit le temps de construire. Voir par exemple ici et ici. Il y a eu une tentative de ce document, mais il n'y a aucune mention de la façon de faire les polyfills vous-même. Juste ceci:

Si vous utilisez tout autre ES6+ caractéristiques support d'exécution (comme Tableau.à partir de() ou un Symbole), assurez-vous que vous êtes, y compris les polyfills manuellement, ou que les navigateurs que vous ciblez déjà de les soutenir.

Alors... quelle est la meilleure façon de "manuellement" les inclure? J'ai pensé que c'est une partie de ce que babel est pour? Dois-je partiellement importer des éléments de babel-polyfill?

Answer 1

Mise à jour: La création de réaction-app polyfill approche et les docs ont changé depuis que cette question/réponse. Vous devriez inclure react-app-polyfill (ici) si vous souhaitez soutenir les anciens navigateurs comme ie11. Toutefois, cela ne comprend que les "...les exigences minimales et les plus couramment utilisées fonctionnalités de langage", si vous voulez continuer à utiliser l'une des méthodes ci-dessous pour la commune de moins ES6/7 caractéristiques (comme Array.includes)

---

Ces deux approches à la fois le travail:

---

1. Manuel des importations de réagir-app-polyfill et core-js

Installer réagir-app-polyfill et core-js (3.0+):

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

Créez un fichier appelé (quelque chose comme) polyfills.js et l'importer dans votre racine index.js fichier. Puis importer la base de réagir-app polyfills, plus spécifique, les fonctionnalités requises, comme suit:

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

Utiliser le polyfill.io CA pour récupérer personnalisés, spécifiques à un navigateur polyfills en ajoutant cette ligne à index.html:

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

remarque, j'ai dû explicitement demander à l' Array.prototype.includes fonctionnalité n'est pas incluse par défaut dans le jeu de fonctionnalités.

Answer 2

Utilisez react-app-polyfill, qui contient des polyfill pour les fonctionnalités ES6 courantes utilisées dans React. Et cela fait partie de create-react-app . Assurez-vous de l'inclure au début du fichier index.js, comme défini dans le fichier README.

Answer 3

J'ai utilisé le fil pour télécharger le polyfill et je l’ai importé directement dans mon index.js.

Dans l'invite de commande:

 yarn add array.prototype.fill
 

Et puis, au sommet de index.js :

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

J'aime cette approche car j'importe spécifiquement ce dont j'ai besoin dans le projet.

Answer 4

J'avais des problèmes avec la nouvelle console de recherche Google et mon application React (create-react-app). Après avoir ajouté le es6shim, tout était résolu.

J'ai ajouté le texte ci-dessous à ma page publique index.html.

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

Answer 5

Éjecter à partir de votre projet Create React App

Ensuite, vous pouvez mettre tous vos polyfills dans votre fichier /config/polyfills.js

Mettez ce qui suit à la fin du fichier

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

Webpack corrigera cela automatiquement pour vous;)