बाबेल का उपयोग करके कस्टम जावास्क्रिप्ट सिंटैक्स का निर्माण करें। भाग २

आज, हम Babel का उपयोग करके जावास्क्रिप्ट सिंटैक्स एक्सटेंशन के अनुवाद का दूसरा भाग प्रकाशित कर रहे हैं।



→ पहले भाग में चक्कर आना

पार्सिंग कैसे काम करता है

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

व्याकरण विनिर्देश कुछ इस तरह दिखता है:

... ExponentiationExpression -> UnaryExpression                             UpdateExpression ** ExponentiationExpression MultiplicativeExpression -> ExponentiationExpression                             MultiplicativeExpression ("*" or "/" or "%") ExponentiationExpression AdditiveExpression    -> MultiplicativeExpression                             AdditiveExpression + MultiplicativeExpression                             AdditiveExpression - MultiplicativeExpression ... 

यह अभिव्यक्ति या कथनों को निष्पादित करने की प्राथमिकता का वर्णन करता है। उदाहरण के लिए, एक AdditiveExpression अभिव्यक्ति निम्न निर्माणों में से एक का प्रतिनिधित्व कर सकती है:

• अभिव्यक्ति MultiplicativeExpression ।
• एक AdditiveExpression अभिव्यक्ति, एक + टोकन ऑपरेटर द्वारा, उसके बाद एक MultiplicativeExpression अभिव्यक्ति।
• एक AdditiveExpression अभिव्यक्ति, उसके बाद एक " - " टोकन, उसके बाद एक MultiplicativeExpression अभिव्यक्ति।

नतीजतन, अगर हमारे पास अभिव्यक्ति 1 + 2 * 3 , तो यह इस तरह दिखाई देगा:

 (AdditiveExpression "+" 1 (MultiplicativeExpression "*" 2 3)) 

लेकिन ऐसा नहीं होगा:

 (MultiplicativeExpression "*" (AdditiveExpression "+" 1 2) 3) 

कार्यक्रम, इन नियमों का उपयोग करते हुए, पार्सर द्वारा जारी कोड में परिवर्तित किया जाता है:

 class Parser {  // ...  parseAdditiveExpression() {    const left = this.parseMultiplicativeExpression();    //    -  `+`  `-`    if (this.match(tt.plus) || this.match(tt.minus)) {      const operator = this.state.type;      //          this.nextToken();      const right = this.parseMultiplicativeExpression();      //        this.finishNode(        {          operator,          left,          right,        },        'BinaryExpression'      );    } else {      //  MultiplicativeExpression      return left;    }  } } 

कृपया ध्यान दें कि यहाँ एक बहुत ही सरल संस्करण है जो वास्तव में बैबेल में मौजूद है। लेकिन मुझे उम्मीद है कि कोड का यह टुकड़ा हमें क्या हो रहा है का सार वर्णन करने की अनुमति देता है।

जैसा कि आप देख सकते हैं, पार्सर स्वभाव से, पुनरावर्ती है। यह सबसे कम प्राथमिकता वाले डिजाइनों से उच्चतम प्राथमिकता वाले डिजाइनों की ओर बढ़ता है। उदाहरण के लिए, parseAdditiveExpression कॉल करता है parseMultiplicativeExpression , और यह निर्माण कॉल parseExponentiationExpression और इसी तरह। इस पुनरावर्ती प्रक्रिया को रिकर्सिव डेसेंट पार्सिंग कहा जाता है।

कार्य। It, it.match, this.next

आपने देखा होगा कि पिछले उदाहरणों में कुछ सहायक कार्यों का उपयोग किया गया था, जैसे कि यह। this.eat , this.match , this.next और अन्य। ये बाबेल पार्सर के आंतरिक कार्य हैं। ये कार्य, हालांकि, बैबिल के लिए अद्वितीय नहीं हैं, वे आमतौर पर अन्य पार्सर में मौजूद हैं।

• यह। this.match फ़ंक्शन एक बूलियन मान देता है जो दर्शाता है कि वर्तमान टोकन निर्दिष्ट स्थिति को पूरा करता है।
• यह this.next फ़ंक्शन टोकन की सूची में अगले टोकन के लिए आगे this.next ।
• यह। this.eat फ़ंक्शन रिटर्न करता है जैसे ही यह. this.match फ़ंक्शन this.match , और यदि यह this.match वापस लौटाता true , तो यह this.eat करता है, true होने से पहले, यह करने के लिए कॉल this.next । this.next ।
• यह this.lookahead फ़ंक्शन आपको आगे बढ़ने के बिना अगले टोकन प्राप्त करने की अनुमति देता है, जो वर्तमान नोड पर निर्णय लेने में मदद करता है।

यदि आप उस पार्सर कोड को फिर से देखते हैं जिसे हमने बदल दिया है, तो आप पाएंगे कि इसे पढ़ना बहुत आसान हो गया है:

 packages/babel-parser/src/parser/statement.js export default class StatementParser extends ExpressionParser {  parseStatementContent(/* ...*/) {    // ...    // NOTE:   match        if (this.match(tt._function)) {      this.next();      // NOTE:     ,          this.parseFunction();    }  }  // ...  parseFunction(/* ... */) {    // NOTE:   eat         node.generator = this.eat(tt.star);    node.curry = this.eat(tt.atat);    node.id = this.parseFunctionId();  } } 

मुझे पता है कि मैंने पार्सर्स की विशेषताओं के बारे में गहराई से बताया। इसलिए, यहां और वहां - इस विषय पर उपयोगी संसाधनों के एक जोड़े। मैंने उनमें से बहुत कुछ सीखा है और मैं उन्हें आपकी सिफारिश कर सकता हूं।

आपको यह जानने में दिलचस्पी हो सकती है कि मैं बैबल एएसटी एक्सप्लोरर में बनाए गए सिंटैक्स की कल्पना कैसे कर सकता हूं जब मैंने एएसटी में दिखाई देने वाली नई " curry " विशेषता दिखाई थी।

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

यदि आप पथ packages/babel-parser/lib , तो आप पार्सर का संकलित संस्करण और एक कोड मैप पा सकते हैं। Babel AST Explorer पैनल में, आप अपने खुद के पार्सर को लोड करने के लिए बटन देख सकते हैं। packages/babel-parser/lib/index.js डाउनलोड करके packages/babel-parser/lib/index.js आप अपने स्वयं के पार्सर का उपयोग करके उत्पन्न एएसटी की कल्पना कर सकते हैं।


एएसटी दृश्य

बाबेल के लिए हमारा प्लगइन

अब जब पार्सर पूरा हो गया है, तो आइए Babel के लिए एक प्लगइन लिखें।

लेकिन, शायद अब आपको कुछ संदेह है कि हम अपने स्वयं के बैबल पार्सर का उपयोग कैसे करने जा रहे हैं, विशेष रूप से यह देखते हुए कि परियोजना का निर्माण करने के लिए हम किस प्रौद्योगिकी स्टैक का उपयोग करते हैं।

सच है, डरने की कोई बात नहीं है। बैबल प्लगइन पार्सर क्षमताओं को प्रदान कर सकता है। संबंधित दस्तावेज बेबेल वेबसाइट पर देखे जा सकते हैं।

 babel-plugin-transformation-curry-function.js import customParser from './custom-parser'; export default function ourBabelPlugin() {  return {    parserOverride(code, opts) {      return customParser.parse(code, opts);    },  }; } function.js babel-plugin-transformation-curry-function.js import customParser from './custom-parser'; export default function ourBabelPlugin() {  return {    parserOverride(code, opts) {      return customParser.parse(code, opts);    },  }; } 

चूंकि हमने बैबेल पार्सर का कांटा बनाया है, इसका मतलब है कि सभी मौजूदा पार्सर फीचर्स के साथ-साथ बिल्ट-इन प्लग इन भी पूरी तरह से ठीक काम करते रहेंगे।

इन शंकाओं से छुटकारा पाने के बाद, आइए एक नज़र डालते हैं कि कैसे एक समारोह बनाया जाए कि यह करीने का समर्थन करता है।

यदि आप अपेक्षाओं को सहन नहीं कर सकते हैं और पहले से ही हमारे प्लग-इन को अपने प्रोजेक्ट बिल्ड सिस्टम में जोड़ने का प्रयास कर रहे हैं, तो आप नोटिस कर सकते हैं कि करी का समर्थन करने वाले कार्य नियमित कार्यों में संकलित हैं।

ऐसा इसलिए होता है क्योंकि कोड को पार्स और ट्रांसफ़ॉर्म करने के बाद, बैबल ट्रांसफ़ॉर्मेड एएसटी से कोड जेनरेट करने के लिए @babel/generator बैबल @babel/generator का उपयोग करता है। चूँकि @babel/generator को नई curry विशेषता के बारे में कुछ भी नहीं पता है, इसलिए यह इसे अनदेखा करता है।

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

फ़ंक्शन समर्थन को करी बनाने के लिए, आप इसे उच्च-क्रम फ़ंक्शन currying में लपेट सकते हैं:

 function currying(fn) {  const numParamsRequired = fn.length;  function curryFactory(params) {    return function (...args) {      const newParams = params.concat(args);      if (newParams.length >= numParamsRequired) {        return fn(...newParams);      }      return curryFactory(newParams);    }  }  return curryFactory([]); } 

यदि आप जेएस में करी कार्यों के तंत्र के कार्यान्वयन की सुविधाओं में रुचि रखते हैं - इस सामग्री पर एक नज़र डालें।

परिणामस्वरूप, हम, एक फ़ंक्शन को बदलना जो करी का समर्थन करता है, यह कर सकता है:

 //   function @@ foo(a, b, c) {  return a + b + c; } //    const foo = currying(function foo(a, b, c) {  return a + b + c; }) 

अभी के लिए, हम जावास्क्रिप्ट में फ़ंक्शंस बढ़ाने के तंत्र पर ध्यान नहीं देंगे, जो परिभाषित होने से पहले आपको फ़ंक्शन foo को कॉल करने की अनुमति देता है।

यहाँ परिवर्तन कोड कैसा दिखता है:

 babel-plugin-transformation-curry-function.js export default function ourBabelPlugin() {  return {    // ... <i>    visitor: {      FunctionDeclaration(path) {        if (path.get('curry').node) {          // const foo = curry(function () { ... });          path.node.curry = false;          path.replaceWith(            t.variableDeclaration('const', [              t.variableDeclarator(                t.identifier(path.get('id.name').node),                t.callExpression(t.identifier('currying'), [                  t.toExpression(path.node),                ])              ),            ])          );        }      },    },</i>  }; } function.js babel-plugin-transformation-curry-function.js export default function ourBabelPlugin() {  return {    // ... <i>    visitor: {      FunctionDeclaration(path) {        if (path.get('curry').node) {          // const foo = curry(function () { ... });          path.node.curry = false;          path.replaceWith(            t.variableDeclaration('const', [              t.variableDeclarator(                t.identifier(path.get('id.name').node),                t.callExpression(t.identifier('currying'), [                  t.toExpression(path.node),                ])              ),            ])          );        }      },    },</i>  }; } 

आपके लिए यह पता लगाना बहुत आसान होगा कि यदि आप बैबल में परिवर्तनों के बारे में इस सामग्री को पढ़ते हैं।

अब हम इस सवाल का सामना कर रहे हैं कि इस तंत्र को currying फ़ंक्शन के उपयोग के साथ कैसे प्रदान किया currying । यहां आप दो तरीकों में से एक का उपयोग कर सकते हैं।

▍एप्रोच नंबर 1: यह माना जा सकता है कि करी फंक्शन वैश्विक दायरे में घोषित किया गया है

यदि ऐसा है, तो काम पहले से ही किया जाता है।

यदि संकलित कोड को निष्पादित करते समय, यह पता चला है कि currying फ़ंक्शन को परिभाषित नहीं किया गया है, तो हम एक त्रुटि संदेश का सामना करेंगे जो ऐसा लगता है जैसे " currying is not defined "। यह संदेश के समान है " पुनर्योजीRuntime परिभाषित नहीं है "।

इसलिए, यदि कोई आपके babel-plugin-transformation-curry-function का उपयोग करता है, तो आपको यह सूचित करने की आवश्यकता हो सकती है कि इस प्लगइन को ठीक से काम करने के लिए उसे babel-plugin-transformation-curry-function currying को स्थापित करने की आवश्यकता है।

▍ दृष्टिकोण # 2: आप babel / सहायकों का उपयोग कर सकते हैं

आप @babel/helpers लिए एक नया सहायक फ़ंक्शन जोड़ सकते हैं। इस विकास को आधिकारिक @babel/helpers के साथ जोड़ा जाने की संभावना नहीं @babel/helpers । परिणामस्वरूप, आपको @babel/core को अपने @babel/helpers का स्थान दिखाने का एक तरीका खोजना होगा:

 package.json {  "resolutions": {    "@babel/helpers": "7.6.0--your-custom-forked-version",  } 

मैंने खुद यह कोशिश नहीं की है, लेकिन मुझे विश्वास है कि यह तंत्र काम करेगा। यदि आप इसे आजमाते हैं और समस्याओं में भागते हैं, तो मैं इस पर चर्चा करूंगा।

@babel/helpers लिए @babel/helpers नया सहायक फ़ंक्शन @babel/helpers बहुत सरल है।

सबसे पहले, संकुल / बेबल-हेल्पर्स / src / helpers.js फ़ाइल पर जाएँ और एक नई प्रविष्टि जोड़ें:

 helpers.currying = helper("7.6.0")`  export default function currying(fn) {    const numParamsRequired = fn.length;    function curryFactory(params) {      return function (...args) {        const newParams = params.concat(args);        if (newParams.length >= numParamsRequired) {          return fn(...newParams);        }        return curryFactory(newParams);      }    }    return curryFactory([]);  } `; 

सहायक फ़ंक्शन का वर्णन करते समय, आवश्यक संस्करण @babel/core इंगित किया गया है। यहाँ कुछ कठिनाइयाँ currying फ़ंक्शन के export default कारण हो सकती हैं।

एक सहायक फ़ंक्शन का उपयोग करने के लिए, बस इसे कॉल करें। this.addHelper() :

 // ... path.replaceWith(  t.variableDeclaration('const', [    t.variableDeclarator(      t.identifier(path.get('id.name').node),      t.callExpression(this.addHelper("currying"), [        t.toExpression(path.node),      ])    ),  ]) ); 

यह this.addHelper कमांड, यदि आवश्यक हो, तो फ़ाइल के शीर्ष पर सहायक फ़ंक्शन को एम्बेड करेगा और कार्यान्वित फ़ंक्शन को इंगित करने वाला एक Identifier लौटाएगा।

नोट

मैं काफी समय से बैबेल पर काम करने में शामिल हूं, लेकिन मुझे अभी तक पार्सर को नए जावास्क्रिप्ट सिंटैक्स का समर्थन करने के लिए सुविधाओं को जोड़ना नहीं पड़ा है। मैंने मुख्य रूप से बग को ठीक करने और आधिकारिक भाषा सुविधाओं के लिए प्रासंगिक सुधार लाने पर काम किया।

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

आपके द्वारा उपयोग की जाने वाली भाषा के वाक्य विन्यास को नियंत्रित करने की क्षमता प्रेरणा का एक शक्तिशाली स्रोत है। यह कुछ जटिल निर्माणों को लागू करने, कम कोड लिखने, या पहले की तुलना में सरल कोड लिखने के लिए संभव बनाता है। सरल कोड को जटिल निर्माण में बदलने के लिए तंत्र स्वचालित हैं और संकलन चरण में स्थानांतरित किए जाते हैं। यह याद दिलाता है कि कैसे async/await नरक कॉलबैक और वादों की लंबी श्रृंखला की समस्याओं को हल करता है।

परिणाम

यहां हमने बाबेल पार्सर की क्षमताओं को संशोधित करने के तरीके के बारे में बात की, हमने अपना कोड परिवर्तन प्लगइन लिखा, @babel/generator बारे में संक्षेप में बात की और @babel/helpers का उपयोग करके सहायक कार्यों को बनाने के बारे में बात की। कोड के रूपांतरण के बारे में जानकारी केवल योजनाबद्ध रूप से दी गई है। उनके बारे में यहाँ और पढ़ें।

इस प्रक्रिया में, हमने पार्सर्स की कुछ विशेषताओं को छुआ। यदि आप इस विषय में रुचि रखते हैं - तो, यहाँ और वहाँ - संसाधन जो आपके लिए उपयोगी हैं।

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

यहाँ GitHub पर एक पृष्ठ है जो आपको यहाँ पर किए गए बड़े चित्र को देखने देगा।

प्रिय पाठकों! क्या आप कभी भी जावास्क्रिप्ट के सिंटैक्स का विस्तार करना चाहते हैं?