Create-react-app kullanan React uygulamasında ES6 özelliklerini çoklu doldurmanın en iyi yolu

88

React.js uygulamamı internet explorer üzerinde test ediyor ve bazı ES6 / 7 kodlarının Array.prototype.includes()onu kırdığını görüyorum .

Create-react-app kullanıyorum ve görünüşe göre herkesin ihtiyacı olmadığı için çok fazla polyfill eklememeyi seçtiler ve derleme sürelerini yavaşlatıyorlar (örneğin buraya ve buraya bakın ). Belgeler (yazarken) şunları önerir:

Çalışma zamanı desteğine ihtiyaç duyan diğer ES6 + özelliklerini kullanıyorsanız (Array.from () veya Symbol gibi), uygun polyfill'leri manuel olarak eklediğinizden veya hedeflediğiniz tarayıcıların bunları zaten desteklediğinden emin olun.

Öyleyse ... onları 'manuel olarak' dahil etmenin en iyi yolu nedir?

— Daniel Loiterton
kaynak

1

Babel, babel-polyfillkolay bir ES6 + polyfill olarak sağlar.

— loganfsmyth

1

Bunun Array.prototype.includes()ES6'da değil, ES7'de olduğunu unutmayın

— huyz

123

Güncelleme : Create-react-app polyfill yaklaşımı ve dokümanlar bu soru / cevaptan sonra değişti. İe11 gibi daha eski tarayıcıları desteklemek istiyorsanız şimdi eklemelisiniz react-app-polyfill( buraya ). Ancak, bu yalnızca " ... minimum gereksinimleri ve yaygın olarak kullanılan dil özelliklerini " içerir, dolayısıyla daha az yaygın olan ES6 / 7 özellikleri (gibi Array.includes) için aşağıdaki yaklaşımlardan birini kullanmaya devam etmek isteyeceksiniz.

Bu iki yaklaşımın ikisi de işe yarar:

1. react-app-polyfill ve core-js'den manuel içe aktarma

React-app-polyfill ve core-js (3.0+) yükleyin :

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

Polyfills.js adlı bir dosya oluşturun ve bunu kök index.js dosyanıza aktarın. Ardından, temel react-app çoklu dolgularını ve bunun gibi gerekli tüm özellikleri içe aktarın:

/* 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 hizmeti

Bu satırı index.html'ye ekleyerek özel, tarayıcıya özgü çoklu dolgular almak için polyfill.io CDN'yi kullanın :

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

not, Array.prototype.includesvarsayılan özellik setine dahil olmadığı için özelliği açıklığa kavuşturmak zorunda kaldım .

— Daniel Loiterton
kaynak

18

Muhtemelen daha ayrıntılı olurdum. Kopyalayıp yapıştırmak yerine core-jsbireysel global polyfill'leri polyfills.js. Bunun dışında her iki yaklaşım da gayet iyi.

— Dan Abramov

1

Bu daha akıllıca geliyor, teşekkürler Dan. Yani github.com/zloirock/core-js demek istiyorsunuz , sanırım (yani. Npm core-js yükleyin)?

— Daniel Loiterton

7

IE 11 ve altında görünmeyen en son oluştur-tepki-uygulaması ile oluşturulan bir uygulamayla ilgili bir sorunla karşılaşıyordum. Bu çözüm sayesinde, dahil ettim <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,es6"></script>(dikkat edin es6) ve şimdi bir cazibe gibi çalışıyor. Ana sorunun Sembol için bir çoklu dolgunun gerekli olduğuna inanıyorum.

— dougmacklin

1

@dougmacklin Bilginize: Vuruldu ya da özledim, çünkü benim durumumda dahil etmenini kullanmak IE 11 sorunlarımı çözmedi. Ne yazık ki, IE 11'deki geliştirici konsolu da hangi dil özelliğinin onu tetiklediğini anlamada çok yardımcı olmadı. Babel-polyfill'i kullandık. Ağırbaşlı, biliyorum, ama üretim sahasını çalıştırmamız gerekiyordu.

— Clinton Chau

1

@ClintonChau, tamamen anlaşılabilir. Bu yorumu yayınladığımdan beri, farklı bir IE 11 sorununu düzeltmek için başka bir projede babel-polyfill kullanmak zorunda kaldım

— dougmacklin

12

React'te kullanılan yaygın ES6 özellikleri için çoklu dolgulara sahip react-app-polyfill'i kullanın . Ve oluşturma-tepki verme uygulamasının bir parçası . README'de tanımlandığı gibi index.js'nin başına eklediğinizden emin olun.

— buz beyazı
kaynak

1

Cevabımın en iyisi olduğunu düşünüyorum, ancak bunun nedeni daha yeni olması - react-app-polyfill yalnızca birkaç ay önce oluşturulmuştu ve o zamana kadar diğer yanıtlar açıkça daha iyiydi :-)

— icewhite

4

Merhaba @icewhite, react-app-polyfill hakkında biraz yanlış anladığınızı düşünüyorum. Paket şunların polifill'ini içerir: Promise, window.fetch, Object.assign, Symbol, Array.from. O değil kapsar Array.prototype.includes()veya diğerleri.

— Huong Nguyen

6

Polyfill'i indirmek için iplik kullandım ve doğrudan index.js'ime aktardım.

Komut isteminde:

yarn add array.prototype.fill

Ve sonra, en tepede index.js:

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

Bu yaklaşımı özellikle ihtiyacım olanı projeye ithal ettiğim için seviyorum.

— gus3001
kaynak

1

Bunun gibi bir şey artık Create React App projeleri için önerilen en iyi uygulama gibi görünüyor. Bakınız: github.com/facebook/create-react-app/blob/master/packages/…

— Peter W

3

Ne olursa olsun, yeni Google Arama Konsolu ve React uygulamamla (create-react-app) sorunlar yaşıyordum. Es6shim'i ekledikten sonra her şey çözüldü.

Aşağıdakini genel index.html sayfama ekledim.

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

— David J Barnes
kaynak

0

Create React App Projenizden Çıkarın

Daha sonra tüm polyfilllerinizi /config/polyfills.jsdosyanıza koyabilirsiniz

Aşağıdakileri dosyanın sonuna koyun

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

Webpack bunu sizin için otomatik olarak düzeltir;)

— web yöneticisi
kaynak

aslında daha iyi bir yol buldu, npm install --save core-js; 'core-js / fn / nesne / değerleri' içe aktarın;

— webmaster

Cevabınızı daha iyi bir şekilde düzenler misiniz lütfen?

— MattSidor

0

Ben de aynı sorunu yaşadım. Daniel Loiterton'dan bir çözüm benim için işe yaramadı. Fakat! Core- import 'core-js/modules/es6.symbol';js'den bir ithalat daha ekledim ve bu benim için IE11'de çalışıyor.

— Çift
kaynak