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

87

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

Daniel Loiterton
fonte
1
O Babel é babel-polyfillum polyfill ES6 + fácil.
loganfsmyth
1
Observe que Array.prototype.includes()na verdade está no ES7, não no ES6
huyz

Respostas:

122

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.

Daniel Loiterton
fonte
18
Eu provavelmente ficaria mais granular. Em vez de copiar e colar, você pode instalar core-jse importar polyfills globais individuais de seu polyfills.js. Fora isso, ambas as abordagens parecem boas.
Dan Abramov
1
Isso parece mais inteligente, obrigado Dan. Você quer dizer github.com/zloirock/core-js , suponho (ou seja, npm install core-js)?
Daniel Loiterton
7
Eu estava tendo um problema com um aplicativo gerado com o último create-react-app que não aparecia no IE 11 e anteriores. Graças a esta solução, acabei incluindo <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,es6"></script>(repare no es6) e agora está funcionando perfeitamente. Acredito que o principal problema era a necessidade de um polyfill para o Symbol.
dougmacklin
1
@dougmacklin Apenas para sua informação: É um sucesso ou um fracasso, porque no meu caso, usar sua inclusão não resolveu meus problemas do IE 11. Infelizmente, o console do desenvolvedor no IE 11 também foi muito inútil para descobrir qual recurso de linguagem o estava atrapalhando. Acabamos usando o babel-polyfill. Mão pesada, eu sei, mas precisávamos fazer o site de produção funcionar.
Clinton Chau de
1
@ClintonChau, totalmente compreensível. Desde que postei esse comentário, acabei tendo que usar o babel-polyfill em outro projeto para corrigir um problema diferente do IE 11
dougmacklin
12

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.

branco gelado
fonte
1
Acho que minha resposta é a melhor, mas isso é apenas porque é mais recente - o react-app-polyfill foi criado há apenas alguns meses e até então as outras respostas eram obviamente melhores :-)
icewhite
4
Olá @icewhite, acho que você entendeu um pouco mal sobre react-app-polyfill. O pacote inclui apenas polifill de: Promise, window.fetch, Object.assign, Symbol, Array.from. Ele não incluem Array.prototype.includes()ou outros.
Huong Nguyen
6

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.

gus3001
fonte
1
Algo assim parece agora ser a melhor prática sugerida para projetos de criação de aplicativo React. Veja: github.com/facebook/create-react-app/blob/master/packages/…
Peter W
3

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

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

webmaster
fonte
na verdade encontrou uma maneira melhor, npm install --save core-js; importar 'core-js / fn / object / values';
webmaster
Você pode editar sua resposta desta maneira melhor?
MattSidor de
0

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.

Dual
fonte