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

Я тестировал свое приложение React.js в Internet Explorer, и, к моему удивлению, код Array.prototype.includes(), такой как Array.prototype.includes() ломает его. Я использую стартовый комплект creat-реагировать-приложение, и я подумал, что Babel был частью этого, и что это позволило мне писать код ES6.

Оказывается, не все так просто. Из того, что я вижу, они решили НЕ включать много polyfill, поскольку это не всем нужно, и это замедляет время сборки. Смотрите, например, здесь и здесь. Была попытка документировать это, но нет упоминания о том, как на самом деле сделать полифиллы самостоятельно. Просто это:

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

Итак... каков наилучший способ "вручную" включить их? Я думал, что часть того, для чего babel? Должен ли я частично импортировать элементы babel-polyfill?

Ответы

Ответ 1

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

Эти два подхода оба работают:

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

Установите response-app-polyfill и core-js (3. 0+):

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

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

/* 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 поскольку она не включена в набор функций по умолчанию.

Ответ 3

Я использовал пряжу для загрузки polyfill и импортировал ее непосредственно в свой 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';
...

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

Ответ 4

Извлечь из проекта Create React App

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

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

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

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

Ответ 5

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

Ответ 6

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

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

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