web-dev-qa-db-fra.com

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

J'ai testé mon application React.js sur Internet Explorer et, à ma grande surprise, un code ES6 tel que Array.prototype.includes() le rompt. J'utilise le kit de démarrage creat-react-app et je pensais que babel en faisait partie et que cela me permettait d'écrire du code ES6. 

Il s'avère que ce n'est pas si simple. D'après ce que je peux voir, ils ont choisi de ne PAS inclure beaucoup de polyfill, car tout le monde n'en a pas besoin, et cela ralentit les temps de construction. Voir par exemple ici et ici . Il y a eu une tentative de documenter ceci , mais il n'y a aucune mention sur la façon de faire les polyfills vous-même. Juste ça:

Si vous utilisez une autre fonctionnalité ES6 + nécessitant un support d'exécution (telle que Array.from () ou Symbol), assurez-vous d'inclure le fichier .__ approprié. polyfill manuellement, ou que les navigateurs que vous ciblez déjà Encouragez-les.

Alors ... quelle est la meilleure façon de les inclure "manuellement"? Je pensais que ça faisait partie de ce à quoi babel était destiné? Devrais-je importer partiellement des éléments de babel-polyfill ?

reactjsecmascript-6babeljscreate-react-app
48
Daniel Loiterton

Update: l'approche et la documentation polyfill create-react-app ont changé depuis cette réponse. Vous devez maintenant inclure react-app-polyfill ( here ) si vous souhaitez prendre en charge les navigateurs plus anciens tels que ie11. Cependant, cela n'inclut que "... configuration minimale et fonctionnalités de langage couramment utilisées}", vous voudrez donc quand même 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. Importation manuelle depuis core-js

Créez un fichier appelé (quelque chose comme) polyfills.js et importez-le dans votre fichier racine index.js.

Exécutez npm install react-app-polyfill core-js (ou yarn add react-app-polyfill core-js) et importez les bases, ainsi que les fonctionnalités spécifiques requises, comme ceci:

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

Utilisez le fichier polyfill.io CDN pour récupérer des polyfill personnalisés, 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, je devais explicitement demander la fonctionnalité Array.prototype.includes car elle n’est pas incluse dans le jeu de fonctionnalités par défaut.

67
Daniel Loiterton

Utilisez react-app-polyfill , qui contient des polyfill pour les fonctions 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.

6
icewhite

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, 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.

5
gus3001

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

2
webmaster

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>
1
David J Barnes

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 depuis core-js import 'core-js/modules/es6.symbol'; et cela fonctionne pour moi sur IE11.

0
Dual