it-roy-ru.com

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

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

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

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

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

59
Daniel Loiterton

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


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

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

Создайте файл с именем (что-то вроде) polyfills.js и импортируйте его в корневой файл index.js.

Запустите npm install react-app-polyfill core-js (или yarn add react-app-polyfill core-js) и импортируйте основы, а также любые специфические необходимые функции, например:

/* polyfills.js */

import 'react-app-polyfill/ie11';
import 'core-js/fn/array/find';
import 'core-js/fn/array/includes';
import 'core-js/fn/number/is-nan';

2. Сервис Polyfill

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

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

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

67
Daniel Loiterton

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

6
icewhite

Я использовал пряжу, чтобы загрузить полифилл и импортировал его прямо в мой 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';
...

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

5
gus3001

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

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

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

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

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

2
webmaster

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

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

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

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

0
Dual