La meilleure façon de polyfiller les fonctionnalités ES6 dans l'application React qui utilise create-react-app

J'ai testé mon React.js application sur internet explorer, et à ma grande surprise, ES6 code comme Array.prototype.includes() brise. Je suis à l'aide de la 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 documentmais 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?

source d'informationauteur Daniel Loiterton

  1. 37

    Ces deux approches à la fois le travail:

    1. Importation manuelle de base-js (édité basé sur Dan commentaire)

    Créer un fichier appelé (quelque chose comme) polyfills.js et l'importer dans la racine index.js fichier.

    Exécuter npm install core-js ou yarn add core-js et l'importation de vos fonctions nécessaires, comme:

    /* polyfills.js */

import 'core-js/fn/array/find';
import 'core-js/fn/array/includes';
import 'core-js/fn/number/is-nan';

    2. Polyfill service

    Utiliser le polyfill.io CDN 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 la Array.prototype.includes fonctionnalité n'est pas incluse par défaut dans le jeu de fonctionnalités.

  2. 3

    J'ai utilisé du fil de télécharger le polyfill et importés 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 depuis que je suis spécifiquement l'importation de ce dont j'ai besoin dans le projet.

  3. 1

    D'éjection de Créer de Réagir de Projet d'Application

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

    Placez la ligne suivante à la fin du fichier

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

    Webpack va automatiquement corriger cela pour vous 😉