La mejor manera de completar las funciones de polyfill ES6 en la aplicación React que usa create-react-app

Question

La mejor manera de completar las funciones de polyfill ES6 en la aplicación React que usa create-react-app

He estado probando mi reacción.la aplicación js en Internet Explorer, y para mi sorpresa, el código ES6 como Array.prototype.includes() lo rompe. Estoy usando el kit de inicio creat-react-app y pensé que babel era parte de esto, y que me permitía escribir código ES6.

Resulta que no es tan simple. Por lo que puedo ver, han optado por NO incluir una gran cantidad de polyfill ya que no todo el mundo lo necesita, y ralentiza los tiempos de construcción. Véase, por ejemplo, aquí y aquí. Ha habido un intento de documentar esto, pero no hay mención de cómo hacer realmente los polyfills usted mismo. Solo esto:

Si utiliza cualquier otra característica de ES6 + que necesite soporte en tiempo de ejecución (como Matriz.from () o Symbol), asegúrese de que está incluyendo el polyfills manualmente, o que los navegadores a los que se dirige ya apóyalos.

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

34

ecmascript-6 reactjs babeljs create-react-app

Author: Daniel Loiterton, 2017-05-03

Source

3 answers

Usé yarn para descargar el polyfill y lo importé directamente en mi índice.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.

3

Author: gus3001,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-10 14:30:06

Expulsar de tu Proyecto de Create React App

Después puedes poner todos tus polyfills en tu archivo /config/polyfills.js

Ponga lo siguiente al final del archivo

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

Webpack lo arreglará automáticamente;)

2

Author: webmaster,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-01 15:11:53

score 51 · Accepted Answer

Estos dos enfoques funcionan:

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

Crea un archivo llamado (algo así como) polyfills.js e importarlo en el índice raíz.archivo js.

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

/* polyfills.js */

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

2. Servicio Polyfill

Utilice el polyfill.io CDN para recuperar polyfills personalizados y específicos del navegador agregando esta línea a Indice.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 característica Array.prototype.includes ya que no está incluida en el conjunto de características predeterminado.