Cách tốt nhất để ghép các tính năng của ES6 vào ứng dụng React sử dụng ứng dụng tạo phản ứng

Tôi đã thử nghiệm ứng dụng React.js của mình trên Internet explorer và nhận thấy rằng một số mã ES6 / 7 giống như đã Array.prototype.includes()phá vỡ nó.

Tôi đang sử dụng ứng dụng tạo-phản ứng và dường như họ đã chọn không đưa vào nhiều polyfills vì không phải ai cũng cần chúng và chúng làm chậm thời gian xây dựng (xem ví dụ ở đây và ở đây ). Tài liệu (tại thời điểm viết bài) gợi ý:

Nếu bạn sử dụng bất kỳ tính năng ES6 + nào khác cần hỗ trợ thời gian chạy (chẳng hạn như Array.from () hoặc Symbol), hãy đảm bảo rằng bạn đang bao gồm các polyfills thích hợp theo cách thủ công hoặc các trình duyệt bạn đang nhắm mục tiêu đã hỗ trợ chúng.

Vậy ... cách tốt nhất để 'bao gồm chúng theo cách thủ công' là gì?

Cập nhật : Cách tiếp cận polyfill tạo ứng dụng và tài liệu đã thay đổi kể từ câu hỏi / câu trả lời này. Bây giờ bạn nên bao gồm react-app-polyfill( ở đây ) nếu bạn muốn hỗ trợ các trình duyệt cũ hơn như ie11. Tuy nhiên, điều này chỉ bao gồm " ... yêu cầu tối thiểu và các tính năng ngôn ngữ thường được sử dụng ", vì vậy bạn sẽ vẫn muốn sử dụng một trong các cách tiếp cận bên dưới cho các tính năng ES6 / 7 ít phổ biến hơn (như Array.includes)

Cả hai cách tiếp cận này đều hoạt động:

1. Nhập thủ công từ react-app-polyfill và core-js

Cài đặt react-app-polyfill và core-js (3.0+):

npm install react-app-polyfill core-js hoặc là yarn add react-app-polyfill core-js

Tạo một tệp có tên (giống như) polyfills.js và nhập nó vào tệp index.js gốc của bạn. Sau đó, nhập các polyfills ứng dụng phản ứng cơ bản, cùng với bất kỳ tính năng bắt buộc cụ thể nào, như sau:

/* 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. Dịch vụ Polyfill

Sử dụng CDN polyfill.io để truy xuất các polyfills tùy chỉnh, dành riêng cho trình duyệt bằng cách thêm dòng này vào index.html:

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

lưu ý, tôi đã phải yêu cầu Array.prototype.includestính năng rõ ràng vì nó không có trong bộ tính năng mặc định.

Sử dụng phản ứng-ứng dụng-polyfill có polyfill cho các tính năng ES6 phổ biến được sử dụng trong React. Và nó là một phần của ứng dụng tạo-phản ứng . Đảm bảo bạn đưa nó vào đầu index.js như được định nghĩa trong README.

Tôi đã sử dụng sợi để tải xuống polyfill và nhập trực tiếp vào index.js của mình.

Trong dấu nhắc lệnh:

yarn add array.prototype.fill

Và sau đó, ở đầu index.js:

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

Tôi thích cách tiếp cận này vì tôi đang nhập cụ thể những gì tôi cần vào dự án.

Đối với những gì đáng giá là tôi gặp sự cố với Google Search Console mới và ứng dụng React của tôi (tạo-ứng dụng phản ứng). Sau khi thêm es6shim, tất cả đã được giải quyết.

Tôi đã thêm phần bên dưới vào trang index.html công khai của mình.

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

Loại bỏ khỏi Dự án ứng dụng Tạo React của bạn

Sau đó, bạn có thể đặt tất cả các polyfills của mình vào /config/polyfills.js tệp

Đặt phần sau vào cuối tệp

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

Webpack sẽ tự động sửa lỗi này cho bạn;)

Tôi đã từng gặp vấn đề tương tự. Một giải pháp từ Daniel Loiterton không phù hợp với tôi. Nhưng! Tôi đã thêm một lần nhập nữa từ core-js import 'core-js/modules/es6.symbol';và điều này phù hợp với tôi trên IE11.