Найкращий спосіб заповнити функції ES6 у програмі React, яка використовує додаток create-response-app

Я тестував свою програму React.js на Internet Explorer і виявив, що деякі коди ES6 / 7, як би, Array.prototype.includes()її ламають .

Я використовую додаток create-response- і, мабуть, вони вирішили не включати багато поліфілів, оскільки вони потрібні не всім, і вони сповільнюють час збірки (див., Наприклад, тут і тут ). Документація (на момент написання) передбачає:

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

Отже ... який найкращий спосіб включити їх вручну?

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

Ці два підходи працюють:

1. Імпорт вручну з реактора-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

Використовуйте polyfill.io CDN для отримання власних, спеціальних для браузера поліфілів, додавши цей рядок до index.html:

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

Зверніть увагу, що мені довелося запросити специфіку Array.prototype.includesфункції, оскільки вона не входить до набору функцій за замовчуванням.

Використовуйте зреагувати-додаток-polyfill , який має polyfills для загального ES6 ознак , використовуваних в React. І це частина програми create-response-app . Переконайтеся, що ви включили його на початку 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-response-app). Після додавання es6shim все було вирішено.

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

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

Вилучити з вашого проекту React App

Згодом ви можете помістити всі свої поліфіли у свій /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.