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

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?

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.

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.

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.

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>

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

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.