Лучший способ заполнить функции ES6 в приложении React, использующем приложение create-реагировать
Я тестировал свое приложение React.js в Internet Explorer и, к моему удивлению, код ES6, например Array.prototype.includes() ломает это. Я использую стартовый комплект creat-response-app, и я подумал, что babel был частью этого, и что он позволил мне написать код ES6.
Оказывается, не все так просто. Из того, что я вижу, они решили НЕ включать много polyfill, поскольку это не всем нужно, и это замедляет время сборки. Смотрите, например, здесь и здесь. Была попытка задокументировать это, но нет упоминания о том, как на самом деле сделать полифиллы самостоятельно. Просто это:
Если вы используете какие-либо другие функции ES6+, которые требуют поддержки во время выполнения (например, Array.from() или Symbol), убедитесь, что вы включаете соответствующие полифилы вручную или что целевые браузеры уже поддерживают их.
Итак... что является лучшим способом "вручную" включить их? Я думал, что это часть того, что Babel для? Должен ли я частично импортировать элементы babel-polyfill?
4 ответа
Эти два подхода оба работают:
1. Ручной импорт из core-js (редактируется на основе комментария Дэна)
Создайте файл с именем (что-то вроде) polyfills.js и импортируйте его в корневой файл index.js.
Бежать npm install core-js или же yarn add core-js и импортируйте ваши конкретные требуемые функции, например, так:
/* polyfills.js */
import 'core-js/fn/array/find';
import 'core-js/fn/array/includes';
import 'core-js/fn/number/is-nan';
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 функция, поскольку она не включена в набор функций по умолчанию.
Используйте реагирующее приложение-полифилл, в котором есть полифилы, для общих функций ES6, используемых в React. И это часть создания-реакции-приложения. Убедитесь, что вы включили его в начало index.js, как определено в README.
Я использовал пряжу, чтобы загрузить полифилл и импортировал его прямо в мой 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-реагировать-приложение). После добавления es6shim все было решено.
Я добавил ниже к моей общедоступной странице index.html.
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
Извлечь из вашего проекта Создать приложение 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.