स्वचालित स्वरूपण, लाइनिंग, परीक्षण और ऑटो-जनरेट किए गए दस्तावेज़ के साथ फ्रंट-एंड प्रोजेक्ट को कैसे सेटअप करें

मूल पोस्ट रूसी में

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

पढ़ने के बाद आपको अगली सुविधाओं के साथ अपना स्वयं का npm-तैयार प्रोजेक्ट मिलेगा:

• पाठ स्वरूपण और कोड शैली
• कोड कवरेज और दहलीज के साथ स्वचालित परीक्षण
• एकीकृत प्रतिबद्ध शैली
• कोड से उत्पन्न प्रलेखन और कमिट करता है
• स्वचालित प्रकाशित प्रक्रिया

चलो चलते हैं!

आवश्यक शर्तें

एक नया फ़ोल्डर बनाएं, नए रिपॉजिटरी को शुरू करें, प्रोजेक्ट करें और अगले चरण पर जाएं।

git init npm init npm i -D typescript ./node_modules/.bin/tsc --init 

कोड स्वरूपण

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

अगली सामग्री के साथ परियोजना की जड़ में .editorconfig बनाएं (अपनी इच्छित शैली के लिए इसे बदलने के लिए स्वतंत्र महसूस करें)

 #root = true [*] indent_style = space end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true max_line_length = 100 indent_size = 4 [*.md] trim_trailing_whitespace = false 

यह वास्तव में भयानक है, लेकिन कभी-कभी यह आपकी आवश्यकताओं को पूरा करने के लिए पर्याप्त शक्ति नहीं है। यह सुनिश्चित करने के लिए कि सभी अच्छी तरह से स्वरूपित प्रीटियर दिखाई देता है। यदि आप कोड को प्रारूपित करना भूल जाते हैं, तो प्रीटीयर आपके लिए यह कर देगा।

 npm i -D prettier 

इस कमांड को स्क्रिप्ट्स सेक्शन में जोड़ें

 "prettier": "prettier --config .prettierrc.json --write src/**/*.ts" 

और प्रॉजेक्ट के रूट में अपनी सेटिंग्स के साथ .prettierrc.json फ़ाइल जोड़ें

 { "tabWidth": 4, "useTabs": false, "semi": true, "singleQuote": true, "trailingComma": "es5", "arrowParens": "always" } 

अब आप कुछ कोड लिख सकते हैं और "npm run prettier" चलाने का प्रयास कर सकते हैं। Prettier src फोल्डर को चेक करेगा और आपकी तरफ से बिना किसी मदद के अपने कोड को अपने आप फॉर्मेट कर देगा!

कोड शैली

कोड शैली - जैसे === का उपयोग करने से बचना = = या छायांकन चर की भी जाँच करनी होगी। इस उद्देश्य के लिए, हम tslint लेंगे । यदि आप जावास्क्रिप्ट पसंद करते हैं - इसके बजाय एस्लिंट लें ।

 npm i -D tslint ./node_modules/.bin/tslint --init 

अंतिम कमांड आपके लिए tslint.json फाइल बनाएगी। यह आपकी सेटिंग्स को बनाए रखता है और पहले से ही tslint का विस्तार करता है: नियमों के सेट की सिफारिश की जाती है, लेकिन आप जो चाहें उन्हें बढ़ा या ओवरराइड कर सकते हैं। अपने package.json में लिंट कमांड जोड़ना न भूलें।

package.json

 "lint": "tslint -c tslint.json 'src/**/*.ts' 'tests/**/*.spec.ts'" 

जैसा कि आप इसे src और परीक्षण फ़ोल्डर के साथ काम करने के लिए सेटअप देखते हैं, इसलिए आपके सभी कोड को वहां रखा जाना चाहिए।

परीक्षण

अब हमारे परीक्षणों को स्थापित करने का समय है। कर्म और अन्य संबंधित निर्भरताएं स्थापित करें

 npm i -D karma karma-jasmine jasmine karma-typescript karma-chrome-launcher @types/jasmine ./node_modules/.bin/karma init 

और नए बनाए गए ब्लॉक को नए बनाए गए कर्म में जोड़ें ।conf.js

 karmaTypescriptConfig : { include: ["./src/**/*.ts", "./tests/**/*.spec.ts"], tsconfig: "./tsconfig.json", reports: { "html": "coverage", "lcovonly": { directory: './coverage', filename: '../lcov.dat' } }, coverageOptions: { threshold: { global: { statements: 60, branches: 60, functions: 60, lines: 60 }, file: { statements: 60, branches: 60, functions: 60, lines: 60, } } }, } 

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

अद्यतन पैकेज। Json

 "test": "karma start" 

और इसे चलाने की कोशिश करें। परीक्षण फ़ोल्डर के अंदर src फ़ोल्डर और परीक्षणों के अंदर कुछ कोड लिखना न भूलें। इस तरह आपकी कोड कवरेज रिपोर्ट इस तरह दिखाई देगी:

Btw, यदि आप निरंतर एकीकरण (जैसे ट्रैविस, जेनकिंस या इतने पर) का उपयोग करने की योजना बनाते हैं तो क्रोम धावक को हेडलाइटर के साथ कठपुतली के रूप में बदलना बेहतर है। HeadlessChrome और CI के बारे में अधिक जानकारी के लिए - GitHub पर मेरे डेमो रिपॉजिटरी की जाँच करें।

प्रतिबद्ध शैली

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

कमिटमैन और पारंपरिक-चैंज एडाप्टर स्थापित करें

 npm i -D commitizen npm i -D cz-conventional-changelog 

स्क्रिप्ट अपडेट करें

 "commit":"git-cz" 

पैकेज के अंदर नया कॉन्फ़िगरेशन अनुभाग जोड़ें। नागरिक के लिए संदेश।

 "config": { "commitizen": { "path": "./node_modules/cz-conventional-changelog" } } 

एक छवि बनाने के लिए इस छवि को देखने के लिए एक प्रतिबद्ध बनाने या जांचने की कोशिश करें कि यह कैसा दिखेगा:

प्रलेखन

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

यहाँ यह एक उदाहरण है, कि टाइप्डोक ने मेरे कार्य का वर्णन कैसे किया है ।NumberStrict:

 npm i -D typedoc 

package.json

 "doc": "typedoc --out docs/src" 

एक और अच्छा विचार अपनी परिवर्तन-लॉग फ़ाइल को ऑटो-जनरेट करना भी है। जैसा कि मैंने पहले उल्लेख किया है, कमिटमेंट पारंपरिक-चेंगलॉग का समर्थन करता है। इसलिए, हम कमिट ले सकते हैं और उन्हें परिवर्तन-लॉग फ़ाइल में बदल सकते हैं।

पारंपरिक-चैंज-क्लोग स्थापित करें

 npm i -D conventional-changelog-cli 

और नए कमांड के साथ package.json को अपडेट करें

 "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s" 

चिंता न करें, कोणीय का अर्थ केवल शैली प्रारूपण और अधिक कुछ नहीं है। अब, आपका चैंज बोगो की तरह बन जाएगा:

बिल्ड

बिल्ड काफी सरल है और पैकेज में केवल निर्माण और स्वच्छ कमांड को जोड़ने की बात है

 "clean":"rmdir dist /S /Q", "build": "tsc --p ./ --sourceMap false", 

यदि आपको बंडलिंग या मिनिफिकेशन की आवश्यकता है - तो कुरकुरीज़ को आज़माएं ।

स्वचालन

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

कर्कश स्थापित करें

 npm i -D husky 

और package.json के अंदर कुछ हुक का वर्णन करें

 "precommit":"npm run prettier", "prepush": "call npm run lint && call npm run test" 

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

प्रकाशित करना

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

 "preversion": "npm run test", "version": "call npm run clean && call npm run build && call npm run doc && call npm run changelog && git add . && git commit -m 'changelogupdate' --no-verify", "postversion": "git add . && git push && git push --tags" 

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

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

 "main": "./dist/index.min.js", "types": "./dist/index.d.ts", "files": [ "dist/", "src/", "tests/" ] 

यह सब, आपका भयानक प्रोजेक्ट जाने के लिए तैयार है!

उपयोगी लिंक

• .editorconfig
• खूबसूरत
• tslint
• eslint
• typedoc
• esdoc
• commitizen
• परंपरागत बदलाव का-CLI
• कर्कश
• डेमो

पढ़ने के लिए धन्यवाद। यदि आपके कोई प्रश्न हैं, तो कृपया मेरे डेमो रिपॉजिटरी को यहां देखें या टिप्पणियों में पूछें।

आपका दिन शुभ हो!