Cara terbaik untuk mem-polyfill fitur ES6 di aplikasi React yang menggunakan create-react-app

Saya telah menguji aplikasi React.js saya di internet explorer, dan menemukan bahwa beberapa kode ES6 / 7 seperti Array.prototype.includes()memecahkannya.

Saya menggunakan create-react-app , dan tampaknya mereka telah memilih untuk tidak menyertakan banyak polyfill karena tidak semua orang membutuhkannya, dan mereka memperlambat waktu build (lihat misalnya di sini dan di sini ). Dokumentasi (pada saat penulisan) menyarankan:

Jika Anda menggunakan fitur ES6 + lain yang memerlukan dukungan runtime (seperti Array.from () atau Symbol), pastikan Anda menyertakan polyfill yang sesuai secara manual, atau browser yang Anda targetkan sudah mendukungnya.

Jadi ... apa cara terbaik untuk memasukkannya 'secara manual'?

Pembaruan : Dokumen dan pendekatan polyfill create-react-app telah berubah sejak pertanyaan / jawaban ini. Anda sekarang harus menyertakan react-app-polyfill(di sini ) jika Anda ingin mendukung browser lama seperti ie11. Namun, ini hanya mencakup " ... persyaratan minimum dan fitur bahasa yang umum digunakan ", jadi Anda masih ingin menggunakan salah satu pendekatan di bawah untuk fitur ES6 / 7 yang kurang umum (seperti Array.includes)

Kedua pendekatan ini bekerja:

1. Impor manual dari react-app-polyfill dan core-js

Instal react-app-polyfill dan core-js (3.0+):

npm install react-app-polyfill core-js atau yarn add react-app-polyfill core-js

Buat file bernama (seperti) polyfills.js dan impor ke file index.js root Anda. Kemudian impor polyfill aplikasi react dasar, ditambah fitur khusus yang diperlukan, seperti:

/* 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. Layanan Polyfill

Gunakan polyfill.io CDN untuk mengambil polyfill khusus browser dengan menambahkan baris ini ke index.html:

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

perhatikan, saya harus secara eksplisit meminta Array.prototype.includesfitur tersebut karena tidak termasuk dalam kumpulan fitur default.

Gunakan react-app-polyfill yang memiliki polyfill untuk fitur ES6 umum yang digunakan di React. Dan itu bagian dari create-react-app . Pastikan Anda memasukkannya di awal index.js seperti yang didefinisikan dalam README.

Saya menggunakan benang untuk mengunduh polyfill dan mengimpornya langsung ke index.js saya.

Di command prompt:

yarn add array.prototype.fill

Dan kemudian, di atas index.js:

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

Saya menyukai pendekatan ini karena saya secara khusus mengimpor apa yang saya butuhkan ke dalam proyek.

Untuk apa layaknya saya mengalami masalah dengan Google Search Console baru dan aplikasi React saya (create-react-app). Setelah menambahkan es6shim, semua diselesaikan.

Saya menambahkan di bawah ini ke halaman index.html publik saya.

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

Keluarkan dari Proyek Aplikasi Buat React Anda

Setelah itu, Anda dapat memasukkan semua polyfill ke dalam /config/polyfills.jsfile Anda

Letakkan yang berikut ini di akhir file

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

Webpack secara otomatis akan memperbaikinya untuk Anda;)

Saya memiliki masalah yang sama. Solusi dari Daniel Loiterton tidak berhasil untuk saya. Tapi! Saya menambahkan satu impor lagi dari core-js import 'core-js/modules/es6.symbol';dan ini berfungsi untuk saya di IE11.