reactjs - example - La mejor forma de realizar funciones de relleno múltiple de las características de ES6 en la aplicación React que utiliza la aplicación create-react-app

npx create-react-app my-app

Question

He estado probando mi aplicación React.js en internet explorer, y para mi sorpresa, el código ES6 como Array.prototype.includes() rompe. Estoy usando el kit de inicio de creat-react-app y pensé que Babel era parte de esto, y que me permitió escribir código ES6.

Resulta que no es tan simple. Por lo que puedo ver, han optado por NO incluir mucho polyfill ya que no todos lo necesitan, y esto ralentiza los tiempos de construcción. Ver por ejemplo here y here . Ha habido un intento de documentar esto , pero no hay ninguna mención de cómo hacer los poli-rellenos usted mismo. Sólo esta:

Si utiliza cualquier otra función de ES6 + que necesite soporte de tiempo de ejecución (como Array.from () o Symbol), asegúrese de incluir los rellenos automáticos apropiados manualmente, o de que los navegadores a los que apunta ya los admita.

Entonces ... ¿cuál es la mejor manera de incluirlos ''manualmente''? Pensé que eso es parte de lo que es babel? ¿Debería importar parcialmente elementos de babel-polyfill ?

Answer 1

Estos dos enfoques funcionan:

1. Importación manual desde core-js (editado en base al comentario de Dan)

Cree un archivo llamado (algo como) polyfills.js e impórtelo en el archivo root index.js.

Ejecute npm install core-js o yarn add core-js e importe sus funciones específicas requeridas, como:

/* polyfills.js */

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

2. Servicio de polyfill.

Use el CDN de polyfill.io para recuperar polyfills 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>

nota, tuve que solicitar explícitamente la característica Array.prototype.includes ya que no está incluida en el conjunto de características predeterminado.

Answer 2

Expulsar de tu proyecto Crear aplicación React

Después, puede poner todos sus polyfills en su archivo /config/polyfills.js

Coloque lo siguiente al final del archivo

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

Webpack solucionará automáticamente esto para usted;)

Answer 3

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 para el proyecto.