Najlepszy sposób na wypełnienie funkcji ES6 w aplikacji React, która wykorzystuje aplikację create-react-app

88

Testowałem moją aplikację React.js w przeglądarce Internet Explorer i stwierdziłem, że jakiś kod ES6 / 7 Array.prototype.includes()ją psuje.

Używam aplikacji create-react- i najwyraźniej zdecydowali się nie uwzględniać wielu polyfillów, ponieważ nie wszyscy ich potrzebują i spowalniają czas kompilacji (patrz na przykład tutaj i tutaj ). Dokumentacja (w momencie pisania) sugeruje:

Jeśli używasz innych funkcji ES6 +, które wymagają obsługi środowiska wykonawczego (takich jak Array.from () lub Symbol), upewnij się, że ręcznie dołączasz odpowiednie wypełnienia lub że przeglądarki, na które kierujesz, już je obsługują.

Więc ... jaki jest najlepszy sposób na „ręczne” ich uwzględnienie?

Daniel Loiterton
źródło
1
Babel zapewnia babel-polyfillłatwe wypełnienie ES6 +.
loganfsmyth
1
Zauważ, że Array.prototype.includes()tak naprawdę jest w ES7, a nie ES6
huyz

Odpowiedzi:

123

Aktualizacja : od czasu tego pytania / odpowiedzi zmieniły się metody tworzenia i reagowania aplikacji polifillowych oraz dokumenty. Powinieneś teraz dołączyć react-app-polyfill( tutaj ), jeśli chcesz obsługiwać starsze przeglądarki, takie jak ie11. Jednak obejmuje to tylko „ … minimalne wymagania i często używane funkcje językowe ”, więc nadal będziesz chciał użyć jednego z poniższych podejść do mniej popularnych funkcji ES6 / 7 (takich jak Array.includes)


Te dwa podejścia działają:


1. Ręczne importowanie z plików React-app-polyfill i core-js

Zainstaluj act-app-polyfill i core-js (3.0+):

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

Utwórz plik o nazwie (coś w rodzaju) polyfills.js i zaimportuj go do głównego pliku index.js. Następnie zaimportuj podstawowe wypełnienia aplikacji React oraz wszelkie wymagane funkcje, takie jak:

/* 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. Serwis wielokrotnego napełniania

Użyj sieci CDN polyfill.io, aby pobrać niestandardowe, specyficzne dla przeglądarki polyfills, dodając ten wiersz do index.html:

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

uwaga, musiałem wprost zażądać tej Array.prototype.includesfunkcji, ponieważ nie jest ona zawarta w domyślnym zestawie funkcji.

Daniel Loiterton
źródło
18
Prawdopodobnie byłbym bardziej szczegółowy. Zamiast kopiować wklejanie, możesz zainstalować core-jsi zaimportować indywidualne globalne wypełnienia z pliku polyfills.js. Poza tym oba podejścia brzmią dobrze.
Dan Abramov
1
To brzmi mądrzej, dzięki Dan. Masz na myśli github.com/zloirock/core-js , zakładam (tj. Npm install core-js)?
Daniel Loiterton
7
Miałem problem z aplikacją wygenerowaną z najnowszą aplikacją create-react-app, która nie pojawiała się w przeglądarce IE 11 i starszych. Dzięki temu rozwiązaniu skończyłem w tym <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,es6"></script>(zauważ es6) i teraz działa jak marzenie. Uważam, że głównym problemem była potrzeba wypełnienia polietylenu dla Symbol.
dougmacklin
1
@dougmacklin Just FYI: To strzał w dziesiątkę, ponieważ w moim przypadku użycie dołączonych plików nie rozwiązało moich problemów z IE 11. Niestety, konsola programisty w IE 11 również bardzo nie pomogła w ustaleniu, która funkcja języka ją uruchamia. Skończyło się na tym, że użyliśmy babel-polyfill. Wiem, że to ciężka ręka, ale musieliśmy uruchomić zakład produkcyjny.
Clinton Chau
1
@ClintonChau, całkowicie zrozumiałe. Odkąd opublikowałem ten komentarz, ostatecznie musiałem użyć babel-polyfill w innym projekcie, aby naprawić inny problem z IE 11
dougmacklin
12

Użyj React -app-polyfill, który ma polyfills dla typowych funkcji ES6 używanych w React. Jest to część aplikacji „ stwórz i zareaguj” . Upewnij się, że umieściłeś go na początku pliku index.js, zgodnie z definicją w pliku README.

lodowobiały
źródło
1
Myślę, że moja odpowiedź jest najlepsza, ale to tylko dlatego, że jest nowsza - react-app-polyfill powstał zaledwie kilka miesięcy temu i do tego czasu inne odpowiedzi były oczywiście lepsze :-)
lodowobiała
4
Cześć @icewhite, myślę, że trochę źle zrozumiałeś kwestię reakcji-app-polyfill. Pakiet zawiera po prostu polifill: Promise, window.fetch, Object. assign, Symbol, Array.from. To nie to Array.prototype.includes()czy inni.
Huong Nguyen
6

Użyłem przędzy do pobrania polyfill i zaimportowałem go bezpośrednio do mojego pliku index.js.

W wierszu polecenia:

yarn add array.prototype.fill

A potem u góry index.js:

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

Podoba mi się to podejście, ponieważ specjalnie importuję to, czego potrzebuję, do projektu.

gus3001
źródło
1
Coś takiego wydaje się być teraz sugerowaną najlepszą praktyką dla projektów tworzenia aplikacji React. Zobacz: github.com/facebook/create-react-app/blob/master/packages/…
Peter W
3

Na ile to jest warte, miałem problemy z nową Google Search Console i moją aplikacją React (aplikacja do tworzenia reakcji). Po dodaniu es6shim wszystko zostało rozwiązane.

Dodałem poniżej do mojej publicznej strony index.html.

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
David J Barnes
źródło
0

Wysuń z projektu aplikacji Create React

Następnie możesz umieścić wszystkie swoje wypełnienia w swoim /config/polyfills.jspliku

Na końcu pliku umieść następujący tekst

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

Webpack automatycznie naprawi to za Ciebie;)

webmaster
źródło
faktycznie znalazłem lepszy sposób, npm install --save core-js; import „core-js / fn / object / values”;
webmaster
Czy możesz zmienić swoją odpowiedź w ten lepszy sposób?
MattSidor,
0

Miałem ten sam problem. Rozwiązanie od Daniela Loitertona nie działało dla mnie. Ale! Dodałem jeszcze jeden import z core-js import 'core-js/modules/es6.symbol';i to działa dla mnie na IE11.

Podwójny
źródło