He estado probando mi aplicación React.js en Internet Explorer y descubrí que algún código ES6/7 como Array.prototype.includes() la 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 (consulte, por ejemplo , aquí y aquí ). La documentación (en el momento de la redacción) sugiere:
Si utiliza otras funciones de ES6+ que necesitan 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 y los documentos de create-react-app 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 funciones de lenguaje de uso común ", por lo que aún querrá usar uno de los enfoques a continuación para las funciones menos comunes de ES6/7 (como Array.includes )
Estos dos 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 a su archivo raíz index.js. A continuación, 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 de polirelleno
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 función Array.prototype.includes , ya que no está incluida en el conjunto de funciones predeterminado.
Utilice react-app-polyfill que tiene polyfills para las características 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 LÉAME.
Usé yarn 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 en el proyecto.