A melhor maneira de preencher os recursos do ES6 no aplicativo React que usa criar-reagir-aplicativo

Tenho testado meu aplicativo React.js no Internet Explorer e descobri que algum código ES6 / 7 como o Array.prototype.includes()quebra.

Estou usando criar-reagir-app e, aparentemente, eles optaram por não incluir muitos polyfills, já que nem todo mundo precisa deles, e eles diminuem os tempos de construção (veja por exemplo aqui e aqui ). A documentação (no momento da redação) sugere:

Se você usar qualquer outro recurso ES6 + que precise de suporte de tempo de execução (como Array.from () ou Symbol), certifique-se de incluir os polyfills apropriados manualmente ou de que os navegadores que você está almejando já os suportem.

Então ... qual é a melhor maneira de incluí-los 'manualmente'?

Atualização : a abordagem e os documentos do polyfill criar-reagir-app mudaram desde esta pergunta / resposta. Agora você deve incluir react-app-polyfill( aqui ) se deseja oferecer suporte a navegadores mais antigos, como o ie11. No entanto, isso inclui apenas os " ... requisitos mínimos e recursos de linguagem comumente usados ", então você ainda vai querer usar uma das abordagens abaixo para recursos menos comuns do ES6 / 7 (como Array.includes)

Essas duas abordagens funcionam:

1. Importações manuais de react-app-polyfill e core-js

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

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

Crie um arquivo chamado (algo como) polyfills.js e importe-o em seu arquivo index.js raiz. Em seguida, importe os polyfills básicos do react-app, além de quaisquer recursos específicos necessários, como:

/* 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. Serviço Polyfill

Use o CDN polyfill.io para recuperar polyfills personalizados específicos do navegador, adicionando esta linha a index.html:

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

observe que tive de solicitar explicitamente o Array.prototype.includesrecurso, pois ele não está incluído no conjunto de recursos padrão.

Use o react-app-polyfill que tem polyfills para os recursos ES6 comuns usados ​​no React. E faz parte do aplicativo criar-reagir . Certifique-se de incluí-lo no início de index.js conforme definido no README.

Usei yarn para baixar o polyfill e importei-o diretamente no meu index.js.

No prompt de comando:

yarn add array.prototype.fill

E então, no topo de index.js:

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

Gosto dessa abordagem, pois estou importando especificamente o que preciso para o projeto.

Eu estava tendo problemas com o novo Google Search Console e meu aplicativo React (criar-reagir-aplicativo). Depois de adicionar o es6shim, tudo foi resolvido.

Eu adicionei o seguinte à minha página index.html pública.

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

Ejetar do seu projeto de aplicativo Create React

Depois, você pode colocar todos os seus polyfills em seu /config/polyfills.jsarquivo

Coloque o seguinte no final do arquivo

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

Webpack irá corrigir isso automaticamente para você;)

Eu tive o mesmo problema. Uma solução de Daniel Loiterton não funcionou para mim. Mas! Eu adicionei mais uma importação de core-js import 'core-js/modules/es6.symbol';e isso funciona para mim no IE11.