วิธีที่ดีที่สุดในการเติมคุณสมบัติ ES6 ในแอป React ที่ใช้ create-react-app

ฉันได้ทดสอบแอปพลิเคชัน React.js ของฉันบน internet explorer และพบว่ารหัส ES6 / 7 บางรหัสชอบArray.prototype.includes()ทำลาย

ฉันใช้create-react-appและเห็นได้ชัดว่าพวกเขาเลือกที่จะไม่รวม polyfills จำนวนมากเนื่องจากไม่ใช่ทุกคนที่ต้องการและทำให้เวลาในการสร้างช้าลง (ดูตัวอย่างที่นี่และที่นี่ ) เอกสาร (ขณะเขียน) แนะนำ:

หากคุณใช้คุณสมบัติ ES6 + อื่น ๆ ที่ต้องการการสนับสนุนรันไทม์ (เช่น Array.from () หรือ Symbol) ตรวจสอบให้แน่ใจว่าคุณได้ใส่ polyfills ที่เหมาะสมด้วยตนเองหรือว่าเบราว์เซอร์ที่คุณกำหนดเป้าหมายรองรับอยู่แล้ว

ดังนั้น ... วิธีที่ดีที่สุดในการ "รวม" ด้วยตนเองคืออะไร?

อัปเดต : วิธีการสร้าง - ตอบสนองต่อแอป polyfill และเอกสารมีการเปลี่ยนแปลงตั้งแต่คำถาม / คำตอบนี้ ตอนนี้คุณควรรวมreact-app-polyfill( ที่นี่ ) หากคุณต้องการรองรับเบราว์เซอร์รุ่นเก่าเช่น ie11 อย่างไรก็ตามนี่รวมเฉพาะ " ... ข้อกำหนดขั้นต่ำและคุณลักษณะภาษาที่ใช้กันทั่วไป " ดังนั้นคุณจะยังคงต้องการใช้วิธีใดวิธีหนึ่งด้านล่างนี้สำหรับคุณลักษณะ ES6 / 7 ที่ไม่ค่อยพบบ่อย (เช่นArray.includes)

สองวิธีนี้ใช้ได้ผลทั้งสองอย่าง:

1. การนำเข้าด้วยตนเองจาก react-app-polyfill และ core-js

ติดตั้งreact-app-polyfillและcore-js (3.0+):

npm install react-app-polyfill core-js หรือ yarn add react-app-polyfill core-js

สร้างไฟล์ชื่อ polyfills.js และนำเข้าไฟล์ root index.js จากนั้นนำเข้า polyfills ปฏิกิริยาแอปพื้นฐานพร้อมคุณสมบัติที่จำเป็นเฉพาะเช่น:

/* 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.io CDN เพื่อดึงโพลีฟิลล์เฉพาะเบราว์เซอร์ที่กำหนดเองโดยเพิ่มบรรทัดนี้ใน index.html:

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

โปรดทราบว่าฉันต้องร้องขอArray.prototype.includesคุณลักษณะอย่างชัดเจนเนื่องจากไม่รวมอยู่ในชุดคุณลักษณะเริ่มต้น

ใช้react-app-polyfillซึ่งมี polyfills สำหรับคุณสมบัติ ES6 ทั่วไปที่ใช้ใน React และมันก็เป็นส่วนหนึ่งของการสร้างปฏิกิริยาแอป ตรวจสอบให้แน่ใจว่าคุณรวมไว้ที่จุดเริ่มต้นของ index.js ตามที่กำหนดไว้ใน README

ฉันใช้เส้นด้ายเพื่อดาวน์โหลด polyfill และนำเข้าโดยตรงใน 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 Search Console ใหม่และแอป React ของฉัน (create-react-app) หลังจากเพิ่ม es6shim ทุกอย่างได้รับการแก้ไข

ฉันเพิ่มด้านล่างนี้ในหน้า index.html สาธารณะของฉัน

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

นำออกจากโครงการ Create React App

หลังจากนั้นคุณสามารถใส่ polyfills ทั้งหมดใน/config/polyfills.jsไฟล์ของคุณได้

ใส่สิ่งต่อไปนี้ที่ท้ายไฟล์

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

Webpack จะแก้ไขปัญหานี้ให้คุณโดยอัตโนมัติ;)

ผมมีปัญหาเดียวกัน. วิธีแก้ปัญหาจาก Daniel Loiterton ไม่ได้ผลสำหรับฉัน แต่! ฉันเพิ่มการนำเข้าอีกหนึ่งรายการจาก core-js import 'core-js/modules/es6.symbol';และสิ่งนี้ใช้ได้กับฉันบน IE11