Лучший способ полифиллировать функции ES6 в приложении React, которое использует приложение create-react-app

Я тестировал свое приложение React.js в Internet Explorer и обнаружил, что какой-то код ES6 / 7 Array.prototype.includes()ломает его.

Я использую приложение create-react-app , и, по-видимому, они решили не включать много полифиллов, поскольку они не всем нужны, и они замедляют время сборки (см., Например, здесь и здесь ). В документации (на момент написания) предлагается:

Если вы используете какие-либо другие функции ES6 +, которые нуждаются в поддержке во время выполнения (например, Array.from () или Symbol), убедитесь, что вы включаете соответствующие полифилы вручную или что браузеры, на которые вы нацелены, уже поддерживают их.

Итак ... как лучше всего включить их "вручную"?

Обновление : подход и документация create-react-app polyfill изменились после этого вопроса / ответа. Теперь вы должны включить react-app-polyfill( здесь ), если хотите поддерживать старые браузеры, такие как ie11. Однако это включает только « ... минимальные требования и часто используемые языковые функции », поэтому вы все равно захотите использовать один из подходов ниже для менее распространенных функций ES6 / 7 (например Array.includes)

Оба этих подхода работают:

1. Ручной импорт из react-app-polyfill и core-js.

Установите react-app-polyfill и core-js (3.0+):

npm install react-app-polyfill core-js или yarn add react-app-polyfill core-js

Создайте файл с именем (что-то вроде) polyfills.js и импортируйте его в свой корневой файл index.js. Затем импортируйте базовые полифилы приложения react-app, а также все необходимые функции, например:

/* 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. Сервис Polyfill

Используйте сеть CDN polyfill.io для получения настраиваемых полифиллов для конкретного браузера, добавив эту строку в index.html:

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

обратите внимание, мне пришлось явно запросить эту Array.prototype.includesфункцию, поскольку она не включена в набор функций по умолчанию.

Используйте react-app-polyfill, в котором есть полифилы для общих функций ES6, используемых в React. И это часть приложения create-react-app . Убедитесь, что вы включили его в начало index.js, как определено в README.

Я использовал yarn для загрузки полифилла и импортировал его прямо в свой index.js.

В командной строке:

yarn add array.prototype.fill

А затем вверху index.js:

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

Мне нравится этот подход, поскольку я специально импортирую в проект то, что мне нужно.

Как бы то ни было, у меня возникли проблемы с новой консолью поиска Google и моим приложением React (create-response-app). После добавления es6shim все разрешилось.

Я добавил ниже на свою общедоступную страницу index.html.

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

Извлечь из вашего проекта приложения Create React

После этого вы можете поместить все свои полифиллы в свой /config/polyfills.jsфайл.

Поместите в конец файла следующее

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

Webpack автоматически исправит это за вас;)

У меня такая же проблема. Решение от Дэниела Лойтертона у меня не сработало. Но! Я добавил еще один импорт из core-js, import 'core-js/modules/es6.symbol';и у меня это работает в IE11.