Get started with Babel 7

Sep 14, 2025

कैसे करना है

पारिस्थितिक तंत्र की चौड़ाई के कारण जावास्क्रिप्ट अद्वितीय है। जबकि नए मानक सिंटेक्टिक चीनी जोड़ते हैं, उन्हें ब्राउज़र पर समर्थित करने में समय लगता है। बेबेल स्वचालित ट्रांसपिलेशन के माध्यम से इस समस्या के आसपास काम करता है।

उत्पाद के पीछे विचार सरल है: बेबेल ES6 या ES7 कोड में लेता है और इम्यूलेशन कोड के साथ नए वाक्य-संबद्ध तत्वों को प्रतिस्थापित करता है। इसका आउटपुट क्लासिक जावास्क्रिप्ट सिंटैक्स की पुष्टि करता है और इंटरनेट एक्सप्लोरर जैसे पुराने ब्राउज़र पर चलता है।

बेबेल की प्रारंभिक रिलीज ने तूफान से दुनिया को लिया। पहले दिखाई देने के तुरंत बाद, प्रतिक्रिया, वू और एम्बर जैसे विभिन्न ढांचे ने इसे गले लगा लिया। डेवलपर्स अक्सर यह जानने के बिना उत्पाद का उपयोग करते हैं कि यह पृष्ठभूमि में काम करता है - एक से अधिक लोकप्रिय एनपीएम परियोजना में बेबेल पर निर्भरता है।

• एक ऐप कैसे बनाएं

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

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

क्या आप अपनी प्रक्रिया को व्यवस्थित करने के लिए कुछ उपकरण चाहेंगे? सबसे अच्छा करने के लिए हमारी गाइड वेबसाइट निर्माता मदद करेगा। दीर्घकालिक समर्थन चाहते हैं? सही हो जाओ वेब होस्टिंग सर्विस।

01. संस्करण चेक

बेबेल आमतौर पर नोड रनटाइम पर्यावरण में रहता है। उपयोग किए गए संस्करणों की जांच करके शुरू करें। आउटपुट निम्नलिखित लेख बनाने के लिए उपयोग किए जाने वाले उबंटू 14.04 वर्कस्टेशन पर पाए गए संस्करण राज्य को प्रदान करता है। यह पैर्डेंट्री नहीं है - इस चरण के साथ आंकड़ा बताता है कि बेबेल टीम ने कुछ नोड.जेएस संस्करणों के लिए समर्थन छोड़ दिया।

 तमन @ तमन-थिंकपैड: ~ $ नोड - विजन
v8.14.0
तमन @ तमन-थिंकपैड: ~ $ एनपीएम - विजन
6.4.1 

02. पैकेज नामों का परिवर्तन

संस्करण 7 में एक ब्रेकिंग परिवर्तन में बेबेल पैकेज को अपने नामस्थान में ले जाया गया है। पुराने पैकेज को विभिन्न भंडारों से हटाया नहीं गया था। यह महत्वपूर्ण है, क्योंकि विरासत पैकेज नामों का उपयोग इस चरण के साथ आकृति में दिखाए गए स्थिति की ओर जाता है।

 तमन @ तमन-थिंकपैड: ~ / वर्कस्पेसबी 7 $ एनपीएम
स्थापित करें --सेव-देव @ बेबेल / कोर @ बेबेल / सीएलआई @
बेबेल / प्रीसेट-एनवी @ बेबेल / नोड
। । ।
+ @ बेबेल / कोर @ 7.2.0
+ @ बेबेल / नोड @ 7.2.0
+ @ बेबेल / सीएलआई @ 7.2.0
+ @ बेबेल / प्रीसेट-एनवी @ 7.2.0 

03. एक बिल्ड एक्शन जोड़ें

ऊपर दिए गए चरण मानते हैं कि आप एक एनपीएम परियोजना के अंदर काम करते हैं। उस स्थिति में, बिल्ड एक्शन के माध्यम से बेबेल चलाना आसान है। खुला हुआ Package.json और इसे नीचे दिए गए कोड में दिखाए गए अनुसार संशोधित करें:

 {
। । ।
"मुख्य": "index.js",
"स्क्रिप्ट्स": {
"टेस्ट": "इको \" त्रुटि: कोई परीक्षण नहीं
निर्दिष्ट \ "& amp; & amp; बाहर निकलें 1",
"बिल्ड": "बेबेल इंडेक्स.जेएस-डी लिब"

}, 

04. हाथ से ट्रांसपाइल कोड

काम करने के लिए बेबेल डालने के लिए बिल्ड एक्शन से फायरिंग शामिल है। यह एनपीएम रन कमांड के माध्यम से सबसे अच्छा पूरा किया जाता है। डी मूल्य बेबेल को सूचित करता है कि परिणामों को इसमें रखा जाना चाहिए उदारीकरण फ़ोल्डर - इस चरण के साथ आकृति से पता चलता है कि फ़ोल्डर फ्लाई पर बनाई गई है।

 तमन @ तमन-थिंकपैड: ~ / वर्कस्पेसबी 7 $ एनपीएम
निर्माण
& gt; [email protected] बिल्ड / होम / तमन /
वर्कस्पेसबी 7
& gt; बेबेल इंडेक्स.जेएस-डी लिब
सफलतापूर्वक बाबेल के साथ 1 फाइल संकलित की। 

05. कॉन्फ़िगरेशन का एक प्रश्न

आगे कॉन्फ़िगरेशन विकल्पों के बिना बेबेल का आह्वान ट्रांसपिलेशन सक्षम नहीं करता है। कोड को केवल तभी ट्रांसपिल किया जा सकता है जब ढांचे को लक्ष्य वातावरण के बारे में अधिक जानकारी मिलती है। यह एक कमांड लाइन पैरामीटर के माध्यम से किया जा सकता है, या एक फाइल कहा जाता है .babelrc प्रोजेक्ट रूट में।

06. BabelRC को कॉन्फ़िगर करें

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

 {
"प्रीसेट": ["@ बेबेल / प्रीसेट-एनवी"]
} 

07. एक परीक्षण ड्राइव के लिए समय

कुछ लाइव कोड के खिलाफ प्रोग्राम का परीक्षण करने के लिए इंडेक्स.जेएस में कुछ नई आयु जावास्क्रिप्ट जोड़ें। इस चरण के साथ कोड विरासत ब्राउज़र पर काम नहीं करेगा - जब किया जाता है, तो निहित समारोह को प्रतिस्थापित किया जाता है साधारण घोषणा, जैसा कि आंकड़े में दिखाया गया है।

समारोह Tamstest () {
[1, 2, 3] .map ((n) = & gt; n + 1);
} 

08. लक्ष्यीकरण समायोजित करें

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

 {
"प्रीसेट्स": [
[
"@ बेबेल / प्रीसेट-एनवी",
{
"लक्ष्य": {
"क्रोम": "58",
"यानी": "11"
}
}
]
]
} 

09. उन्नत लक्ष्यीकरण

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

नाम केस असंवेदनशील हैं:

• एंड्रॉयड एंड्रॉइड वेबव्यू के लिए।
• Baidu Baidu ब्राउज़र के लिए।
• ब्लैकबेरी या बी बी ब्लैकबेरी ब्राउज़र के लिए।
• क्रोम Google क्रोम के लिए।
• क्रोमंड्रॉइड या and_chr एंड्रॉइड के लिए क्रोम के लिए।
• एज माइक्रोसॉफ्ट एज के लिए।
• इलेक्ट्रॉन इलेक्ट्रॉन ढांचे के लिए। इसे क्रोम संस्करण में परिवर्तित कर दिया जाएगा।
• एक्सप्लोरर या अर्थात इंटरनेट एक्सप्लोरर के लिए।
• ExploreMobile या ye_mob इंटरनेट एक्सप्लोरर मोबाइल के लिए।
• फ़ायर्फ़ॉक्स या सीमांत बल मोज़िला फ़ायरफ़ॉक्स के लिए।
• फ़ायरफ़ॉक्स एंड्रॉइड या and_ff एंड्रॉइड के लिए फ़ायरफ़ॉक्स के लिए।
• आईओएस या ios_saf आईओएस सफारी के लिए।
• नोड ओपेरा के लिए node.js.opera के लिए।
• ऑपेरा मिनी या OP_MINI ओपेरा मिनी के लिए।
• अव्यवस्था या OP_MOB ओपेरा मोबाइल के लिए।
• Qqandroid या and_qq एंड्रॉइड के लिए क्यू क्यू ब्राउज़र के लिए।
• सफारी डेस्कटॉप सफारी के लिए।
• सैमसंग सैमसंग इंटरनेट के लिए।
• Ucandroid या and_uc एंड्रॉइड के लिए यूसी ब्राउज़र के लिए।

10. उन्नत लक्ष्यीकरण, भाग दो

BrowserList भी उन्नत क्वेरी ले सकता है। इसका मुखपृष्ठ कॉन्फ़िगरेशन विकल्पों को सूचीबद्ध करता है, लगभग सभी को संशोधित करके बेबेल के अंदर भी इस्तेमाल किया जा सकता है Babelrc । यदि आपके वर्कस्टेशन में एनपीएक्स स्थापित है तो प्रश्नों का मूल्यांकन स्थानीय रूप से किया जा सकता है।

 {
"लक्ष्य": "& gt; 0.25%, मृत नहीं"
} 

11. स्वचालित ट्रांसपिलेशन

हाथ से बेबेल को आमंत्रित करने के लिए जल्दी से थकाऊ हो जाता है। नोडमैन उपयोगिता फाइल सिस्टम संसाधनों पर नज़र रखती है और आदेशों को दूर करने के रूप में कमांड बंद कर देता है। सिद्धांत रूप में, नोडामॉन समर्थन को जोड़ने के लिए एक छोटे से परिवर्तन के माध्यम से संभाला जाता है Package.json ।

 {
"नाम": "वर्कस्पाइब 7",
। । ।
"मुख्य": "index.js",
"स्क्रिप्ट्स":
{
"स्टार्ट": "नोडामॉन --Exec Babel-Node
index.js ", 

12. उपस्थिति के लिए जाँच करें

कुछ कार्यस्थान हैं नोडमैन वैश्विक स्तर पर स्थापित। यदि ऐसा नहीं है, तो प्रोग्राम को आमंत्रित करना नीचे दिखाए गए एक के समान त्रुटि संदेश उत्पन्न करेगा। सौभाग्य से, तैनात नोडमैन के माध्यम से आसानी से पूरा किया जाता है एनपीएम स्थापित करें आदेश।

 तमन @ तमन-थिंकपैड: ~ / वर्कस्पेसबी 7 $ एनपीएम
स्थापित करें --सेव-देव नोडामॉन 

13. कार्यक्षमता की जाँच करें

दागना एनपीएम शुरू टर्मिनल विंडो में और की सामग्री को बदलने के लिए आगे बढ़ें index.js एक संपादक के साथ जीएडिट या [25 9] विजुअल स्टूडियो कोड

। बचत के बाद, नोडमैन आउटपुट स्थिति जानकारी होगी।

 [नोडमैन] परिवर्तनों के कारण पुनरारंभ करना ...
[नोडमॉन] `babel-node index.js 'शुरू करना
[नोडामोन] स्वच्छ निकास - परिवर्तनों की प्रतीक्षा कर रहा है
पुनरारंभ करने से पहले 

14. ट्रांसपिलेशन को ठीक करें

जबकि नोडमैन इस बिंदु पर नि: शुल्क रूप से काम करना चाहिए, की सामग्री index.js फ़ाइल जो में पाई जाती है उदारीकरण अपडेट न करें। यह एक अच्छी तरह से होता है बेबेल-नोड - यह डिस्क को ट्रांसपिल्ड फ़ाइलों को नहीं करता है। इसके बजाय नोड सीएलआई के एक संशोधित संस्करण को आग लगती है, जो ट्रांसपिल्ड फाइलों के साथ काम करती है।

15. ट्रांसपाइल कोड प्रोग्रामेटिक रूप से

बेबेल कमांड लाइन पर काम करने के लिए सीमित नहीं है। यदि सही पैकेज स्थापित हैं, तो कोड को किसी अन्य प्रोग्राम से भी ट्रांसपिल किया जा सकता है। इस चरण के साथ स्निपेट एक इनपुट स्ट्रिंग में बुनियादी परिवर्तनों का एक सेट लागू करता है। ध्यान रखें कि कॉन्फ़िगरेशन सेटिंग्स, आमतौर पर, एक से प्राप्त की जाती हैं Babelrc फ़ाइल।

 var babel = आवश्यकता ("@ babel / core");
"@ बेबेल / कोर" से आयात {ट्रांसफॉर्म};
"@ बेबेल / कोर" से बेबेल के रूप में आयात करें;
babel.transform ("कोड ();", विकल्प,
समारोह (गलती, परिणाम) {
परिणाम। कोड;
परिणाम। एमएपी;
परिणाम।
}); 

16. संपूर्ण फाइलों को ट्रांसपाइल करें

स्रोत कोड आमतौर पर स्ट्रिंग चर में संग्रहीत नहीं होता है। बेबेल एपीआई फाइल से संबंधित फ़ंक्शंस के सेट के माध्यम से इसके लिए खाते हैं, जो एक फ़ाइल नाम के साथ एक चर के लिए इनपुट स्ट्रिंग से गुजरता है। परिणाम, हालांकि, सामान्य जावास्क्रिप्ट चर के रूप में वापस आते हैं।

 babel.transformfile ("filename.js", विकल्प,
समारोह (गलती, परिणाम) {
परिणाम; // = & gt; {कोड, मानचित्र, एएसटी}
}
); 

17. सिंक और async

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

18. व्यक्तिगत प्लगइन्स के बारे में जानें

क्या आपको कभी भी इस बारे में सोचने के बारे में सोचें कि पृष्ठभूमि में क्या होता है, बस जाएं [2 9 9] यह पन्ना

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

19. स्ट्रिप आउट टाइपस्क्रिप्ट विनिर्देश

बेबेल नई आयु जावास्क्रिप्ट तत्वों को स्थानांतरित करने तक ही सीमित नहीं है। उत्पाद में एक फीचर-बाधित टाइपस्क्रिप्ट इंजन होता है। यह टाइपिंग जानकारी को स्ट्रिप करता है और उन्नत तत्वों को प्रतिस्थापित करता है। अफसोस की बात है, बेबेल टाइप-चेकिंग नहीं करता है - यह टाइपस्क्रिप्ट भाषा के सबसे महत्वपूर्ण लाभों में से एक को समाप्त करता है।

 {
"प्रीसेट": ["@ बेबेल / प्रीसेट-टाइपस्क्रिप्ट"]
} 

20. बेबेल ऑनलाइन चलाएं

जबकि ट्रांसप्लेशन ऑपरेशन आमतौर पर आसानी से काम करते हैं, कभी-कभी समस्याएं होती हैं। उस मामले में, बेबेल मददगार है। यह आपके वर्कस्टेशन के ब्राउज़र में बेबेल चलाता है और एक दूसरे के बगल में इनपुट और आउटपुट दिखाता है।

21. दर्द बिंदुओं के बारे में जानें

हमारे परिचय ने समझाया कि बेबेल विभिन्न परियोजनाओं में व्यापक उपयोग को देखता है। बेबेल की रखरखाव टीम संस्करण उन्नयन को सरल बनाता है विस्तृत परिवर्तन लॉग । यदि आप बेबेल प्रोग्रामेटिक रूप से उपयोग करते हैं, तो परामर्श करना न भूलें एपीआई अपग्रेड गाइड ।

यह लेख मूल रूप से क्रिएटिव वेब डिज़ाइन पत्रिका के अंक 283 में प्रकाशित किया गया था वेब डिजाइनर । यहां अंक 283 खरीदें या वेब डिजाइनर की सदस्यता लें ।

संबंधित आलेख:

• तेजी से, हल्का जावास्क्रिप्ट कोड कैसे करें
• 5 भयानक जावास्क्रिप्ट एपीआई
• 27 शीर्ष श्रेणी की वेबसाइट टेम्पलेट्स

[36 9]

---

कैसे करना है - सर्वाधिक लोकप्रिय लेख

अगली जेएस / प्रतिक्रिया के लिए एक एसईओ-फ्रेंडली हेड घटक बनाएं

कैसे करना है Sep 14, 2025

(छवि क्रेडिट: पेक्सल्स पर नकारात्मक स्थान) [1 9] ..

---

Chiaroscuro कला: एक चरण-दर-चरण गाइड

कैसे करना है Sep 14, 2025

Chiaroscuro कला बनाना गहराई बनाने के लिए प्रकाश और छाया की संरचना का उपयोग करने क..

---

How to model concept art in Cinema 4D

कैसे करना है Sep 14, 2025

कुछ साल पहले, ल्यूसिड गेम्स के आर्ट डायरेक्टर ने �..

---

How to correct a flawed composition

कैसे करना है Sep 14, 2025

मैंने पिछले साल इस समय के आसपास अपनी मूल चित्रकला बनाई थी, जिसे डोंगबियाओ..

---

Level up your VR art

कैसे करना है Sep 14, 2025

मैंने एक साल पहले अपने वीआर हेडसेट प्राप्त करने क..

---

How to create a dashboard app with React

कैसे करना है Sep 14, 2025

2 का पृष्ठ 1: प्रतिक्रिया में एक डैशबोर्ड..

---

How to design graphic figures

कैसे करना है Sep 14, 2025

मेरे चित्रण कैरियर के पहले के वर्षों में मैं यथार..

---

Create sets of product icons in Illustrator

कैसे करना है Sep 14, 2025

[1 1] आइकन को बढ़ाने के लिए शीर्ष दाईं ओर स्..

---

श्रेणियाँ

• एआई और मशीन लर्निंग
• AirPods
• वीरांगना
• अमेज़ॅन एलेक्सा और अमेज़ॅन इको
• अमेज़न एलेक्सा और अमेज़न इको
• अमेज़न आग टीवी
• अमेज़न प्रधानमंत्री वीडियो
• एंड्रॉयड
• Android फ़ोन और टेबलेट
• Android फोन और टैबलेट
• Android टीवी
• एप्पल
• Apple App स्टोर
• एप्पल HomeKit और एप्पल HomePod
• एप्पल संगीत
• एप्पल टीवी
• एप्पल घड़ी
• एप्लिकेशन और वेब Apps
• ऐप्स और वेब ऐप्स
• ऑडियो
• Chrome बुक और क्रोम ओएस
• क्रोमबुक और क्रोम ओएस
• Chromecast
• बादल और इंटरनेट
• बादल और इंटरनेट
• क्लाउड और इंटरनेट
• कंप्यूटर हार्डवेयर
• कंप्यूटर इतिहास
• गर्भनाल काटने और स्ट्रीमिंग
• कॉर्ड कटिंग और स्ट्रीमिंग
• कलह
• डिज्नी +
• DIY
• बिजली के वाहन
• EReaders
• अनिवार्य
• व्याख्यार
• फेसबुक
• जुआ
• जनरल
• Gmail
• गूगल
• गूगल सहायक और गूगल नेस्ट
• Google सहायक और Google नेस्ट
• गूगल क्रोम
• गूगल डॉक्स
• को Google डिस्क
• गूगल मैप्स
• गूगल प्ले स्टोर
• Google शीट
• Google स्लाइड
• गूगल टीवी
• हार्डवेयर
• एचबीओ मैक्स
• कैसे करना है
• Hulu
• Instagram
• इंटरनेट स्लैंग और लघुरूप
• IPhone और IPad
• Kindle
• लिनक्स
• मैक
• रखरखाव और अनुकूलन
• माइक्रोसॉफ्ट एज
• माइक्रोसॉफ्ट एक्सेल
• माइक्रोसॉफ्ट ऑफिस
• माइक्रोसॉफ्ट आउटलुक
• Microsoft PowerPoint
• ​​माइक्रोसॉफ्ट टीमें
• माइक्रोसॉफ्ट वर्ड
• मोज़िला फ़ायरफ़ॉक्स
• Netflix
• Nintendo स्विच
• पैरामाउंट +
• पीसी गेमिंग
• मयूर
• फोटोग्राफी
• फ़ोटोशॉप
• प्लेस्टेशन
• गोपनीयता और सुरक्षा
• निजता एवं सुरक्षा
• गोपनीयता और सुरक्षा
• उत्पाद मवेशियों को इकट्ठा
• प्रोग्रामिंग
• रास्पबेरी Pi
• Reddit
• Roku
• सफारी
• सैमसंग फ़ोन और टेबलेट
• सैमसंग फोन और टैबलेट
• स्लैक
• स्मार्ट होम
• Snapchat
• सामाजिक मीडिया
• अंतरिक्ष
• Spotify
• Tinder
• समस्या निवारण
• टीवी
• ट्विटर
• वीडियो गेम
• आभासी वास्तविकता
• के VPN
• वेब ब्राउज़र
• WhatsApp
• वाईफ़ाई और रूटर
• वाईफाई और राउटर
• विंडोज
• Windows 10
• विंडोज 11
• विंडोज 7
• एक्सबॉक्स
• यू ट्यूब के यूट्यूब टीवी
• YouTube और YouTube टीवी
• ज़ूम
• Explainers