Meilleur moyen de polyfill ES6 fonctionnalités dans l'application React qui utilise create-react-app

J'ai testé mon application React.js sur Internet Explorer et j'ai découvert que du code ES6 / 7 comme le Array.prototype.includes()casse.

J'utilise create-react-app , et apparemment, ils ont choisi de ne pas inclure beaucoup de polyfills car tout le monde n'en a pas besoin, et ils ralentissent les temps de construction (voir par exemple ici et ici ). La documentation (au moment de la rédaction) suggère:

Si vous utilisez d'autres fonctionnalités ES6 + qui nécessitent une prise en charge à l'exécution (telles que Array.from () ou Symbol), assurez-vous d'inclure manuellement les polyfills appropriés ou que les navigateurs que vous ciblez les prennent déjà en charge.

Alors ... quelle est la meilleure façon de les inclure «manuellement»?

Mise à jour : L'approche et la documentation du polyfill create-react-app ont changé depuis cette question / réponse. Vous devriez maintenant inclure react-app-polyfill( ici ) si vous souhaitez prendre en charge des navigateurs plus anciens comme ie11. Cependant, cela n'inclut que les " ... exigences minimales et les fonctionnalités de langage couramment utilisées ", vous voudrez donc toujours utiliser l'une des approches ci-dessous pour les fonctionnalités ES6 / 7 moins courantes (comme Array.includes)

Ces deux approches fonctionnent toutes les deux:

1. Importations manuelles depuis react-app-polyfill et core-js

Installez react-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 importez-le dans votre fichier racine index.js. Puis importez les polyfills de base react-app, ainsi que toutes les fonctionnalités requises spécifiques, comme ceci:

/* 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. Service Polyfill

Utilisez le CDN polyfill.io pour récupérer des polyfills personnalisés et spécifiques au navigateur 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û demander explicitement la Array.prototype.includesfonctionnalité car elle n'est pas incluse dans l'ensemble de fonctionnalités par défaut.

Utilisez le react-app-polyfill qui a des polyfills 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 de index.js comme défini dans le README.

J'ai utilisé du 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, en haut 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.

Pour ce que ça vaut, j'avais des problèmes avec la nouvelle console de recherche Google et mon application React (create-react-app). Après avoir ajouté l'es6shim, tout a été résolu.

J'ai ajouté ce qui suit à ma page publique index.html.

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

Éjecter de votre projet d'application Create React

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

Mettez ce qui suit à la fin du fichier

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

Webpack corrigera automatiquement cela pour vous;)

J'ai eu le même problème. Une solution de Daniel Loiterton n'a pas fonctionné pour moi. Mais! J'ai ajouté une autre importation de core-js import 'core-js/modules/es6.symbol';et cela fonctionne pour moi sur IE11.