🧦 🙋🏾 🌸 अमूर्त जावास्क्रिप्ट सिंटैक्स पेड़ों के साथ काम करें 🍔 🏫 🐔

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

कटौती के तहत - होलीजस 2018 पाइटर सम्मेलन से किरिल चेरकैशिन ( z6Dabrata ) की एक रिपोर्ट का एक वीडियो और पाठ प्रतिलेख।

लेखक के बारे में
सिरिल का जन्म मॉस्को में हुआ था, जो अब न्यूयॉर्क में रहता है और फायरबेस में काम करता है। न केवल Google, बल्कि दुनिया भर में कोणीय सिखाता है। दुनिया में सबसे बड़ा कोणीय म्यूटैप का आयोजक AngularNYC (साथ ही VueNYC और ReactNYC) है। प्रोग्रामिंग से अपने खाली समय में, वह टैंगो, पुस्तकों और सुखद वार्तालाप के शौकीन हैं।

Hacksaw या लकड़ी?

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

स्थिति को ठीक करने के लिए एस्लिंट जैसे उपकरण हैं, लेकिन शैक्षिक उद्देश्यों के लिए, हम अपने दम पर एक समाधान खोजने की कोशिश करते हैं।
कोड से सभी console.log() को हटाने के लिए मुझे किस उपकरण का उपयोग करना चाहिए?
हम नियमित अभिव्यक्तियों और अमूर्त साइटैक्स पेड़ों (एएसडी) के उपयोग के बीच चयन करते हैं। चलो कुछ findConsoleLog फ़ंक्शन लिखकर नियमित अभिव्यक्तियों के साथ इसे हल करने का प्रयास करें। इनपुट पर, यह प्रोग्राम कोड को एक तर्क के रूप में प्राप्त करेगा और कंसोल टेक्स्ट (कहीं) प्रोग्राम टेक्स्ट में पाए जाने पर सही प्रदर्शित करेगा।

 function findConsoleLog(code) { return !!code.match(/console.log/); }

मैंने 17 परीक्षण लिखे, हमारे कार्य को तोड़ने के विभिन्न तरीकों के साथ आने की कोशिश की। यह सूची पूर्ण से बहुत दूर है।

सबसे सरल परीक्षा पास हुई।
और क्या होगा अगर किसी फ़ंक्शन में इसके नाम में स्ट्रिंग "कंसोल.लॉग" है?

 function findConsoleLog(code) { return !!code.match(/\bconsole.log/); }

एक वर्ण जोड़ा गया जो बताता है कि शब्द की शुरुआत में console.log होना चाहिए।

केवल दो परीक्षण हुए, लेकिन क्या हुआ अगर console.log टिप्पणी में है और उसे हटाने की आवश्यकता नहीं है?

हम इसे फिर से लिखते हैं ताकि पार्सर टिप्पणियों को स्पर्श न करें।

 function findConsoleLog(code) { return !!code   .replace(/\/\/.*/)   .match(/\bconsole.log/); }

हम "कंसोल.लॉग" को लाइनों से हटाने को बाहर करते हैं:

 function findConsoleLog(code) { return !!code   .replace(/\/\/.*|'.*'/, '')   .match(/\bconsole.log/); }

यह मत भूलो कि हमारे पास अभी भी रिक्त स्थान और अन्य वर्ण हैं जो कुछ परीक्षणों को पारित होने से रोक सकते हैं:

इस तथ्य के बावजूद कि विचार काफी सरल नहीं था, नियमित अभिव्यक्ति का उपयोग करने वाले सभी 17 परीक्षणों को पारित किया जा सकता है। इस प्रकार, इस मामले में, समाधान कोड दिखेगा:

 function findConsoleLog(code) { return code   .replace(/\/\/.*|'.*?[^\\]'|".*?"|`[\s\S]*`|\/\*[\s\S]*\*\//)   .match(/\bconsole\s*.log\(/); }

समस्या यह है कि यह कोड सभी संभावित मामलों को कवर नहीं करता है, और इसे बनाए रखना मुश्किल है।

एएसडी का उपयोग करके इस समस्या को हल करने के तरीके पर विचार करें।

पेड़ कैसे उगाए जाते हैं?

आपके एप्लिकेशन के कोड के साथ काम करने वाले पार्सर के परिणामस्वरूप अमूर्त सिंटैक्स ट्री प्राप्त किया जाता है। Parser @ babel / पार्सर प्रदर्शन के लिए उपयोग किया गया था ।
एक उदाहरण के रूप में, स्ट्रिंग console.log('holy') , इसे पार्सर के माध्यम से पास करें।

 import { parse } from 'babylon'; parse("console.log('holy')");

उनके काम के परिणामस्वरूप, लगभग 300 लाइनों की एक JSON फाइल प्राप्त होती है। हम सेवा सूचना के साथ उनकी संख्या रेखाओं से बाहर करते हैं। हम शरीर अनुभाग में रुचि रखते हैं। मेटा-इनफॉर्मेशन में हमारी दिलचस्पी नहीं है। परिणाम लगभग 100 लाइनें है। एक बॉडी वैरिएबल (लगभग 300 लाइन) के लिए ब्राउजर किस स्ट्रक्चर से तुलना करता है, यह ज्यादा नहीं है।

आइए एक वाक्यविन्यास वृक्ष में कोड में विभिन्न शाब्दिक का प्रतिनिधित्व करने वाले कुछ उदाहरण देखें:

यह एक अभिव्यक्ति है जिसमें न्यूमेरिक लिटरल है, एक संख्यात्मक शाब्दिक है।

पहले से परिचित कंसोल .log अभिव्यक्ति। यह एक वस्तु है कि एक संपत्ति है।

यदि लॉग एक फ़ंक्शन कॉल है, तो विवरण निम्नानुसार है: एक कॉल अभिव्यक्ति है, इसमें तर्क हैं - संख्यात्मक शाब्दिक। उसी समय, कॉलिंग एक्सप्रेशन का एक नाम है - लॉग।

साहित्य अलग हो सकते हैं: संख्या, तार, नियमित अभिव्यक्ति, बूलियन, अशक्त।
कंसोल.लॉग कॉल पर वापस जाएं

यह एक कॉल एक्सप्रेशन है जिसमें मेंबर एक्सप्रेशन है। इससे यह स्पष्ट है कि कंसोल ऑब्जेक्ट के अंदर लॉग नामक एक संपत्ति है।

एएसडी बाईपास

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

वही 17 परीक्षण दिए गए हैं। इस तरह के कोड को प्रोग्राम के सिंटैक्स ट्री का विश्लेषण करके और "कंसोल.लॉग" की प्रविष्टियों की खोज करके प्राप्त किया जाता है:

 function traverseConsoleLog(code, {babylon, babelTraverse, types, log}) { const ast = babylon.parse(code); let hasConsoleLog = false; babelTraverse(ast, {   MemberExpression(path){     if (       path.node.property.type === 'Identifier' &&       path.node.property.name === 'log' &&       path.node.object.type === 'Identifier' &&       path.node.object.name === 'console' &&       path.parent.type === 'CallExpression' &&       path.Parentkey === 'callee'     ) {       hasConsoleLog = true;     }   } }) return hasConsoleLog; }

यहां जो लिखा गया है, उसका विश्लेषण करें। const ast = babylon.parse(code); कोड में सिंटैक्स ट्री को जोड़ने के लिए, हम चर में हैं। आगे हम इस पेड़ को प्रसंस्करण के लिए बैबल-पार्स लाइब्रेरी देते हैं। हम कॉल एक्सप्रेशन के अंदर नाम मिलान के साथ नोड्स और प्रॉपर्टीज की तलाश कर रहे हैं। यदि नोड्स और उनके नामों का आवश्यक संयोजन पाया जाता है, तो hasConsoleLog चर को सही पर सेट करें।

हम पेड़ के चारों ओर घूम सकते हैं, नोड्स के माता-पिता को ले सकते हैं, वंशज हैं, उनके पास क्या तर्क और गुण हैं, इन गुणों के नामों को देखें, प्रकार - यह बहुत सुविधाजनक है।

एक अप्रिय अति सूक्ष्म अंतर है जिसे बैबिल-प्रकार पुस्तकालय का उपयोग करके आसानी से तय किया जा सकता है। गलत नाम के कारण पेड़ में खोज करते समय होने वाली गलतियों से बचने के लिए, उदाहरण के लिए, path.parent.type === 'CallExpression' बजाय आपने गलती से path.parent.type === 'callExpression' , path.parent.type === 'callExpression' -प्रकार के साथ आप इस तरह लिख सकते हैं :

 // Before path.node.property.type === 'Identifier' path.node.property.name === 'log' // with babel types import {isIdentifier} from 'babel-types'; isIdentifier(path.node.property, {name: log}) //         ,  ,    isIdentifier,

हम पिछले कोड को बाबेल-प्रकारों का उपयोग करके फिर से लिखते हैं:

 function traverseConsoleLogSolved2(code, {babylon, babelTraverse, types}) { const ast = babylon.parse(code); let hasConsoleLog = false; babelTraverse(ast, {   MemberExpression(path) {     if (       types.isIdentifier(path.node.object, { name: 'console'}) &&       types.isIdentifier(path.node.property, { name: 'log'}) &&       types.isCallExpression(path.parent) &&       path.parentKey === 'callee'     ) {       hasConsoleLog = true;     }   } }); return hasConsoleLog; }

एसेल को बेबल-ट्रैवर्स का उपयोग करके बदलना

श्रम लागत को कम करने के लिए, हमें console.log आवश्यकता है। कोड से तुरंत हटा दिया जाना console.log - एक संकेत के बजाय यह कोड में है।

चूँकि हमें अपने आप में hasConsoleLog = true; को हटाने की आवश्यकता नहीं है, लेकिन इसके माता-पिता, hasConsoleLog = true; हम path.parentPath.remove(); लिखते हैं path.parentPath.remove(); ।

removeConsoleLog फ़ंक्शन से, हम अभी भी एक बूलियन मान लौटाते हैं। हम इसके उत्पादन को उस कोड से प्रतिस्थापित करते हैं, जो इस तरह से बेबल-जनरेटर उत्पन्न करेगा:
hasConsoleLog => babelGenerator(ast).code

बैबल-जनरेटर एक पैरामीटर के रूप में संशोधित अमूर्त सिंटैक्स ट्री प्राप्त करता है, कोड प्रॉपर्टी के साथ एक ऑब्जेक्ट देता है, इस ऑब्जेक्ट के अंदर console.log के बिना पुनर्निर्मित कोड होता है। वैसे, यदि हम एक कोड मैप प्राप्त करना चाहते हैं, तो हम इस ऑब्जेक्ट के लिए sourceMaps संपत्ति कह सकते हैं।

और अगर आपको डिबगर खोजने की आवश्यकता है?

इस बार हम कार्य को पूरा करने के लिए ASTexplorer का उपयोग करेंगे। डीबगर एक प्रकार का डीबगर कथन नोड है। हमें पूरी संरचना को देखने की आवश्यकता नहीं है, क्योंकि यह एक विशेष प्रकार का नोड है, बस डिबगर स्टेटमेंट ढूंढें। हम ESLint (ASTexplorer पर) के लिए एक प्लगइन लिखेंगे।

ASTexplorer इस तरह से डिज़ाइन किया गया है कि आप बाईं ओर कोड लिखते हैं, और दाईं ओर आपको तैयार ASD मिलता है। आप चुन सकते हैं कि आप किस प्रारूप में इसे प्राप्त करना चाहते हैं: JSON या ट्री प्रारूप में।

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

 export default function(context) { return {   DebuggerStatement(node) { // ,     console.log    path,    -  ,     path         context.report(node, 'LOL Debugger!!!'); //   ESLint ,   debugger, node     ,    ,    debugger   } } }

एक लिखित प्लगइन के काम की जाँच:

इसी तरह, आप डिबगर को कोड से हटा सकते हैं।

अन्य उपयोगी एएसडी क्या हैं

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

तो:

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

बैबल के लिए कुछ उपयोगी लिंक

सभी बैबल ट्रांसफॉर्मेशन इस एपीआई का उपयोग करते हैं: प्लगइन्स और प्रीसेट ।
ECMAScript में नई कार्यक्षमता जोड़ने की प्रक्रिया का एक हिस्सा Babel के लिए एक प्लगइन बना रहा है। यह आवश्यक है ताकि लोग नई कार्यक्षमता का परीक्षण कर सकें। यदि आप लिंक का अनुसरण करते हैं, तो आप देख सकते हैं कि उसी तरह से एएसडी की क्षमताओं का उपयोग किया जाता है। उदाहरण के लिए, तार्किक-असाइनमेंट-ऑपरेटर ।
कोड उत्पन्न करते समय बैबल जेनरेटर फॉर्मेटिंग खो देता है। यह आंशिक रूप से अच्छा है, क्योंकि यदि इस उपकरण का उपयोग विकास टीम में किया जाता है, तो एएसडी से कोड उत्पन्न करने के बाद, यह सभी के लिए समान दिखाई देगा। लेकिन अगर आप अपने फॉर्मेटिंग को रखना चाहते हैं, तो आप इनमें से किसी एक टूल का इस्तेमाल कर सकते हैं: रीकास्ट या बैबेल कोडमॉड ।
इस लिंक से आप बेबेल विस्मयकारी बाबेल की जानकारी पा सकते हैं।
बैबेल एक ओपन सोर्स प्रोजेक्ट है और स्वयंसेवकों की एक टीम इस पर काम कर रही है। आप मदद कर सकते हैं ऐसा करने के तीन तरीके हैं: वित्तीय सहायता, आप patreon वेबसाइट का समर्थन कर सकते हैं, जो कि हेनरी झू, जो बैबेल के प्रमुख योगदानकर्ताओं में से एक है, के साथ काम करता है, opencollective.com/babel पर कोड के साथ मदद करता है।

बोनस

कोड में हम और कैसे अपना console.log पा सकते हैं? अपनी आईडीई का उपयोग करें! कोड खोजने के लिए चयन करने के बाद खोज और बदलें टूल का उपयोग करना।
Intellij IDEA में एक "संरचनात्मक खोज" टूल भी है जो आपके कोड में सही स्थानों को खोजने में मदद कर सकता है, वैसे, यह एक एएसडी का उपयोग करता है।

24-25 नवंबर को, किरिल जावास्क्रिप्ट पर एक प्रस्तुति देगा * LOVES * बाइनरी डेटा मॉस्को होल्जस पर : हम द्विआधारी डेटा स्तर तक नीचे जाएंगे, उदाहरण के रूप में * .gif फ़ाइलों का उपयोग करके द्विआधारी फ़ाइलों में खुदाई करें, और प्रोटॉबॉफ या थ्रिफ्ट जैसे धारावाहिक गुणों से निपटें । रिपोर्ट के बाद, सिरिल के साथ चर्चा करना और चर्चा क्षेत्र में ब्याज के सभी मुद्दों पर चर्चा करना संभव होगा।

अमूर्त जावास्क्रिप्ट सिंटैक्स पेड़ों के साथ काम करें