मैं बैबल-पॉलीफिल लाइब्रेरी कैसे स्थापित करूं?

Question

मैंने अभी अपने ES6 जावास्क्रिप्ट कोड को ES5 में संकलित करने के लिए Babel का उपयोग करना शुरू किया। जब मैं वादे का उपयोग करना शुरू करता हूं तो ऐसा लगता है कि यह काम नहीं कर रहा है। बाबेल वेबसाइट पॉलीफ़िल के माध्यम से वादों का समर्थन करती है।

बिना किसी भाग्य के, मैंने जोड़ने की कोशिश की:

require("babel/polyfill");

या

import * as p from "babel/polyfill";

इसके साथ मुझे अपने ऐप बूटस्ट्रैपिंग पर निम्न त्रुटि मिलेगी:

मॉड्यूल 'बैबल / पॉलीफ़िल' नहीं ढूँढ सकता

मैंने मॉड्यूल की खोज की, लेकिन ऐसा लगता है कि मैं यहां कुछ मूलभूत चीज को याद कर रहा हूं। मैंने पुराने और अच्छे ब्लूबर्ड एनपीएम को जोड़ने की भी कोशिश की, लेकिन ऐसा लग रहा है कि यह काम नहीं कर रहा है।

बबेल से पॉलीफ़िल का उपयोग कैसे करें?

Comments

npm install _name_

— डंडविस

नोट: बैबेल के पास अब इसके लिए एक अलग NPM पैकेज है: Babel -polyfill

— Stijn de Witt

@StijndeWitt आपको बस एक क्लिक बचाने के लिए, यहाँ पूर्ण संस्करण में पूर्ण README.md फ़ाइल है:

— gurghet

@gurghet हाँ, वे कुछ और जानकारी जोड़ सकते हैं जहाँ मैं सहमत हूँ :) लेकिन आप सभी को वास्तव में जानना आवश्यक है npm install --save babel-polyfillऔर require('babel-polyfill)।

— स्टिज डे विट

चूंकि आप ईएस 6 का उपयोग कर रहे हैं, इसलिए आप आयात "बैबेल-पॉलीफिल" का भी उपयोग कर सकते हैं।

— लव हसीजा

Answer 1

यह babel v6 में थोड़ा बदल गया।

डॉक्स से:

पॉलीफिल एक पूर्ण ES6 वातावरण का अनुकरण करेगा। बैबल-नोड का उपयोग करते समय यह पॉलीफिल स्वचालित रूप से लोड हो जाता है।

स्थापना:
$ npm install babel-polyfill

नोड / ब्राउजर / वेबपैक में उपयोग: पॉलीफ़िल
को शामिल करने के लिए आपको अपने आवेदन में प्रवेश बिंदु के शीर्ष पर इसकी आवश्यकता होती है।
require("babel-polyfill");

ब्राउज़र में उपयोग: एक npm रिलीज के भीतर फ़ाइल
से उपलब्ध है । यह आपके सभी संकलित बेबल कोड से पहले शामिल किया जाना चाहिए। आप या तो इसे अपने संकलित कोड में प्रस्तुत कर सकते हैं या इसे पहले इसमें शामिल कर सकते हैं।dist/polyfill.jsbabel-polyfill<script>

नोट: requireब्राउजर आदि के माध्यम से ऐसा न करें, उपयोग करें babel-polyfill।

Comments

मुझे अभी भी पूरी तरह से यकीन नहीं है कि पॉलीफिल की जरूरत कब होगी। ES6 मॉड्यूल सिर्फ babel.js के साथ क्यों काम करते हैं, लेकिन पॉलीफ़िल के Array.protorype.findIndex()बिना काम नहीं करता है और जब यह ट्रांसप्लीनिंग होता है तो बैबल अपवाद नहीं उठाएगा? क्या यह एक Polyfill ™ की प्रकृति है?

— 15

मूल रूप से बैबल पॉलीफिल सिर्फ github.com/facebook/regenerator और github.com/zloirock/core-js संयुक्त है। यह जानने के लिए कि क्या आपको वास्तव में पॉलीफिल्स की जरूरत है, उन 2 रिपॉजिट्स को देखें।

— vdclouis

मुझे लगता है कि कारण एक काम करता है और दूसरा यह नहीं है कि ट्रांसफरिंग के दौरान बैबेल, एक निश्चित स्तर के समर्थन के साथ काल्पनिक जेएस इंजन को लक्षित करता है। वास्तविक ब्राउज़र इस काल्पनिक इंजन की तुलना में अधिक या कम समर्थन कर सकते हैं। व्यवहार में, मुझे लगता है कि वे जिस काल्पनिक ब्राउज़र को लक्षित करते हैं, वह IE10 के स्तर पर कहीं है, इसलिए पुराने ब्राउज़र में कुछ समस्याएँ हो सकती हैं। एक अलग पॉलीफ़िल में इसके लिए फ़िक्सेस डालकर उन्होंने निर्णय छोड़ दिया कि क्या आप ऐसे पुराने ब्राउज़र का समर्थन करना चाहते हैं। इसके साथ jQuery का एक बिट 1.0 शाखा है जो करता है, और IE8 का समर्थन नहीं करने वाली 2.0 शाखा। @ रीमबर्ग

— डे विट

@dougmacklin अगर findIndex आपकी जरूरत का एकमात्र पॉलीफ़िल है, तो आप बस उस कोड में कहीं एक को शामिल कर सकते हैं।

— पॉलीफ़िल के

@vdclouis, आप उस पॉलीफ़िल कोड को वेबपैक के माध्यम से कैसे शामिल करेंगे ताकि यह परियोजना में हर जगह उपलब्ध हो?

— डगमगलिन

Answer 2

कोलाहल डॉक्स इस का वर्णन बहुत संक्षेप में:

बैबेल में एक पॉलीफ़िल शामिल है जिसमें एक कस्टम रीजनरेटर रनटाइम और कोर शामिल हैं।

यह एक पूर्ण ES6 वातावरण का अनुकरण करेगा। यह पॉलीफ़िल बबल-नोड और बैबल / रजिस्टर का उपयोग करते समय स्वचालित रूप से लोड होती है।

सुनिश्चित करें कि आपको अपने आवेदन में प्रवेश-बिंदु पर इसकी आवश्यकता है, इससे पहले कि कुछ और कहा जाए। यदि आप वेबपैक जैसे उपकरण का उपयोग कर रहे हैं, तो यह बहुत सरल हो जाता है (आप इसे बंडल में शामिल करने के लिए वेबपैक बता सकते हैं)।

यदि आप एक उपकरण का उपयोग कर रहे हैं जैसे gulp-babelया babel-loader, आपको babelपॉलीफ़िल का उपयोग करने के लिए पैकेज को भी स्थापित करना होगा ।

यह भी ध्यान दें कि वैश्विक स्कोप (पॉलीफ़िल और लाइक) को प्रभावित करने वाले मॉड्यूल के लिए, आप अपने मॉड्यूल में अप्रयुक्त चर से बचने के लिए एक ट्रिक आयात का उपयोग कर सकते हैं:

import 'babel/polyfill';

Comments

बस एक नोट जोड़ने के लिए, और अगर यह पूरी तरह से सही है, तो मुझे 100% यकीन नहीं है, लेकिन मैंने बस import 'babel-core/polyfill'स्थापित किए बिना उपयोग करने का प्रयास babelकिया और यह ठीक काम किया।

— नाथन लुटरमैन

ज़ैमज़ , मुझे लगता है कि आपने पहले से ही बाबेल स्थापित किया है, इसलिए import 'babel-core/polifyll'काम करता है। मैंने इसे स्थापित किए बिना कोशिश की babelऔर यह मेरे लिए काम नहीं किया। वैसे: ssube सलाह काम करती है।

— WebBrother

वेबपैक का उपयोग करते समय आप इसे कहाँ शामिल करते हैं?

— theptrk

वेब पेज का उपयोग करते हुए, आप बस इसे एक मॉड्यूल के रूप में आयात कर सकते हैं, क्योंकि वेबपैक npm संकुल को आयात करने की अनुमति देता है। कर्म के लिए, आप इसे परीक्षण से पहले शामिल किए जाने वाली फ़ाइल के रूप में सेट करते हैं ।

— ssube

धन्यवाद, शायद मेरे पास एक अलग संस्करण था, लेकिन मुझे इसके बजाय babel-core का उपयोग करना पड़ा => "आयात 'babel-core /

— ffill

Answer 3

बाबेल संस्करण 7 के लिए, यदि आप पॉलीफ़िल को शामिल करने के लिए @ बैबल / प्रीसेट-एनवी का उपयोग कर रहे हैं, तो आपको बस इतना करना होगा कि आप अपने बैबल कॉन्फ़िगरेशन में 'उपयोग' के मान के साथ एक ध्वज 'यूट्यूबिल्टइन्स' जोड़ें। आपके ऐप के प्रवेश बिंदु पर पॉलीफिल की आवश्यकता या आयात करने की कोई आवश्यकता नहीं है।

निर्दिष्ट इस ध्वज के साथ, babel @ 7 अनुकूलन करेगा और केवल वही पॉलीफ़िल शामिल करेगा जिसकी आपको आवश्यकता है।

स्थापना के बाद इस ध्वज का उपयोग करने के लिए:

npm install --save-dev  @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

बस झंडा जोड़ें:

useBuiltIns: "usage" 

"babel / env" सेक्शन के अंतर्गत "babel.config.js" (बाबेल @ 7 के लिए भी नया) नामक आपकी बैबल कॉन्फ़िगरेशन फ़ाइल में:

// file: babel.config.js

module.exports = () => {
   const presets = [
      [
         "@babel/env", 
         { 
             targets: { /* your targeted browser */ },
             useBuiltIns: "usage"  // <-----------------*** add this
         }
      ]
   ];

   return { presets };
};

संदर्भ:

• उपयोग # polyfill
• कोलाहल-polyfill # उपयोग में नोड browserify-webpack
• कोलाहल-पूर्व निर्धारित-env # usebuiltins

---

अद्यतन अगस्त 2019:

बबेल की रिहाई के साथ 7.4.0 (19 मार्च, 2019) @ बैबल / पॉलीफ़िल को पदावनत कर दिया जाता है। @ बेब / पॉलीफ़िल स्थापित करने के बजाय, आप कोर-जेएस स्थापित करेंगे:

npm install --save core-js@3

corejsआपके babel.config.js में एक नई प्रविष्टि जोड़ी गई है

// file: babel.config.js

module.exports = () => {
   const presets = [
      [
         "@babel/env", 
         { 
             targets: { /* your targeted browser */ },
             useBuiltIns: "usage",
             corejs: 3  // <----- specify version of corejs used
         }
      ]
   ];

   return { presets };
};

उदाहरण देखें: https://github.com/ApolloTang/stackoverflow-eg--babel-v7.4.0-polyfill-w-core-v3

संदर्भ:

• 7.4.0 का विमोचन: कोर-जेएस 3, स्थिर निजी तरीके और आंशिक अनुप्रयोग
• Core-js @ 3, कोलाहल और भविष्य पर एक नज़र

Comments

क्या आप इसका उत्पादन env में करते हैं? कोई जोखिम?

— रॉय

useBuiltIns: "usage"मेरी तरफ से काम नहीं करता है। यह सिर्फ बंडल में किसी भी पॉलीफ़िल को शामिल नहीं करता है (उदाहरण: मैं जनरेटर का उपयोग करता हूं और एक त्रुटि प्राप्त करता है "रेजिनरेटररंटाइम को परिभाषित नहीं किया गया है")। कोई विचार?

— वेबब्रॉथर

@WebBrother, मेरे लिए काम करता है ... उदाहरण के लिए देखें: github.com/ApolloTang/stackoverflow-eg--babel-polyfill

— अपोलो

@ रोया, मैं वास्तव में babel @ 6 से babel @ 7 तक एक एंटरप्राइज़ प्रोजेक्ट को स्थानांतरित करने की प्रक्रिया में हूं ताकि मैं @ babel / प्रीसेट-टाइपस्क्रिप्ट का उपयोग कर सकूं। यह अभी भी एक कार्य प्रगति पर है, लेकिन मैं बेबल आधिकारिक दस्तावेज से निर्देश का पालन कर रहा हूं (मेरे उत्तर में संदर्भ लिंक देखें)। अब तक सब कुछ काम कर रहा है, लेकिन मैंने अपना माइग्रेशन / अपग्रेड काम क्यूए में नहीं भेजा है, अगर कोई समस्या आती है तो मैं यहां पोस्ट करूंगा।

— अपोलो

Answer 4

यदि आपका package.json निम्नलिखित जैसा कुछ दिखता है:

  ...
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-eslint": "^6.0.4",
    "babel-polyfill": "^6.8.0",
    "babel-preset-es2015": "^6.6.0",
    "babelify": "^7.3.0",
  ...

और आपको Cannot find module 'babel/polyfill'त्रुटि संदेश मिलता है , तो आपको शायद अपने आयात विवरण को बदलने की आवश्यकता है:

import "babel/polyfill";

सेवा:

import "babel-polyfill";

और सुनिश्चित करें कि यह किसी भी अन्य importकथन से पहले आता है (जरूरी नहीं कि आपके आवेदन के प्रवेश बिंदु पर)।

संदर्भ: https://babeljs.io/docs/usage/polyfill/

Comments

इस उत्तर में बाबेल-पॉलीफ़िल पैकेज को 'देव-निर्भरता' के अंतर्गत सूचीबद्ध किया गया है। ऐसा करने से बेबिल-पॉलीफिल को तैनाती में शामिल नहीं किया जाएगा। आपको डी-फ्लैग के साथ बैबल-पॉलीफिल स्थापित नहीं करना चाहिए, लेकिन -एस फ्लैग के साथ इसलिए यह 'निर्भरता' के तहत सूचीबद्ध है, और इसलिए आपकी तैनाती में शामिल है।

— अपोलो

Answer 5

सबसे पहले, स्पष्ट उत्तर जो किसी ने प्रदान नहीं किया है, आपको अपने आवेदन में बैबेल को स्थापित करने की आवश्यकता है:

npm install babel --save

(या babel-coreयदि आप इसके बजाय चाहते हैं require('babel-core/polyfill'))।

इसके अलावा, मेरे पास एक निर्माण कार्य के रूप में अपने es6 और jsx को स्थानांतरित करने का एक गंभीर कार्य है (अर्थात मैं उपयोग नहीं करना चाहता हूं babel/register, यही वजह है कि मैं babel/polyfillसीधे पहली जगह का उपयोग करने की कोशिश कर रहा हूं), इसलिए मैं चाहूंगा @ ssube के उत्तर के इस भाग पर अधिक जोर दें:

यह सुनिश्चित करने के लिए कि आपके आवेदन में प्रवेश-बिंदु पर आपकी आवश्यकता है, इससे पहले कि कुछ और कहा जाए

मैं कुछ अजीब मुद्दों में भाग गया, जहां मैं babel/polyfillकुछ साझा पर्यावरण स्टार्टअप फ़ाइल से आवश्यकता की कोशिश कर रहा था और मुझे वह त्रुटि मिली जिसे उपयोगकर्ता ने संदर्भित किया था - मुझे लगता है कि इसके साथ कुछ ऐसा करना पड़ सकता है कि कैसे बेबल ऑर्डर आयात की आवश्यकता होती है, लेकिन मैं पुन: उत्पन्न करने में असमर्थ हूं अभी। वैसे भी, import 'babel/polyfill'मेरे क्लाइंट और सर्वर स्टार्टअप स्क्रिप्ट में पहली पंक्ति के रूप में आगे बढ़ने से समस्या ठीक हो गई।

ध्यान दें कि यदि आप इसके बजाय उपयोग करना चाहते हैं तो require('babel/polyfill')मुझे यकीन है कि आपके सभी अन्य मॉड्यूल लोडर के बयानों की भी आवश्यकता होगी और आयात का उपयोग नहीं करना चाहिए - दोनों को मिलाने से बचें। दूसरे शब्दों में, यदि आपके स्टार्टअप स्क्रिप्ट में कोई आयात कथन है, तो import babel/polyfillअपनी स्क्रिप्ट में पहली पंक्ति बनाएं बजाय require('babel/polyfill')।

Comments

आप न चलाने की जरूरत sudoNPM साथ docs.npmjs.com/getting-started/fixing-npm-permissions

— व्लादिमीर Starkov

Answer 6

बैबल-पॉलीफिल आपको सिंटैक्स परिवर्तनों से परे ES6 सुविधाओं के पूर्ण सेट का उपयोग करने की अनुमति देता है। इसमें नई बिल्ट-इन ऑब्जेक्ट्स जैसे प्रॉमिस और वीकैप जैसे फीचर्स शामिल हैं, साथ ही Array.from या Object.assign जैसे नए स्टैटिक तरीके भी शामिल हैं।

बैबेल-पॉलीफ़िल के बिना, बैबेल आपको केवल तीर कार्यों, विनाशकारी, डिफ़ॉल्ट तर्क और ईएस 6 में पेश किए गए अन्य सिंटैक्स-विशिष्ट सुविधाओं जैसी सुविधाओं का उपयोग करने की अनुमति देता है।

https://www.quora.com/What-does-babel-polyfill-do

https://hackernoon.com/polyfills-everything-you-ever-wanted-to-know-or-maybe-a-bit-less-7c8de164e423

Answer 7

जैसे बाबेल डॉक्स में कहता है , बाबेल के लिए> 7.4.0 मॉड्यूल @ बैबेल / पॉलीफ़िल को हटा दिया जाता है , इसलिए यह सीधे कोर-जेएस और पुनर्योजी-रनटाइम पुस्तकालयों का उपयोग करने की सिफारिश की जाती है जो पहले @ बैबल / पॉलीफ़िल में शामिल थे।

तो यह मेरे लिए काम किया:

npm install --save core-js@3.6.5
npm install regenerator-runtime

फिर अपनी आरंभिक js फ़ाइल में बहुत ऊपर जोड़ें:

import 'core-js/stable';
import 'regenerator-runtime/runtime';