👨‍👩‍👧‍👧 👨‍👧‍👧 👩🏽 एक उदाहरण के रूप में पुटआउट का उपयोग करके एएसटी ट्री परिवर्तन का व्यावहारिक अनुप्रयोग ⛴️ 👩🏾‍🤝‍👨🏻 👼🏿

परिचय

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

एएसटी

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

पार्सर

और इसलिए हमारे पास कोड है:

a + b

पार्सर को आमतौर पर दो भागों में विभाजित किया जाता है:

लेक्सिकल विश्लेषण

कोड को टोकन में तोड़ता है, जिनमें से प्रत्येक कोड का एक हिस्सा बताता है:

 [{ "type": "Identifier", "value": "a" }, { "type": "Punctuator", "value": "+", }, { "type": "Identifier", "value": "b" }]

पार्स।

टोकन से एक सिंटैक्स ट्री बनाता है:

 { "type": "BinaryExpression", "left": { "type": "Identifier", "name": "a" }, "operator": "+", "right": { "type": "Identifier", "name": "b" } }

और अब हमारे पास पहले से ही वह विचार है, जिसके साथ आप प्रोग्राम कर सकते हैं। यह स्पष्ट करने योग्य है कि बड़ी संख्या में JavaScript पार्सर्स हैं, यहाँ उनमें से कुछ हैं:

babel-parser - एक पार्सर जो babel का उपयोग करता है;
एस्प्री - ए पार्सल जो eslint का उपयोग करता है;
acorn - पिछले दो आधारित हैं जो पार्सर;
एस्प्रिमा - एक लोकप्रिय पार्सर जो एक्मास्क्रिप्ट 2017 तक जावास्क्रिप्ट का समर्थन करता है;
cherow जावास्क्रिप्ट पार्सर के बीच एक नया खिलाड़ी है जो सबसे तेज़ होने का दावा करता है;

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

ट्रांसफार्मर

एएसटी पेड़ को बदलने के लिए, आप विज़िटर पैटर्न का उपयोग कर सकते हैं, उदाहरण के लिए, @ बैबल / ट्रैवर्स लाइब्रेरी का उपयोग करके। निम्नलिखित कोड code चर से सभी जावास्क्रिप्ट कोड पहचानकर्ताओं के नाम का उत्पादन करेगा।

 import * as parser from "@babel/parser"; import traverse from "@babel/traverse"; const code = `function square(n) { return n * n; }`; const ast = parser.parse(code); traverse(ast, { Identifier(path) { console.log(path.node.name); } });

जनक

आप उदाहरण के लिए, @ babel / जनरेटर का उपयोग करके कोड उत्पन्न कर सकते हैं, इस तरह से:

 import {parse} from '@babel/parser'; import generate from '@babel/generator'; const code = 'class Example {}'; const ast = parse(code); const output = generate(ast, code);

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

यह एक ऑनलाइन टूल जोड़ने के लायक भी है जैसे कि एस्टेक्सप्लेयर , यह बड़ी संख्या में पार्सर, ट्रांसफार्मर और जनरेटर को जोड़ती है।

Putout

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

eslint कोड में समस्या क्षेत्रों को कैसे दिखाता है, लेकिन eslint विपरीत कोड का व्यवहार बदल जाता है, अर्थात यह उन सभी त्रुटियों को ठीक करने में सक्षम है जो इसे पा सकते हैं।

babel putout तरह putout कोड को परिवर्तित करता है, लेकिन इसे न्यूनतम रूप से बदलने की कोशिश करता है, इसलिए इसका उपयोग उस कोड के साथ काम करने के लिए किया जा सकता है जो भंडार में संग्रहीत होता है।

प्रेटियर भी ध्यान देने योग्य है, यह एक प्रारूपण उपकरण है, और यह मौलिक रूप से भिन्न है।

Jscodeshift पुटआउट से बहुत दूर स्थित नहीं है, लेकिन यह प्लगइन्स का समर्थन नहीं करता है, त्रुटि संदेश नहीं दिखाता है, और @ babel / प्रकारों के बजाय एस्ट्रो-प्रकारों का भी उपयोग करता है।

रूप की कहानी

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

पुटआउट कैसे अंदर काम करता है

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

अंतर्निहित प्लगइन्स

putout एक प्लगइन सिस्टम पर बनाया गया है। प्रत्येक प्लगइन एक नियम का प्रतिनिधित्व करता है। अंतर्निहित नियमों का उपयोग करते हुए, आप निम्न कार्य कर सकते हैं:

खोजें और हटाएं:
- अप्रयुक्त चर
- debugger
- call test.only
- call test.skip
- कॉल console.log
- कॉल process.exit
- खाली ब्लॉक
- खाली पैटर्न
परिवर्तनीय घोषणा खोजें और विभाजित करें:
```
 //  var one, two; //  var one; var two; 
```
commonjs को commonjs बदलें:

  //  import one from 'one'; //  const one = require('one');

विनाशकारी लागू करें:

 //  const name = user.name; //  const {name} = user;

विनाशकारी गुणों को मिलाएं:

 //  const {name} = user; const {password} = user; //  const { name, password } = user;

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

उदाहरण के लिए, निम्नलिखित कोड होना:

 const name = user.name; const password = user.password;

इसे पहले अप्लाय -डिस्ट्रक्टिंग के उपयोग से परिवर्तित किया जाता है:

 const {name} = user; const {password} = user;

फिर, मर्ज-विनाशकारी-गुणों का उपयोग करके , इसे निम्न में बदल दिया जाता है:

 const { name, password } = user;

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

उदाहरण का उपयोग करें

अंतर्निहित नियमों के साथ खुद को परिचित करने के बाद, हम putout का उपयोग करके एक उदाहरण पर विचार कर सकते हैं।
निम्नलिखित सामग्री के साथ एक example.js फ़ाइल बनाएँ:

 const x = 1, y = 2; const name = user.name; const password = user.password; console.log(name, password);

अब एक तर्क के रूप में example.js पास करके putout चलाएं:

 coderaiser@cloudcmd:~/example$ putout example.js /home/coderaiser/example/example.js 1:6 error "x" is defined but never used remove-unused-variables 1:13 error "y" is defined but never used remove-unused-variables 6:0 error Unexpected "console" call remove-console 1:0 error variables should be declared separately split-variable-declarations 3:6 error Object destructuring should be used apply-destructuring 4:6 error Object destructuring should be used apply-destructuring 6 errors in 1 files fixable with the `--fix` option

हम 6 त्रुटियों वाली जानकारी प्राप्त करेंगे, जो ऊपर दिए गए अधिक विवरण में मानी गई है, अब हम उन्हें सही करेंगे, और देखें कि क्या हुआ:

 coderaiser@cloudcmd:~/example$ putout example.js --fix coderaiser@cloudcmd:~/example$ cat example.js const { name, password } = user;

सुधार के परिणामस्वरूप, अप्रयुक्त चर और console.log कॉल हटा दिए गए थे, और विनाशकारी भी लागू किया गया था।

सेटिंग्स

डिफ़ॉल्ट सेटिंग्स हमेशा और सभी के लिए नहीं हो सकती हैं, इसलिए .putout.json कॉन्फ़िगरेशन फ़ाइल का समर्थन करता है, इसमें निम्न अनुभाग शामिल हैं:

नियम
उपेक्षा
मैच
प्लगइन्स

नियम

rules अनुभाग में rules एक प्रणाली होती है। नियम, डिफ़ॉल्ट रूप से, निम्नानुसार सेट होते हैं:

 { "rules": { "remove-unused-variables": true, "remove-debugger": true, "remove-only": true, "remove-skip": true, "remove-process-exit": false, "remove-console": true, "split-variable-declarations": true, "remove-empty": true, "remove-empty-pattern": true, "convert-esm-to-commonjs": false, "apply-destructuring": true, "merge-destructuring-properties": true } }

remove-process-exit को सक्षम करने के लिए remove-process-exit इसे .putout.json फ़ाइल में true सेट करें:

 { "rules": { "remove-process-exit": true } }

यह सभी process.exit को रिपोर्ट करने के लिए पर्याप्त होगा process.exit कोड में पाए गए कॉल को हटा दें और यदि --fix विकल्प का --fix है तो उन्हें हटा दें।

उपेक्षा

यदि आपको अपवादों की सूची में कुछ फ़ोल्डर्स जोड़ने की आवश्यकता है, तो केवल ignore अनुभाग जोड़ें:

 { "ignore": [ "test/fixture" ] }

मैच

उदाहरण के लिए, यदि आपको नियमों की एक शाखा प्रणाली की आवश्यकता है, तो bin निर्देशिका के लिए process.exit सक्षम करें, बस match सेक्शन का उपयोग करें:

 { "match": { "bin": { "remove-process-exit": true, } } }

प्लगइन्स

यदि आप उन प्लगइन्स का उपयोग करते हैं जो अंतर्निहित नहीं हैं और उपसर्ग putout-plugin- प्लग-इन हैं, तो आपको उन्हें rules अनुभाग में सक्रिय करने से पहले उन्हें plugins अनुभाग में शामिल करना होगा। उदाहरण के लिए, putout-plugin-add-hello-world कनेक्ट करने और add-hello-world नियम को सक्षम करने के add-hello-world , बस निर्दिष्ट करें:

 { "rules": { "add-hello-world": true }, "plugins": [ "add-hello-world" ] }

पुटआउट इंजन

putout इंजन एक कमांड-लाइन टूल है जो सेटिंग्स को पढ़ता है, फाइलों को लोड करता है, प्लगइन्स को लोड करता है और फिर प्लग-इन का परिणाम लिखता है।

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

पार्सिंग के लिए, एक ESTree संगत पार्सर का उपयोग किया जाता है (वर्तमान में estree प्लगइन के साथ estree , लेकिन भविष्य में परिवर्तन संभव है), और babel टूल का उपयोग परिवर्तन के लिए किया जाता है। बिलकुल babel क्यों? सब कुछ सरल है। तथ्य यह है कि यह एक बहुत लोकप्रिय उत्पाद है, अन्य समान उपकरणों की तुलना में बहुत अधिक लोकप्रिय है, और यह बहुत तेजी से विकसित हो रहा है। EcmaScript मानक में प्रत्येक नया प्रस्ताव एक बेबल प्लगइन के बिना पूरा नहीं होता है । बैबेल के पास एक पुस्तक, बैबल हैंडबुक भी है , जो बहुत अच्छी तरह से एक एएसटी पेड़ को पीछे हटाने और बदलने के लिए सभी सुविधाओं और उपकरणों का वर्णन करता है।

पुटआउट के लिए कस्टम प्लगइन

putout प्लगइन सिस्टम काफी सरल है, और बहुत ही एस्किल्ट प्लगइन्स के साथ-साथ बैबल प्लगइन्स के समान है। सच है, एक फ़ंक्शन के बजाय, putout प्लगइन को निर्यात करना चाहिए 3. यह कोड पुन: उपयोग को बढ़ाने के लिए किया जाता है, क्योंकि 3 कार्यों में डुप्लिकेटिंग कार्यक्षमता बहुत सुविधाजनक नहीं है, इसे अलग-अलग कार्यों में डालना और बस इसे सही स्थानों पर कॉल करना बहुत आसान है।

प्लगइन संरचना

तो Putout प्लगइन में 3 कार्य होते हैं:

report - एक संदेश देता है;
find - त्रुटियों वाले स्थानों की खोज करता है और उन्हें लौटाता है;
fix - इन स्थानों को fix करता है;

putout लिए एक प्लगइन बनाते समय याद रखने का मुख्य बिंदु इसका नाम है, इसे putout-plugin- शुरू करना चाहिए-। अगला उस ऑपरेशन का नाम हो सकता है जिसे प्लगइन निष्पादित करता है, उदाहरण के लिए, remove-wrong प्लगइन को इस तरह से बुलाया जाना चाहिए: putout-plugin-remove-wrong ।

आपको शब्दों को भी जोड़ना चाहिए: keywords अनुभाग में peerDependencies अनुभाग में peerDependencies और peerDependencies putout-plugin , और peerDependencies में "putout": ">=3.10" peerDependencies "putout": ">=3.10" निर्दिष्ट करें "putout": ">=3.10" , या वह संस्करण जो प्लगइन लिखने के समय होगा।

पुटआउट के लिए नमूना प्लगइन

एक उदाहरण प्लगइन लिखते हैं जो कोड से debugger शब्द को हटा देगा। ऐसा प्लगइन पहले से मौजूद है, यह @ putout / plugin-remove-debugger है और अब इस पर विचार करना काफी सरल है।

यह इस तरह दिखता है:

 //        module.exports.report = () => 'Unexpected "debugger" statement'; //     ,  debugger    Visitor module.exports.find = (ast, {traverse}) => { const places = []; traverse(ast, { DebuggerStatement(path) { places.push(path); } }); return places; }; //  ,     module.exports.fix = (path) => { path.remove(); };

यदि remove-debugger नियम को .putout.json में शामिल किया .putout.json , तो @putout/plugin-remove-debugger लोड किया जाएगा। सबसे पहले, find फ़ंक्शन को कहा जाता है, जो traverse फ़ंक्शन का उपयोग करके, एएसटी पेड़ के नोड्स को बायपास करेगा और सभी आवश्यक स्थानों को बचाएगा।

अगला चरण putout वांछित संदेश प्राप्त करने के लिए report करने के लिए बदल जाएगा।

यदि - --fix ध्वज का उपयोग किया जाता है, तो प्लग fix फ़ंक्शन को कॉल किया जाएगा और ट्रांसफ़ॉर्म किया जाएगा, इस स्थिति में, नोड हटा दिया जाएगा।

प्लगइन परीक्षण उदाहरण

प्लगइन्स के परीक्षण को सरल बनाने के लिए, @ पुटआउट / टेस्ट टूल को लिखा गया था। इसके मूल में, यह टेप के ऊपर एक आवरण से अधिक कुछ नहीं है, सुविधा और परीक्षण के सरलीकरण के लिए कई तरीके हैं।

remove-debugger प्लग के लिए परीक्षण इस तरह दिख सकता है:

 const removeDebugger = require('..'); const test = require('@putout/test')(__dirname, { 'remove-debugger': removeDebugger, }); //        test('remove debugger: report', (t) => { t.reportCode('debugger', 'Unexpected "debugger" statement'); t.end(); }); //    test('remove debugger: transformCode', (t) => { t.transformCode('debugger', ''); t.end(); });

Codemods

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

यहां एक उदाहरण परिवर्तन है जो tape और ट्राइ -टू-टेप कनेक्शन को एक सुपर - रैप कॉल के साथ बदल देता है : कन्वर्ट-टेप-टू-सुपर-रैप ।

eslint-प्लगइन-putout

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

 { "extends": [ "plugin:putout/recommended", ], "plugins": [ "putout" ] }

अब तक, इसमें केवल एक नियम है: one-line-destructuring , यह निम्न कार्य करता है:

 //  const { one } = hello; //  const {one} = hello;

ऐसे कई और नियम हैं, जिनमें आप खुद को और अधिक विस्तार से परिचित कर सकते हैं।

निष्कर्ष

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

एक उदाहरण के रूप में पुटआउट का उपयोग करके एएसटी ट्री परिवर्तन का व्यावहारिक अनुप्रयोग