Il modo migliore per eseguire il polyfill delle funzionalità ES6 nell'app React che utilizza l'app create-react

88

Ho testato la mia applicazione React.js su Internet Explorer e ho scoperto che alcuni codici ES6 / 7 Array.prototype.includes()lo interrompono.

Sto usando create-react-app e apparentemente hanno scelto di non includere molti polyfill poiché non tutti ne hanno bisogno e rallentano i tempi di build (vedi ad esempio qui e qui ). La documentazione (al momento della scrittura) suggerisce:

Se utilizzi altre funzionalità di ES6 + che richiedono il supporto del runtime (come Array.from () o Symbol), assicurati di includere manualmente i polyfill appropriati o che i browser a cui ti stai rivolgendo li supportino già.

Allora ... qual è il modo migliore per includerli "manualmente"?

— Daniel Loiterton
fonte

1

Babel fornisce babel-polyfillun facile polyfill ES6 +.

— loganfsmyth

1

Nota che in Array.prototype.includes()realtà è in ES7, non in ES6

— huyz

123

Aggiornamento : l'approccio polyfill crea-reagisci e i documenti sono cambiati dopo questa domanda / risposta. Ora dovresti includere react-app-polyfill( qui ) se vuoi supportare browser meno recenti come ie11. Tuttavia, questo include solo i " ... requisiti minimi e funzionalità linguistiche di uso comune ", quindi ti consigliamo di utilizzare uno degli approcci seguenti per le funzionalità ES6 / 7 meno comuni (come Array.includes)

Questi due approcci funzionano entrambi:

1. Importazioni manuali da react-app-polyfill e core-js

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

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

Crea un file chiamato (qualcosa di simile) polyfills.js e importalo nel tuo file index.js di root. Quindi importa i polyfill di base dell'app React, oltre a qualsiasi funzionalità richiesta specifica, in questo modo:

/* 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. Servizio Polyfill

Utilizza il CDN polyfill.io per recuperare i polyfill personalizzati specifici del browser aggiungendo questa riga a index.html:

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

nota, ho dovuto richiedere esplicitamente la Array.prototype.includesfunzionalità in quanto non è inclusa nel set di funzionalità predefinite.

— Daniel Loiterton
fonte

18

Probabilmente sarei più granulare. Invece di copiare e incollare, puoi installare core-jse importare singoli polyfill globali dal tuo file polyfills.js. A parte questo, entrambi gli approcci suonano bene.

— Dan Abramov

1

Sembra più intelligente, grazie Dan. Intendi github.com/zloirock/core-js , presumo (es. Npm installa core-js)?

— Daniel Loiterton

7

Stavo riscontrando un problema con un'app generata con l'ultima app create-react che non veniva visualizzata su IE 11 e versioni precedenti. Grazie a questa soluzione, ho finito per includere <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,es6"></script>(nota il es6) e ora funziona a meraviglia. Credo che il problema principale fosse la necessità di un polyfill per Symbol.

— dougmacklin

1

@dougmacklin Cordiali saluti: è incostante, perché nel mio caso, l'utilizzo della tua inclusione non ha risolto i miei problemi di IE 11. Sfortunatamente, anche la console per sviluppatori in IE 11 è stata molto inutile nel capire quale funzione del linguaggio lo stava facendo scattare. Abbiamo finito per usare babel-polyfill. Mano pesante, lo so, ma dovevamo far funzionare il sito di produzione.

— Clinton Chau

1

@ClintonChau, totalmente comprensibile. Da quando ho pubblicato quel commento, ho finito per dover usare babel-polyfill su un altro progetto per risolvere un diverso problema di IE 11

— dougmacklin

12

Usa il react-app-polyfill che ha polyfill per le caratteristiche comuni di ES6 usate in React. Ed è parte di crea-reagisci-app . Assicurati di includerlo all'inizio di index.js come definito nel README.

— bianco ghiaccio
fonte

1

Penso che la mia risposta sia la migliore, ma è solo perché è più recente: il react-app-polyfill è stato creato solo pochi mesi fa e fino ad allora le altre risposte erano ovviamente migliori :-)

— icewhite

4

Ciao @icewhite, penso che tu abbia frainteso un po 'su react-app-polyfill. Il pacchetto include solo polifill di: Promise, window.fetch, Object.assign, Symbol, Array.from. Essa non comprende Array.prototype.includes()o di altri.

— Huong Nguyen

6

Ho usato il filato per scaricare il polyfill e l'ho importato direttamente nel mio index.js.

Nel prompt dei comandi:

yarn add array.prototype.fill

E poi, all'inizio di index.js:

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

Mi piace questo approccio poiché sto importando specificamente ciò di cui ho bisogno nel progetto.

— gus3001
fonte

1

Qualcosa di simile ora sembra essere la best practice suggerita per i progetti Create React App. Vedi: github.com/facebook/create-react-app/blob/master/packages/…

— Peter W

3

Per quel che vale, ho avuto problemi con la nuova Google Search Console e la mia app React (create-react-app). Dopo aver aggiunto es6shim, tutto è stato risolto.

Ho aggiunto quanto segue alla mia pagina index.html pubblica.

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

— David J Barnes
fonte

0

Espelli dal tuo progetto Crea app React

Successivamente puoi inserire tutti i tuoi polyfill nel tuo /config/polyfills.jsfile

Metti quanto segue alla fine del file

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

Webpack risolverà automaticamente questo problema per te;)

— webmaster
fonte

effettivamente trovato un modo migliore, npm install --save core-js; importa "core-js / fn / object / values";

— webmaster

Puoi modificare la tua risposta in questo modo migliore?

— MattSidor

0

Ho avuto lo stesso problema. Una soluzione di Daniel Loiterton non ha funzionato per me. Ma! Ho aggiunto un'altra importazione da core-js import 'core-js/modules/es6.symbol';e questo funziona per me su IE11.

— Doppio
fonte