पॉलीफ़िल ES6 फीचर्स में रिएक्ट ऐप का सबसे अच्छा तरीका है जो क्रिएट-रिएक्शन-ऐप का उपयोग करता है

Question

मैं इंटरनेट एक्सप्लोरर पर अपने React.js एप्लिकेशन का परीक्षण कर रहा हूं, और पा रहा हूं कि कुछ ES6 / 7 कोड Array.prototype.includes()इसे तोड़ता है।

मैं क्रिएट-रिएक्शन-ऐप का उपयोग कर रहा हूं , और जाहिर है कि उन्होंने बहुत सारे पॉलीफ़िल शामिल नहीं किए हैं क्योंकि हर किसी को उनकी ज़रूरत नहीं है, और वे बिल्ड टाइम को धीमा करते हैं (उदाहरण के लिए यहां और यहां देखें )। प्रलेखन (लेखन के समय) का सुझाव है:

यदि आप किसी अन्य ES6 + सुविधाओं का उपयोग करते हैं, जिन्हें रनटाइम समर्थन की आवश्यकता होती है (जैसे कि Array.from () या प्रतीक), तो सुनिश्चित करें कि आप मैन्युअल रूप से उपयुक्त पॉलीफ़िल शामिल हैं, या यह कि आप जिन ब्राउज़र को लक्षित कर रहे हैं वे पहले से ही उनका समर्थन कर रहे हैं।

तो ... 'मैन्युअल रूप से' उन्हें शामिल करने का सबसे अच्छा तरीका क्या है?

Comments

बैबल babel-polyfillएक आसान ईएस 6 + पॉलीफिल प्रदान करता है ।

— लोगनफैसमीथ

ध्यान दें कि Array.prototype.includes()वास्तव में ES7 में है, नहीं ES6

— huyz

Answer 1

अपडेट : इस सवाल / जवाब के बाद से क्रिएट-रिएक्शन-ऐप पॉलीफिल अप्रोच और डॉक्स बदल गए हैं। यदि आप पुराने ब्राउज़र जैसे ie11 का समर्थन करना चाहते हैं तो आपको अब react-app-polyfill( यहां ) शामिल करना चाहिए । हालाँकि, इसमें केवल " ... न्यूनतम आवश्यकताएं और आमतौर पर उपयोग की जाने वाली भाषा सुविधाएँ " शामिल हैं, इसलिए आप अभी भी कम आम ES6 / 7 सुविधाओं (जैसे Array.includes) के लिए नीचे दिए गए दृष्टिकोणों में से एक का उपयोग करना चाहेंगे।

---

ये दोनों काम करते हैं:

---

1. प्रतिक्रिया-ऐप-पॉलीफिल और कोर-जेएस से मैनुअल आयात

प्रतिक्रिया-ऐप-पॉलीफ़िल और कोर-जेएस स्थापित करें (3.0+):

npm install react-app-polyfill core-js या yarn add react-app-polyfill core-js

Polyfills.js नामक फ़ाइल (कुछ) बनाएँ और इसे अपनी रूट index.js फ़ाइल में आयात करें। फिर मूल प्रतिक्रिया-ऐप पॉलीफ़िल्स को आयात करें, साथ ही किसी भी विशिष्ट आवश्यक सुविधाओं को पसंद करें:

/* 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. पॉलीफ़िल सेवा

इस लाइन को index.html में जोड़कर कस्टम, ब्राउज़र-विशिष्ट पॉलीफ़िल को पुनः प्राप्त करने के लिए polyfill.io CDN का उपयोग करें :

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

ध्यान दें, मुझे Array.prototype.includesसुविधा का अनुरोध करना था क्योंकि यह डिफ़ॉल्ट सुविधा सेट में शामिल नहीं है।

Comments

मुझे शायद अधिक दानेदार मिलेंगे। कॉपी पेस्ट करने के बजाय आप core-jsव्यक्तिगत ग्लोबल पॉलीफ़िल को अपने से इंस्टॉल और आयात कर सकते हैं polyfills.js। इसके अलावा दोनों ध्वनि ठीक है।

— दान अब्रामोव

होशियार लगता है, धन्यवाद Dan। आपका मतलब है github.com/zloirock/core-js , मुझे लगता है (यानी? Npm कोर-जेएस स्थापित)?

— डैनियल लोइटर्टन

मैं IE 11 और उसके बाद के संस्करण में प्रदर्शित नहीं होने वाले नवीनतम क्रिएट-रिएक्शन-ऐप के साथ उत्पन्न ऐप के साथ एक समस्या में चल रहा था। इस समाधान के लिए धन्यवाद, मैं <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,es6"></script>(नोटिस es6) सहित और अब एक आकर्षण की तरह काम कर रहा था। मेरा मानना ​​है कि मुख्य मुद्दे को सिंबल के लिए पॉलीफ़िल की ज़रूरत थी।

— dougmacklin

@dougmacklin जस्ट एफवाईआई: यह हिट या मिस है, क्योंकि मेरे मामले में, आपके शामिल होने से मेरी IE 11 समस्याओं का समाधान नहीं हुआ। दुर्भाग्य से, IE 11 में डेवलपर कंसोल यह पता लगाने में भी बहुत अयोग्य था कि कौन सी भाषा सुविधा इसे ट्रिप कर रही है। हम बेबल-पॉलीफिल का उपयोग कर समाप्त हो गए। भारी-भरकम हाथ, मुझे पता है, लेकिन हमें प्रोडक्शन साइट को लाने की जरूरत है।

— क्लिंटन चाऊ

@ क्लिंटनचू, पूरी तरह से समझने योग्य। जब से मैंने वह टिप्पणी पोस्ट की, मैंने एक अलग IE 11 मुद्दे को ठीक करने के लिए किसी अन्य प्रोजेक्ट पर

— बैबेल

Answer 2

प्रतिक्रिया-ऐप-पॉलीफ़िल का उपयोग करें जिसमें रिएक्ट में उपयोग किए जाने वाले सामान्य ईएस 6 सुविधाओं के लिए पॉलीफ़िल हैं। और यह create-react-app का हिस्सा है । यह सुनिश्चित करें कि आप इसे README में परिभाषित इंडेक्स.जेएस की शुरुआत में शामिल करें।

Comments

मुझे लगता है कि मेरा उत्तर सबसे अच्छा है, लेकिन यह केवल इसलिए है क्योंकि यह अधिक हाल ही में है - प्रतिक्रिया-ऐप-पॉलीफ़िल केवल कुछ महीने पहले बनाई गई थी और तब तक अन्य उत्तर स्पष्ट रूप से बेहतर थे :-)

— icewhite

Hi @icewhite, मुझे लगता है कि आपने प्रतिक्रिया-ऐप-पॉलीफ़िल के बारे में थोड़ा गलत समझा। पैकेज में सिर्फ पॉलीफिल शामिल हैं: वादा, विंडो।फेक, ऑब्जेक्ट.स्साइन, सिंबल, एरे.फ्रॉम। इसमें या अन्य शामिल नहीं हैं Array.prototype.includes()।

— Huong Nguyen

Answer 3

मैंने पॉलीफ़िल डाउनलोड करने के लिए यार्न का उपयोग किया और इसे सीधे अपने 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';
...

मैं इस दृष्टिकोण को पसंद करता हूं क्योंकि मैं इस परियोजना में विशेष रूप से आयात कर रहा हूं जो मुझे चाहिए।

Comments

ऐसा कुछ प्रतीत होता है कि अब Create React App प्रोजेक्ट्स के लिए सबसे अच्छा सुझाव दिया गया है। देखें: github.com/facebook/create-react-app/blob/master/packages/…

— पीटर डब्ल्यू

Answer 4

नए Google खोज कंसोल और मेरे रिएक्ट ऐप (क्रिएट-रिएक्शन-ऐप) के साथ मेरे लायक क्या है, इसके लिए मैं परेशान था। Es6shim जोड़ने के बाद, सभी को हल किया गया था।

मैंने नीचे अपने सार्वजनिक index.html पेज में जोड़ा।

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

Answer 5

अपने बनाएँ प्रतिक्रिया ऐप परियोजना से बेदखल

बाद में आप अपने सभी पॉलीफ़िल को अपनी /config/polyfills.jsफ़ाइल में रख सकते हैं

फ़ाइल के अंत में निम्नलिखित रखें

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

वेबपैक स्वचालित रूप से आपके लिए इसे ठीक कर देगा;)

Comments

वास्तव में एक बेहतर तरीका मिला, npm स्थापित - save core-js; आयात 'कोर-जेएस / एफएन / वस्तु / मूल्य';

— वेबमास्टर

क्या आप इस बेहतर तरीके से अपना जवाब संपादित कर सकते हैं?

— मैटसिडोर

Answer 6

मुझे भी यही समस्या थी। डैनियल Loiterton से एक समाधान मेरे लिए काम नहीं किया। परंतु! मैंने कोर-जेएस से एक और आयात जोड़ा import 'core-js/modules/es6.symbol';और यह मेरे लिए IE11 पर काम करता है।