👨🏻‍🔧 🖤 😏 हम फ्रंट-एंड Diary.ru विकसित करते हैं। भाग एक जावास्क्रिप्ट कोड बनाएँ और मान्य करें ♌️ 👞 👩🏿‍🚀

प्रविष्टि

Diary.ru के अस्तित्व के दौरान (और यह 4 साल से अधिक है), जावास्क्रिप्ट कोड की एक बड़ी राशि जमा हो गई है: कुछ प्लग-इन फ़ाइलों के रूप में एक अलग परियोजना में थे, कुछ सीधे नियंत्रण मार्कअप पर परिभाषित किए गए थे, और कुछ सीधे StringBuilder का उपयोग करके कोड-पीछे में एकत्र किए गए थे। इसमें जोड़ा गया:

स्थिर सामग्री प्राप्त करने के लिए HTTP अनुरोधों की बढ़ती संख्या - उदाहरण के लिए, केवल <head> टैग में सभी पृष्ठों पर 11 जावास्क्रिप्ट फाइलें भरी हुई थीं;
वैश्विक चर जो कभी-कभी एक-दूसरे को ओवरलैप करते हैं;

यह तय करने के बाद कि इसके साथ कुछ करने का समय है, हमने खुद को पहली प्राथमिकता वाला कार्य निर्धारित किया: एक हेडीफाइड पैकेज में <head> से सभी व्यक्तिगत रूप से जुड़ी फ़ाइलों को हटाने के लिए। उसी समय, कोड को तृतीय-पक्ष और "हमारा" में विभाजित किया गया था, जिसे किसी प्रकार के पार्सर द्वारा जांचने की योजना बनाई गई थी।

इस लेख में, हम आपको बताएंगे कि आपने इस समस्या को कैसे हल किया।

क्या उपयोग करें?

सबसे पहले, हमें यह तय करना था कि हम इस पैकेज के स्वचालित संयोजन का आयोजन किस माध्यम से करेंगे। बेशक, आप चींटी से MSBuild तक किसी भी निर्माण प्रणाली का उपयोग कर सकते हैं; आप अपनी खुद की सरल स्क्रिप्ट लिख सकते हैं - उदाहरण के लिए, रूबी या पायथन में। नतीजतन, हमने अपनी बाइक को न लिखने और एक ट्रैक्टर के साथ नाखूनों को हथौड़ा नहीं करने, बल्कि ग्रंट का उपयोग करने का फैसला किया। उन लोगों के लिए जो नहीं जानते हैं: ग्रंट एक जावास्क्रिप्ट टास्क रनर है, यह नोड.जेएस पर चलता है , और एक मुफ्त आईआईटी लाइसेंस के तहत वितरित किया जाता है। इस समाधान के रिश्तेदार "युवा" के बावजूद, यह पहले से ही एक उत्कृष्ट उपकरण के रूप में खुद को स्थापित कर चुका है - इसका उपयोग एडोब में ट्विटर और ब्रैकेट पर jQuery और क्वनिट, ट्वीटेक के निर्माण के लिए किया जाता है। इन सिफारिशों के अलावा, हमारे अपने कारण थे कि हमने ग्रंट को क्यों चुना:

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

वैसे, यह किसी के लिए कोई रहस्य नहीं है कि हमारी परियोजना ASP.NET पर काम करती है, इसलिए हमने इसे बंडल ट्रांसफॉर्मर से प्राप्त वेब ऑप्टिमाइज़ेशन फ्रेमवर्क का उपयोग करने की संभावना पर विचार किया। हालाँकि, हमने निम्नलिखित कारणों से इन निर्णयों को अस्वीकार कर दिया:

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

हालांकि, अगर भविष्य में ये उपकरण रूबी ऑन रेल्स से स्प्रोकेट के स्तर तक बढ़ जाएंगे, तो मैं इसे बाहर नहीं करता कि हम उनके विचार पर लौटेंगे।

चलो चलें!

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

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

 { "name": "Dnevnik", "version": "0.1.0", "private": true, "dependencies": { "grunt": "0.4.0", "grunt-cli": "0.1.6", "grunt-contrib-concat": "0.1.3", "grunt-contrib-jshint": "0.2.0", "grunt-contrib-uglify": "0.1.1", "grunt-hash": "0.2.2", "grunt-contrib-clean": "0.4.0" }, "engines": { "node": "0.10.0" } }

निर्भरता में, हम ग्रंट और इसके संस्करण, साथ ही आवश्यक प्लगइन्स को इंगित करते हैं। प्रारंभिक चरण में, हमने केवल छह प्लगइन्स का उपयोग किया:

grunt-cli - कमांड लाइन से ग्रंट को चलाने के लिए प्लगइन
grunt-contrib-concat - एक में फ़ाइलों की सूची को grunt-contrib-concat लिए प्लगइन
grunt-contrib-jshint - JSHint उपयोगिता का उपयोग करके जावास्क्रिप्ट कोड की जाँच करने के लिए प्लगइन
grunt-contrib-uglify - UglifyJS2 का उपयोग करके जावास्क्रिप्ट कोड को छोटा करने के लिए प्लगइन
grunt-hash - फ़ाइल नामों के लिए हैश राशि जोड़ने के लिए प्लगइन (ताकि फ़ाइल की सामग्री को कैश फ़्लश करने के लिए)
grunt-contrib-clean - अस्थायी फ़ाइलों और कलाकृतियों से निर्देशिका की सफाई के लिए प्लगइन

सभी पैकेजों को उनकी निर्भरता के साथ स्थापित करने के लिए, आपको केवल एक कमांड को कंसोल में उस निर्देशिका के सापेक्ष चलाने की आवश्यकता होती है, जहां package.json स्थित है:

 > npm install

सफल समापन के बाद, फ़ोल्डर .\node_modules दिखाई देगा, जिसमें सभी आवश्यक मॉड्यूल होंगे (यह .\node_modules माध्यम से स्थापित मॉड्यूल के लिए फ़ोल्डर का मानक नाम है)।
अगला, आपको Gruntfile.js की रूट डायरेक्टरी में Gruntfile.js बनाने की आवश्यकता है, Gruntfile.js सभी तर्क शामिल होंगे। इसकी संरचना बहुत सरल है:

 module.exports = function (grunt) { 'use strict'; grunt.initConfig({}); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-hash'); grunt.loadNpmTasks('grunt-contrib-clean'); grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'hash', 'clean']); };

अनिवार्य रूप से, यह नोड के लिए जावास्क्रिप्ट स्क्रिप्ट है। इसमें निम्नलिखित शामिल हैं:

एक रैपर फ़ंक्शन जो ग्रन्ट पैरामीटर लेता है,
grunt.initConfig() फ़ंक्शन, जिसमें सभी कार्यों के कॉन्फ़िगरेशन के साथ एक जावास्क्रिप्ट ऑब्जेक्ट पास होता है,
grunt.loadNpmTasks() फ़ंक्शन, जो grunt.loadNpmTasks() पैकेजों से कार्यों को लोड करता है,
grunt.registerTask() फ़ंक्शन, जो अपने स्वयं के कार्यों को पंजीकृत करता है।

कार्य शुरू करते समय, यह उस ऑब्जेक्ट में अपने नाम के साथ विशेषता को खोजने का प्रयास करता है जिसे grunt.initConfig() फ़ंक्शन में पारित किया गया था, और इसमें से अन्य विशेषताओं के माध्यम से option विशेषता और लक्ष्य के माध्यम से सभी सेटिंग्स प्राप्त होती हैं। किसी कार्य में असीमित संख्या में लक्ष्य हो सकते हैं, और प्रत्येक लक्ष्य अपने लिए कुछ सेटिंग्स को ओवरराइड कर सकता है। आप आधिकारिक प्रलेखन में कार्यों के कॉन्फ़िगरेशन के बारे में अधिक पढ़ सकते हैं।

ग्रंट को शुरू करने के लिए, आपको एप्लिकेशन रूट निर्देशिका के सापेक्ष कंसोल में निम्न कमांड को चलाने की आवश्यकता है:

 > .\node_modules\.bin\grunt.cmd

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

प्रत्येक डेवलपर्स को नोड.जेएस स्थापित करने और पैकेज बनाने की आवश्यकता नहीं होने के लिए, हमने JSON प्रारूप में एक सरल मैपिंग फ़ाइल बनाई (बेशक, सबसे सुंदर समाधान नहीं है, लेकिन हमने पहली बार में सब कुछ यथासंभव सरल बनाने का फैसला किया), जिसमें पैकेज का नाम सेट के अनुरूप था। कई फाइलों से:

 {"package.js": ["jquery.js", "foo.js", … "bar.js"]}

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

ग्रंट को चलाने के लिए कोड लिखे जाने के बाद और कार्यों को तैयार किया गया था, TeamCity में सभी बिल्ड एजेंटों पर नोड स्थापित करना आवश्यक था और PowerShell के माध्यम से स्क्रिप्ट चलाकर कार्रवाई में इसे आज़माएं। प्रत्येक बार नेटवर्क से आवश्यक निर्भरताएं डाउनलोड न करने के लिए (यह मत सोचिए कि यह ट्रैफ़िक पर हमारी स्थिरता नहीं है - हम सिर्फ इंटरनेट या एनपीएम रिपॉजिटरी पर निर्भर नहीं होना चाहते हैं), हमने उन्हें प्रत्येक बिल्ड एजेंट पर एक अलग फ़ोल्डर में सहेजने और कॉपी करने का निर्णय लिया उपयोग करने से पहले सही जगह पर। "सस्ता और हंसमुख," हमने सोचा (इस बारे में क्या कारण है, नीचे पढ़ें)। हालाँकि, इस स्थिति में, यह विचार करने योग्य है कि .\node_modules में पथ अधिक से अधिक लंबे हो सकते हैं जो कि Windows 260 वर्ण (Hi, MS-DOS) में अनुमत हों, इसलिए कॉपी और xcopy कमांड एक त्रुटि के साथ उड़ जाएंगे; / ई ध्वज के साथ वह रोबोकॉपी ।

हमें किन समस्याओं का सामना करना पड़ा और उन्हें कैसे हल करना है।

ग्रंट ने टीमसिटी पर लॉन्च करने के तुरंत बाद पहले सुअर को खिसकाया - हमें उनके काम का एक लॉग नहीं मिला। हमारी पॉवरशेल लिपियों में घूमना और यह महसूस करना कि समस्या हमारी तरफ नहीं है, हमने ग्रंट रिपॉजिटरी में इश्यू ट्रैकर को देखना शुरू किया और वहां एक उल्लेखनीय संदेश पाया। यह पता चला है कि यह समस्या न केवल हमारे साथ दिखाई देती है और यह नोड में एक बग के साथ जुड़ा हुआ है। जेएस, जिसमें विंडोज पर स्टड / stdout / stderr स्ट्रीम अवरुद्ध नहीं हैं। वे इसे 0.12.0 संस्करण में ठीक करने का वादा करते हैं, लेकिन अब, ग्रंट के लिए हमारे साथ काम करने के लिए, हमें एक बहुत ही सुंदर हैक का सहारा नहीं लेना पड़ा: हमने ग्रंट को दो बार शुरू किया - पहली बार हमें सही निकास कोड मिला, और दूसरे ने स्ट्रीम को पुनर्निर्देशित किया। फ़ाइल में आउटपुट, जिसके बाद इस फ़ाइल की सामग्री प्रदर्शित की गई।

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

आधिकारिक npm रिपॉजिटरी CouchDB के साथ काम करती है, और एक स्थानीय रिपॉजिटरी बनाने के लिए हमें इसकी प्रतिकृति बनाने की आवश्यकता है। हमने जल्दी से वर्चुअल मशीन (फिर से, विंडोज चलाने वाले) को उठाया और उस पर CouchDB स्थापित किया - क्योंकि यह स्थापित करने से अधिक जटिल नहीं है। इसके अलावा, स्थानीय नेटवर्क से रिपॉजिटरी तक पहुंचने के लिए, कॉन्फ़िगरेशन फ़ाइल CouchDB में दो मानों को बदलना होगा <CouchDB install directory>\etc\couchdb\local.ini :

 secure_rewrites = false bind_adress = 0.0.0.0

आप वर्चुअल मशीन के 5984 पोर्ट पर नियमित GET अनुरोध भेजकर और कुछ इस तरह से प्रतिक्रिया प्राप्त करके सेटिंग्स की शुद्धता को सत्यापित कर सकते हैं:

 {"couchdb":"Welcome","version":"1.2.1"}

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

 > npm shrinkwrap

वह npm-shrinkwrap.json बनाएगी, जिसमें सभी आश्रितों सहित परियोजना के बारे में सभी जानकारी होगी। लेकिन, चूंकि हमें केवल उनके नामों की आवश्यकता होगी, इसलिए हमें एक छोटी पुनरावर्ती स्क्रिप्ट लिखकर थोड़ी अधिक मेहनत करनी होगी जो उन्हें परिणामी फ़ाइल से मिल जाएगी (मैं इसका कोड नहीं दूंगा, क्योंकि यह अविश्वसनीय रूप से प्रतिबंध है)। संकुल के नामों के साथ सूची प्राप्त करने के बाद, यह हमारे लिए उनकी प्रतिकृति के लिए काउचबीडी के लिए एक सामान्य HTTP अनुरोध करने के लिए रहता है। हम इसके लिए curl उपयोगिता का उपयोग करेंगे (हालांकि आप किसी अन्य का उपयोग कर सकते हैं) और सुविधा के लिए हम निम्नलिखित सामग्री के साथ एक JSON फ़ाइल deps.json जिसे deps.json कहा जाता है:

 { "source": "http://isaacs.iriscouch.com/registry/", "target": "registry", "create_target": true, "doc_ids": ["_design/app", "_design/ghost"] }

जहाँ "doc_ids" विशेषता के मूल्य को आवश्यक निर्भरता की सूची (संकुल "_design/app" , "_design/ghost" डेटाबेस को एक रिपॉजिटरी के रूप में व्यवस्थित करने) के साथ पूरक करने की आवश्यकता है। और अब केवल कंसोल में निम्न कमांड निष्पादित करें:

 > .\curl.exe -X POST http://user:password@npm:5984/_replicate -d@deps.json -H "Content-Type: application/json"

सर्वर से प्रतिक्रिया फिर से JSON प्रारूप में होगी, और यह दो विशेषताओं पर ध्यान देने योग्य है: "ok" और "doc_write_failures" । यदि पहला true और दूसरा 0 , तो पैकेट प्रतिकृति सफल रहा।

हमारे लिए जो कुछ करना बाकी था, वह ग्रंट के लिए पैच के साथ जीथब से प्राप्त कांटा प्रकाशित किया गया था। ऐसा करने के लिए, इस कांटे के package.json फ़ाइल में संस्करण का नाम बदलें, स्थानीय उपयोगकर्ता रिपॉजिटरी में इसे पंजीकृत करें:

 > npm adduser --registry="http://npm:5984/registry/_design/app/_rewrite/"

और पैकेज प्रकाशित करें:

 > npm publish --registry="http://npm:5984/registry/_design/app/_rewrite/"

यही है, काम किया जाता है, पैकेज हमारी स्थानीय रिपॉजिटरी में प्रकाशित होता है, आपको सिर्फ package.json प्रोजेक्ट में इसका संस्करण बदलने के लिए याद रखना चाहिए।
अब, सभी पैकेजों को स्थापित करने के लिए, आप निम्नलिखित कमांड का उपयोग कर सकते हैं (और करना चाहिए):

 > npm install --registry="http://npm:5984/registry/_design/app/_rewrite/"

वैसे, बहुत पहले नहीं हमने टीमसिटी पर ग्रंट को चलाने के लिए पॉवरशेल स्क्रिप्ट का उपयोग करने से इनकार कर दिया और इसके लिए एक प्लगइन का उपयोग करने के लिए स्विच किया। प्लगइन TeamCity.Node कहलाता है और आपको TeamCity पर नोड .js स्क्रिप्ट्स, npm, ग्रंट और फैंटमजस चलाने की अनुमति देता है, जबकि यह चेक करता है कि बिल्ड एजेंट पर n.js और npm स्थापित हैं या नहीं। जबकि हम उसके काम से बिलकुल खुश हैं, अगर केवल इसलिए कि उसकी मदद से हमें पता चला कि हम एजेंटों में से एक पर नोड.जेएस लगाना भूल गए हैं।

आगे क्या है?

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

लेकिन हम अपने अगले लेखों में इस बारे में बात करेंगे।

हम फ्रंट-एंड Diary.ru विकसित करते हैं। भाग एक जावास्क्रिप्ट कोड बनाएँ और मान्य करें

प्रविष्टि

क्या उपयोग करें?

चलो चलें!

हमें किन समस्याओं का सामना करना पड़ा और उन्हें कैसे हल करना है।

आगे क्या है?

More articles: