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

88

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'?

— Daniel Loiterton
sumber

1

Babel menyediakan babel-polyfillpolyfill ES6 + yang mudah.

— loganfsmyth

1

Perhatikan bahwa Array.prototype.includes()sebenarnya ada di ES7, bukan ES6

— huyz

123

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.

— Daniel Loiterton
sumber

18

Saya mungkin akan mendapatkan yang lebih terperinci. Daripada menyalin tempel, Anda dapat menginstal core-jsdan mengimpor polyfill global individual dari file polyfills.js. Selain itu, kedua pendekatan ini terdengar bagus.

— Dan Abramov

1

Kedengarannya lebih pintar, terima kasih Dan. Maksud Anda github.com/zloirock/core-js , saya berasumsi (mis. Npm install core-js)?

— Daniel Loiterton

7

Saya mengalami masalah dengan aplikasi yang dibuat dengan aplikasi create-react terbaru yang tidak muncul di IE 11 dan yang lebih lama. Berkat solusi ini, saya akhirnya memasukkan <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,es6"></script>(perhatikan es6) dan sekarang berfungsi seperti pesona. Saya yakin masalah utamanya adalah membutuhkan polyfill untuk Symbol.

— dougmacklin

1

@dougmacklin FYI: Ini hit atau miss, karena dalam kasus saya, menggunakan include Anda tidak memecahkan masalah IE 11 saya. Sayangnya, konsol pengembang di IE 11 juga sangat tidak membantu dalam mencari tahu fitur bahasa mana yang membuatnya tersandung. Kami akhirnya menggunakan babel-polyfill. Bertangan berat, saya tahu, tetapi kami harus menjalankan lokasi produksi.

— Clinton Chau

1

@ClintonChau, sangat bisa dimengerti. Sejak saya memposting komentar itu, saya akhirnya harus menggunakan babel-polyfill pada proyek lain untuk memperbaiki masalah IE 11 yang berbeda

— dougmacklin

12

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.

— es putih
sumber

1

Saya pikir jawaban saya adalah yang terbaik, tetapi itu hanya karena lebih baru - react-app-polyfill hanya dibuat beberapa bulan yang lalu dan sampai saat itu jawaban lainnya jelas lebih baik :-)

— icewhite

4

Hai @icewhite, saya rasa Anda sedikit salah paham tentang react-app-polyfill. Paket tersebut hanya menyertakan polifill dari: Promise, window.fetch, Object.assign, Symbol, Array.from. Itu tidak termasuk Array.prototype.includes()atau lainnya.

— Huong Nguyen

6

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.

— gus3001
sumber

1

Sesuatu seperti ini tampaknya sekarang menjadi praktik terbaik yang disarankan untuk proyek Create React App. Lihat: github.com/facebook/create-react-app/blob/master/packages/…

— Peter W

3

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>

— David J Barnes
sumber

0

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;)

— webmaster
sumber

sebenarnya menemukan cara yang lebih baik, npm install --save core-js; impor 'core-js / fn / object / values';

— webmaster

Bisakah Anda mengedit jawaban Anda dengan cara yang lebih baik ini?

— MattSidor

0

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.

— Ganda
sumber