📙 👩🏽‍⚖️ 🔼 Yeoman.io के लिए एक जनरेटर लेखन 🖕🏻 🧤 🤮

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

तुर्क जनरेटर (इसके बाद बस जनरेटर के रूप में जाना जाता है) एक npm पैकेज है, जिसके निर्देशों की मदद से योमन एप्लिकेशन फ्रेमवर्क एकत्र करता है। इस लेख में, मैं अपनी परियोजनाओं (मैरियनट, कॉफ़ी, सैस + कम्पास, आवश्यकता) पर उपयोग होने वाले आर्किटेक्चर को मचान के लिए एक जनरेटर बनाने के एक उदाहरण पर विचार करूंगा।

प्रारंभिक डेटा

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

चरण 1 - जनरेटर को मचान

#      $ mkdir generator-puppeteer && cd $_ #     $ yo generator

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

निर्देशक:

एप्लिकेशन - निर्देशिका जहां परियोजना सामग्री से संबंधित हमारी सभी फाइलें स्थित होंगी, उदाहरण के लिए: bower.json, package.json, हमारे सभी पृष्ठों के लिए टेम्पलेट आदि।
नोड_मॉड्यूल्स - एक निर्देशिका जेनरेटर निर्भरता के साथ पैकेज द्वारा निर्देशित। जसन , उदाहरण के लिए चाक या मोचा ।
परीक्षण - यहाँ हमारे जनरेटर के लिए सभी परीक्षण झूठ होंगे।

फाइलें:

.editorconfig - एक पाठ संपादक के लिए विन्यास
.itattributes - git के लिए विशिष्ट निर्देशिका या फ़ाइल सेटिंग्स
.itignore - फ़ाइलों और निर्देशिकाओं की एक सूची जो गिट इंडेक्स नहीं करेगी
.jshintrc - jshint config
package.json - जनरेटर निर्भरता फ़ाइल
README.md - जीथब के लिए प्रोजेक्ट विवरण फ़ाइल
.travis.yml - CI के लिए प्लेटफॉर्म का संकेत

तो, हमारे जनरेटर का कंकाल तैनात है।

चरण 2 - रन फ़ाइल का संपादन

व्यक्तिगत रूप से, जब मैं एक अपरिचित वास्तुकला को देखता हूं, तो एक तार्किक सवाल उठता है: परियोजना का प्रवेश बिंदु कहां है। हमारे मामले में, यह ऐप निर्देशिका में स्थित index.js फ़ाइल है। यह निम्नानुसार काम करता है: सबसे पहले, हम package.json फ़ाइल तक पहुँच प्राप्त करते हैं और इनिशियलाइज़ेशन पूरा होने की घटना के लिए सदस्यता लेते हैं। यदि --स्काइप-इंस्टॉल ध्वज को पारित नहीं किया गया था, तो आरंभीकरण के बाद, पैकेज.जॉन और बोवर.जेसन में निर्दिष्ट निर्भरताएं स्थापित की जाएंगी। कुछ भी जटिल नहीं है, है ना? अब हम scaffolder के मानक UI को अनुकूलित करने का प्रयास करते हैं। ऐसा करने के लिए, हमें AskFor विधि को बदलना होगा - यह वह है जिसे आरंभीकरण के बाद पहला कहा जाता है और उपयोगकर्ता से आवश्यक जानकारी को मतदान के लिए जिम्मेदार है (और बहुत अच्छा ASCII कला भी खींचता है)। यह विधि इंक्वायरर लाइब्रेरी के कार्यान्वयन का उपयोग करती है, जो आपको प्रश्न बनाने और उपयोगकर्ता से जानकारी प्राप्त करने की अनुमति देती है। आइए उपयोगकर्ता से कुछ दिलचस्प जानने की कोशिश करें, उदाहरण के लिए उनके आवेदन का नाम:

स्रोत कोड:

 var prompts = [{ type: 'confirm', name: 'someOption', message: 'Would you like to enable this option?', default: true }]; this.prompt(prompts, function (props) { this.someOption = props.someOption; done(); }.bind(this));

संपादित कोड:

 var prompts = [{ type: 'prompt', name: 'appName', message: 'Could you tell me the name of your new project?', }]; this.prompt(prompts, function (answers) { this.appName = answers.appName; done(); }.bind(this));

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

चरण 3 - अनुप्रयोग संरचना को मचान बनाने के लिए निर्देश लिखना

अब आइए ऐप फ़ंक्शन को देखें, हमारे जनरेटर का दिल। यह वह जगह है जहां हम अपने आवेदन के ढांचे को इकट्ठा करते हैं। इस फ़ंक्शन के शरीर में क्या होता है:

 app: function () { this.mkdir('app'); this.mkdir('app/templates'); this.copy('_package.json', 'package.json'); this.copy('_bower.json', 'bower.json'); }

जैसा कि हम देख सकते हैं, डिफ़ॉल्ट रूप से यहां सब कुछ बहुत ताजा है: हम सिर्फ 2 निर्देशिका बनाते हैं और हमारी परियोजना निर्देशिका में 2 टेम्पलेट कॉपी करते हैं। प्रतिलिपि फ़ंक्शन केवल दो पैरामीटर लेता है: sourceRoot से स्रोत फ़ाइल और targetRoot में बनाई जाने वाली फ़ाइल का नाम। कोड लिखें जो हमारे लिए index.html फ़ाइल बनाएगा। लेकिन शायद मैं उन विकल्पों के आधार पर सूचकांक की सामग्री को बदलना चाहता हूं जो मैं स्थापना से पहले चुन सकता हूं। उदाहरण के लिए, मैं अपने प्रोजेक्ट का नाम एक टैग में सेट करना चाहता हूं - यह। यहां पर पर्याप्त नहीं है। यह टेमप्लेट यहां हमारी मदद करेगी। आइए इन कार्यों पर अधिक विस्तार से ध्यान दें। दोनों फ़ंक्शन क्रियाओं / क्रियाओं की अशुद्धता का हिस्सा हैं, और टेम्प्लेट निर्देशिका से एप्लिकेशन डायरेक्टरी में फ़ाइलों को स्थानांतरित करने के लिए किया जाता है, एक अपवाद के साथ: टेम्प्लेट फ़ंक्शन टेम्पलेट के साथ काम कर सकता है, अर्थात। इसकी मदद से, हम फ़ाइल को sourceRoot से कॉपी कर सकते हैं, उसमें डेटा पेस्ट कर सकते हैं और उसे targetRoot पर भेज सकते हैं। चलो ऊपर वर्णित उदाहरण का उपयोग करके ऐसा करने का प्रयास करें। प्रोजेक्ट डायरेक्टरी (डिफ़ॉल्ट ऐप / टेम्प्लेट) के sourceRoot में _index.html फ़ाइल बनाएँ। एक उदाहरण के रूप में, आप इस जिस्ट का उपयोग कर सकते हैं। अब इस तरह से कुछ पाने के लिए थोड़ा ऐप फंक्शन जोड़ें:

 app: function () { this.mkdir('app'); this.mkdir('app/templates'); this.template('_index.html', 'index.html'); this.copy('_package.json', 'package.json'); this.copy('_bower.json', 'bower.json'); }

तो हम अपने टेम्पलेट के लिए डेटा कहाँ से प्राप्त करते हैं? डिफ़ॉल्ट रूप से, यदि डेटा तीसरी विशेषता से स्पष्ट रूप से पारित नहीं होता है, तो टेम्पलेट इंजन डेटा के साथ हैश के रूप में जनरेटर के दायरे का उपयोग करता है, अर्थात। जब हमने app.ame को इस .appName में शीघ्रता से सहेजा है, तो हमने इसे स्वचालित रूप से अपने सभी टेम्प्लेट (जहाँ डेटा हैश सीधे निर्दिष्ट नहीं किया है) में उपलब्ध कराया है। महान, अब हम अपनी फ़ाइलों को पैरामीटर कर सकते हैं। अगला कदम आर्किटेक्चर डिज़ाइन है। चूंकि मैं अपनी परियोजना की वास्तुकला के लिए एक जनरेटर लिख रहा हूं, तो इस लेख में मैं इसकी वास्तुकला पर भरोसा करूंगा, अर्थात्:

ऐप - एप्लीकेशन रूट
ऐप / टेम्प्लेट - टेम्प्लेट
ऐप / कोर - आधार कक्षाएं
एप्लिकेशन / आम - विभिन्न अशुद्धियाँ, आदि।
एप्लिकेशन / स्टेटिक - स्टेटिक्स (चित्र, फोंट)
एप्लिकेशन / घटक - घटक
एप्लिकेशन / मॉड्यूल - मॉड्यूल
एप्लिकेशन / स्टाइलशीट - शैलियों
एप्लिकेशन / परिवाद - तीसरे पक्ष के पुस्तकालय

यह वास्तुशिल्प घटक को पूरा करता है, यह केवल उन पुस्तकालयों को कॉन्फ़िगर करने के लिए रहता है जिन्हें हम डिफ़ॉल्ट रूप से उपयोग करना चाहते हैं। लेकिन सवाल यह है: हम एक जनरेटर लिख रहे हैं जो विभिन्न लोगों द्वारा उपयोग किया जाएगा जो आवेदन के वास्तु समाधान पर हमारे विचार साझा करते हैं, लेकिन क्या वे सभी एक ही उपकरण-श्रृंखला का उपयोग करेंगे? शायद ही। हम, सभ्य डेवलपर्स के रूप में, निश्चित रूप से, इस तरह के एक पल की उम्मीद करनी चाहिए और कम से कम प्रौद्योगिकियों के न्यूनतम चयन को जोड़ना चाहिए जो हमारा जनरेटर "बॉक्स से बाहर" का समर्थन करने की योजना बना रहा है। मेरे मामले में, यह आवश्यकताएँ, कॉफीस्क्रिप्ट और एसएएस + कम्पास होगा, और जब भी मैं अपने जनरेटर का उपयोग करता हूं, तो उपयोगकर्ता से पूछा जाएगा कि वह किस तकनीक को परियोजना में जोड़ना चाहता है। और Gruntfile जोड़ना मत भूलना! इन अतिरिक्तताओं को देखते हुए, हमारे ऐप विधि का कोड निम्नानुसार होगा:

 app: function () { // Core application folder this.mkdir('app'); // Templates application folder this.mkdir('app/templates'); // Folder for base classes this.mkdir('app/core'); // Common project files this.mkdir('app/common'); // Static content, like images or fonts this.mkdir('app/static'); // Logic components for the project this.mkdir('app/components'); // Modules of the project this.mkdir('app/modules'); // Stylesheets directory this.mkdir('app/stylesheets'); // 3-rd party members libs this.mkdir('app/libs'); this.template('Gruntfile.js', 'Gruntfile.js'); this.template('_index.html', 'index.html'); // RequireJS config & App this.copy('js/app.js', 'app/app.js'); this.copy('js/main.js', 'app/main.js'); this.copy('_package.json', 'package.json'); this.copy('_bower.json', 'bower.json'); this.copy('_.bowerrc', '.bowerrc'); }

कृपया ध्यान दें, मैं अंत में .bowerrc फ़ाइल जोड़ता हूं, इसमें मैं इंगित करता हूं कि निर्भरताएं ऐप / लिबास निर्देशिका में संग्रहीत की जानी चाहिए।

चरण 4 - एक उप जनरेटर बनाना

इसलिए, बहुत गहराई से नहीं, हम प्रोजेक्ट संरचना और index.html के लिए एक साधारण जनरेटर लिखने में सक्षम थे, जो हमारे प्रोजेक्ट का प्रवेश बिंदु होगा। यह अच्छा लग रहा है, है ना? लेकिन येमन और भी कर सकता है! चलो इसे थोड़ा और निचोड़ने की कोशिश करते हैं!
जो हमने पहले ही लिखा है, उसके आधार पर, तुर्क का उपयोग केवल प्रारंभिक चरण में वास्तुकला को तैनात करने के लिए हमारे साथ किया जाता है, लेकिन अब हम इसका उपयोग हमारे आवेदन के घटकों के लिए टेम्पलेट बनाने के लिए करेंगे। जैसा कि मैंने ऊपर लिखा है, हमारी परियोजना में (कम से कम हमारी परियोजना की वास्तुकला में), मैंने ऐप / घटकों के फ़ोल्डर को जोड़ा, जिसमें मैं कुछ सार घटकों को जोड़ने जा रहा हूं; अब थोड़ा और विस्तृत: एक घटक द्वारा मेरा मतलब है एमवीसी जैसे कोड का एक निश्चित संगठन, जो तार्किक संस्थाओं के साथ काम करना आसान बनाता है। इसलिए, उदाहरण के लिए, टिप्पणियों वाला एक ब्लॉक हमारे आवेदन के कई पन्नों पर होना चाहिए। मॉड्यूल से कोड को कॉपी-पेस्ट नहीं करने के लिए और इसे हमेशा एक सुसंगत स्थिति में रखने के लिए, हम एक कमेंटपॉइंट बनाते हैं, जिसे हम इसके एपीआई के माध्यम से विभिन्न मॉड्यूल से कॉल करते हैं:

 var _this = this; var commentComponent = new CommentComponent; commentComponent.getUserComments({user_id: 1}).done(function(commentsView) { _this.layout.comments.show(commentsView); });

तदनुसार, यह मुझे चोट नहीं पहुंचाएगा यदि मैं ऐसे घटकों को जितनी जल्दी हो सके बना सकता हूं (आखिरकार, कोई भी फ़ाइलों और फ़ोल्डरों का एक गुच्छा बनाना पसंद नहीं करता है?)। आप कैसे कहते हैं, अगर हमारा घटक सुविधाजनक टीम द्वारा बनाया गया है

 #   CommentsComponent $ yo puppeteer:component 'Comments'

तो, आइए तय करें कि यह टीम क्या करने में सक्षम होना चाहिए? उदाहरण के लिए, एप्लिकेशन / घटकों / टिप्पणियों के फ़ोल्डर में एक एमवीसी आर्किटेक्चर बनाएं, साथ ही फाइलों के आवश्यक न्यूनतम सेट उत्पन्न करें:

मॉडल / टिप्पणी .js
संग्रह / टिप्पणी। js
views / comments.js
विचार / टिप्पणी। जेएस
controller.js

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

 #  - "component" $ yo generator:subgenerator 'component'

तो, आइए देखें कि उसने हमारे लिए क्या बनाया:

एप्लिकेशन / घटक
एप्लिकेशन / घटक / index.js
एप्लिकेशन / घटक / टेम्पलेट / somefile.js

इसके मूल में, एक उप-जनरेटर एक ही साधारण जनरेटर है, जिसमें एक ही एपीआई और लगभग उसके बड़े भाई के समान संरचना है। इसलिए, जब हम index.js खोलते हैं, तो हम क्या देखते हैं: हमारा घटक NamedBase से विरासत में मिला है और इसमें 2 पूर्वनिर्धारित विधियाँ हैं: init और files। जैसा कि आप अनुमान लगा सकते हैं, init में हमें कॉलिंग उप-जनरेटर के लिए सिर्फ बधाई-संदेश मिलता है, और फ़ाइलों के तरीके में हम सीधे जनरेटर के सभी तर्क का वर्णन करते हैं। मैं इस पर ध्यान केंद्रित नहीं करूंगा क्योंकि यहां कुछ नया नहीं है। आप मेरे उदाहरण को देख सकते हैं।

इसके बाद, फाइलें खुद ही बनाएं। इसके अलावा कुछ भी नया नहीं है, हमने पहले ही यह ऊपर कर दिया है। हमेशा की तरह, आप यहां मेरा संस्करण पा सकते हैं।

चरण 5 - हमारा जेनरेटर लॉन्च करना

अपना जनरेटर शुरू करने के लिए, हमें सबसे पहले अपने npm पैकेज का लिंक बनाना होगा। ऐसा करने के लिए, जनरेटर फ़ोल्डर से, आपको कमांड चलाने की आवश्यकता है:

 $ npm link

अब जब लिंक बन गया है, हम एक परीक्षण निर्देशिका बना सकते हैं और महसूस कर सकते हैं कि हमें क्या मिला:

 $ mkdir TestProject && cd $_ && yo puppeteer

Yeoman.io के लिए एक जनरेटर लेखन