खोज…
परिचय
ट्रांसप्लिंग कुछ प्रोग्रामिंग भाषाओं की व्याख्या करने और एक विशिष्ट लक्ष्य भाषा में अनुवाद करने की प्रक्रिया है। इस संदर्भ में, ट्रांसप्लिंग संकलन-से-जेएस भाषाओं को ले जाएगा और उन्हें जावास्क्रिप्ट की लक्षित भाषा में अनुवाद करेगा।
टिप्पणियों
Transpiling स्रोत कोड को स्रोत कोड में बदलने की प्रक्रिया है, और यह जावास्क्रिप्ट विकास में एक सामान्य गतिविधि है।
सामान्य जावास्क्रिप्ट अनुप्रयोगों (क्रोम, फ़ायरफ़ॉक्स, नोडज, आदि) में उपलब्ध सुविधाएँ अक्सर नवीनतम ECMAScript विनिर्देशों (ES6 / ES2015, ES7 / ES2016, आदि) से पिछड़ जाती हैं। एक बार विनिर्देशन स्वीकृत हो जाने के बाद, यह निश्चित रूप से जावास्क्रिप्ट अनुप्रयोगों के भविष्य के संस्करणों में मूल रूप से उपलब्ध होगा।
नए जावास्क्रिप्ट रिलीज के लिए इंतजार करने के बजाय, इंजीनियर ऐसे कोड लिखना शुरू कर सकते हैं जो भविष्य में (भविष्य में प्रूफिंग) एक कंपाइलर का उपयोग करके नए विनिर्देशों के लिए लिखे गए कोड को मौजूदा अनुप्रयोगों के साथ संगत कोड में परिवर्तित करने के लिए उपयोग करेंगे। आम ट्रांसपैरर्स में बाबेल और Google ट्रेसुर शामिल हैं।
ट्रांसपिलर्स का उपयोग टाइपस्क्रिप्ट या कॉफ़ीस्क्रिप्ट जैसी किसी अन्य भाषा से नियमित, "वेनिला" जावास्क्रिप्ट में बदलने के लिए भी किया जा सकता है। इस मामले में, ट्रांसपिलिंग एक भाषा से दूसरी भाषा में परिवर्तित हो जाती है।
ट्रांसप्लिंग का परिचय
उदाहरण
ES6 / ES2015 से ES5 ( बैबल के माध्यम से) :
यह ES2015 सिंटेक्स
// ES2015 arrow function syntax
[1,2,3].map(n => n + 1);
इसकी व्याख्या और अनुवाद इस ES5 वाक्य रचना में किया गया है:
// Conventional ES5 anonymous function syntax
[1,2,3].map(function(n) {
return n + 1;
});
जावास्क्रिप्ट के लिए कॉफीस्क्रिप्ट (अंतर्निहित कॉफीस्क्रिप्ट संकलक के माध्यम से) :
इस कॉफी
# Existence:
alert "I knew it!" if elvis?
व्याख्या और जावास्क्रिप्ट के लिए अनुवादित है:
if (typeof elvis !== "undefined" && elvis !== null) {
alert("I knew it!");
}
मैं ट्रांसपाइल कैसे करूं?
अधिकांश संकलित-से-जावास्क्रिप्ट भाषाओं में एक ट्रांसपिलर बिल्ट-इन (जैसे कॉफीस्क्रिप्ट या टाइपस्क्रिप्ट) है। इस मामले में, आपको बस भाषा की ट्रांसप्लर को कॉन्फ़िगर सेटिंग्स या एक चेकबॉक्स के माध्यम से सक्षम करने की आवश्यकता हो सकती है। एडेप्टर के संबंध में उन्नत सेटिंग्स भी सेट की जा सकती हैं।
ईएस 6 / ईएस2016-से-ईएस 5 ट्रांसप्लिंग के लिए , सबसे प्रमुख ट्रांसपिलर का इस्तेमाल किया जा रहा है, जो बैबल है ।
मुझे ट्रांसपाइल क्यों करना चाहिए?
सबसे उद्धृत लाभों में शामिल हैं:
- मज़बूती से नए वाक्यविन्यास का उपयोग करने की क्षमता
- सभी ब्राउज़रों में नहीं तो अधिकांश के बीच संगतता
- कॉफ़ीस्क्रिप्ट या टाइपस्क्रिप्ट जैसी भाषाओं के माध्यम से जावास्क्रिप्ट के लिए लापता / अभी तक देशी सुविधाओं का उपयोग नहीं
बाबेल के साथ ईएस 6/7 का उपयोग करना शुरू करें
ES6 के लिए ब्राउज़र समर्थन बढ़ रहा है, लेकिन यह सुनिश्चित करने के लिए कि आपका कोड उन वातावरणों पर काम करेगा जो इसे पूरी तरह से समर्थन नहीं करते हैं, आप Babel , ES6 / 7 से ES5 ट्रांसपिलर का उपयोग कर सकते हैं, इसे आज़माएं!
यदि आप संगतता के बारे में चिंता किए बिना अपनी परियोजनाओं में ES6 / 7 का उपयोग करना चाहते हैं, तो आप Node और Babel CLI का उपयोग कर सकते हैं
ES6 / 7 समर्थन के लिए बैबेल के साथ एक परियोजना का त्वरित सेटअप
- नोड डाउनलोड करें और इंस्टॉल करें
- एक फ़ोल्डर में जाएं और अपने पसंदीदा कमांड लाइन टूल का उपयोग करके एक प्रोजेक्ट बनाएं
~ npm init
- बैबेल सीएलआई स्थापित करें
~ npm install --save-dev babel-cli
~ npm install --save-dev babel-preset-es2015
- अपनी
.jsफ़ाइलों को संग्रहीत करने के लिए एकscriptsफ़ोल्डर बनाएँ, और फिर एक दूरdist/scriptsफ़ोल्डर जहाँ ट्रांसप्ल पूरी तरह से संगत फ़ाइलों को संग्रहीत किया जाएगा। - अपने प्रोजेक्ट के रूट फ़ोल्डर में एक
.babelrcफ़ाइल बनाएँ, और इस पर लिखें
{
"presets": ["es2015"]
}
- अपने संपादित
package.jsonफ़ाइल (बनाया जब तुम भाग गयाnpm init) और जोड़नेbuildकरने के लिए स्क्रिप्टscriptsसंपत्ति:
{
...
"scripts": {
... ,
"build": "babel scripts --out-dir dist/scripts"
},
...
}
- ES6 / 7 में प्रोग्रामिंग का आनंद लें
- अपनी सभी फ़ाइलों को ES5 में ट्रांसपाइल करने के लिए निम्नलिखित को चलाएँ
~ npm run build
अधिक जटिल परियोजनाओं के लिए आप गुल्प या वेबपैक पर एक नज़र रखना चाहते हैं