La mejor forma de polyfill ES6 en la aplicación React que usa create-react-app

He estado probando mi aplicación React.js en Internet Explorer y encontré que algún código ES6 / 7 como Array.prototype.includes() rompe.

Estoy usando create-react-app , y aparentemente han optado por no incluir muchos polyfills ya que no todos los necesitan y ralentizan los tiempos de compilación (ver por ejemplo aquí y aquí ). La documentación (al momento de escribir este artículo) sugiere:

Si utiliza cualquier otra función de ES6 + que necesite compatibilidad con el tiempo de ejecución (como Array.from () o Symbol), asegúrese de incluir manualmente los polyfills adecuados o de que los navegadores a los que se dirige ya los admitan.

Entonces ... ¿cuál es la mejor manera de incluirlos 'manualmente'?

Actualización : el enfoque de polyfill create-react-app y los documentos han cambiado desde esta pregunta / respuesta. Ahora debe incluir react-app-polyfill( aquí ) si desea admitir navegadores más antiguos como ie11. Sin embargo, esto solo incluye los " ... requisitos mínimos y características de lenguaje de uso común ", por lo que aún querrá usar uno de los enfoques a continuación para características menos comunes de ES6 / 7 (como Array.includes)

Ambos enfoques funcionan:

1. Importaciones manuales desde react-app-polyfill y core-js

Instale react-app-polyfill y core-js (3.0+):

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

Cree un archivo llamado (algo así como) polyfills.js e impórtelo en su archivo raíz index.js. Luego importe los polyfills básicos de la aplicación de reacción, además de las características específicas requeridas, así:

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

Use el CDN polyfill.io para recuperar polyfills personalizados y específicos del navegador agregando esta línea a index.html:

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

tenga en cuenta que tuve que solicitar explícitamente la Array.prototype.includesfunción, ya que no está incluida en el conjunto de funciones predeterminado.

Utilice react-app-polyfill que tiene polyfills para las funciones comunes de ES6 utilizadas en React. Y es parte de create-react-app . Asegúrese de incluirlo al comienzo de index.js como se define en el archivo README.

Usé hilo para descargar el polyfill y lo importé directamente en mi index.js.

En el símbolo del sistema:

yarn add array.prototype.fill

Y luego, en la parte superior de index.js:

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

Me gusta este enfoque ya que estoy importando específicamente lo que necesito al proyecto.

Por lo que vale, estaba teniendo problemas con la nueva Consola de búsqueda de Google y mi aplicación React (create-react-app). Después de agregar el es6shim, todo se resolvió.

Agregué lo siguiente a mi página pública index.html.

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

Expulsar de su proyecto de aplicación Create React

Luego puede poner todos sus polyfills en su /config/polyfills.jsarchivo

Pon lo siguiente al final del archivo

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

Webpack lo solucionará automáticamente;)

Yo tuve el mismo problema. Una solución de Daniel Loiterton no funcionó para mí. ¡Pero! Agregué una importación más de core-js import 'core-js/modules/es6.symbol';y esto me funciona en IE11.