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

87

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'?

Daniel Loiterton
fuente
1
Babel se proporciona babel-polyfillcomo un polyfill ES6 + fácil.
loganfsmyth
1
Tenga en cuenta que Array.prototype.includes()en realidad está en ES7, no en ES6
huyz

Respuestas:

122

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.

Daniel Loiterton
fuente
18
Probablemente me volvería más granular. En lugar de copiar y pegar, puede instalar core-jse importar polyfills globales individuales desde su polyfills.js. Aparte de eso, ambos enfoques suenan bien.
Dan Abramov
1
Eso suena más inteligente, gracias Dan. ¿Te refieres a github.com/zloirock/core-js , supongo (es decir, npm install core-js)?
Daniel Loiterton
7
Me estaba encontrando con un problema con una aplicación generada con la última aplicación create-react-app que no aparecía en IE 11 e inferior. Gracias a esta solución, terminé incluyendo <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,es6"></script>(note el es6) y ahora está funcionando como un encanto. Creo que el problema principal era la necesidad de un polyfill para Symbol.
dougmacklin
1
@dougmacklin Solo para su información: es impredecible, porque en mi caso, usar su inclusión no resolvió mis problemas de IE 11. Desafortunadamente, la consola de desarrollo en IE 11 tampoco fue de mucha ayuda para averiguar qué característica del idioma lo estaba haciendo. Terminamos usando babel-polyfill. Lo sé, pero teníamos que poner en marcha el sitio de producción.
Clinton Chau
1
@ClintonChau, totalmente comprensible. Desde que publiqué ese comentario,
terminé
12

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.

hielo blanco
fuente
1
Creo que mi respuesta es la mejor, pero eso es solo porque es más reciente: el react-app-polyfill se creó hace solo unos meses y hasta entonces las otras respuestas eran obviamente mejores :-)
icewhite
4
Hola @icewhite, creo que entendiste un poco sobre react-app-polyfill. El paquete solo incluye polifill of: Promise, window.fetch, Object.assign, Symbol, Array.from. Que no incluye Array.prototype.includes()u otros.
Huong Nguyen
6

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.

gus3001
fuente
1
Algo como esto parece ser ahora la mejor práctica sugerida para los proyectos de Create React App. Ver: github.com/facebook/create-react-app/blob/master/packages/…
Peter W
3

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>
David J. Barnes
fuente
0

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

administrador de página web
fuente
de hecho encontré una mejor manera, npm install --save core-js; importar 'core-js / fn / object / values';
webmaster
¿Puedes editar tu respuesta de esta manera mejor?
MattSidor
0

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.

Doble
fuente