खरोंच से एक कोणीय परियोजना कैसे बनाएं और कॉन्फ़िगर करें

संक्षिप्त परिचय

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

विकास का वातावरण तैयार करना

Git

पहली बात यह है कि किसी भी विकास के वातावरण पर स्थापित होने की आवश्यकता है। अपने ऑपरेटिंग सिस्टम पर Git को डाउनलोड और इंस्टॉल करें।

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

//    (  )   $ git config --global user.name "John Doe" $ git config --global user.email johndoe@example.com //            $ git config user.name "John Doe" $ git config user.email johndoe@example.com

NodeJs और NVM

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

MacOs पर, आपको स्थापित करने से पहले अपने। निर्देशिका में एक .zshrc फ़ाइल बनानी होगी।

 $ touch ~/.zshrc

एनवीएम को स्थापित या अपग्रेड करने के लिए निम्न में से कोई एक कमांड चलाएँ। टीम के संस्करण को अपडेट किया जा सकता है, इसलिए यहां नवीनतम संस्करण की जांच करें ।

 $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash $ wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash

NodeJs का नवीनतम LTS संस्करण स्थापित करें।

 $ nvm install 'lts/*'

इसे डिफ़ॉल्ट के रूप में सेट करें।

 $ nvm use 'lts/*' $ nvm alias default 'lts/*'

MacOs पर, nvm कॉल करने के लिए ~ / .zshrc फ़ाइल को स्वचालित रूप से उपयोग करने के लिए निम्न कोड जोड़ें । जब आप उस निर्देशिका में जाते हैं जिसमें nnm फ़ाइल होती है जिसमें nvm बताती है कि कौन से संस्करण का उपयोग करना है। अन्य ऑपरेटिंग सिस्टम के लिए मैनुअल पढ़ें।

 # place this after nvm initialization! autoload -U add-zsh-hook load-nvmrc() { local node_version="$(nvm version)" local nvmrc_path="$(nvm_find_nvmrc)" if [ -n "$nvmrc_path" ]; then local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")") if [ "$nvmrc_node_version" = "N/A" ]; then nvm install elif [ "$nvmrc_node_version" != "$node_version" ]; then nvm use fi elif [ "$node_version" != "$(nvm version default)" ]; then echo "Reverting to nvm default version" nvm use default fi } add-zsh-hook chpwd load-nvmrc load-nvmrc

सीएलआई स्थापना और परियोजना निर्माण

एनपीएम पैकेज मैनेजर का उपयोग करके सीएलआई स्थापित करें।

 $ npm install -g @angular/cli

अपने प्रोजेक्ट फ़ोल्डर में जाएं और एक रिक्त कोणीय प्रोजेक्ट बनाएं

 $ cd ~/Projects $ ng new --create-application false --new-project-root apps project-name

हमने नए एप्लिकेशन के लिए अनुकूलित एप्लिकेशन निर्देशिका के साथ एक खाली प्रोजेक्ट बनाया। दूसरे शब्दों में, हमने मोनोरेपोज़िटरी का आधार तैयार किया।

मोनो रिपॉजिटरी में पहला एप्लिकेशन बनाएं और बनाएं।

 $ cd project-name $ ng generate application --routing true --style scss website $ git add . $ git commit -m 'website application created'

अतिरिक्त एप्लिकेशन बनाने के लिए, बस वेबसाइट के बजाय एक अलग एप्लिकेशन नाम के साथ इस चरण को दोहराएं।

पुस्तकालय निर्माण

मैं आमतौर पर libs फ़ोल्डर में लाइब्रेरी बनाने की सलाह देता हूं। ऐसा करने के लिए, हमें angular.json फ़ाइल में एक पंक्ति बदलनी होगी:

 "newProjectRoot": "apps",

निम्नलिखित लाइन पर:

 "newProjectRoot": "libs",

और कमांड निष्पादित करें:

 $ ng generate library @group-name/lib-name

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

 "@angular/common" "@angular/compiler" "@angular/core" "@angular/forms"

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

और अपनी पिछली स्थिति में angular.json को वापस करना न भूलें: "newProjectRoot": "apps"

अतिरिक्त विन्यास

NodeJs संस्करण

इसमें lts/* टेक्स्ट के साथ एक .nvmrc फ़ाइल जोड़ें। आप नोड का एक विशिष्ट संस्करण भी निर्दिष्ट कर सकते हैं, उदाहरण के लिए 12.13.1 । यदि आपने मेरे पिछले निर्देशों का पालन किया है तो यह संस्करण अपने आप स्थापित हो जाएगा। आप $ nvm use करके मैन्युअल रूप से इस संस्करण को भी सक्रिय कर सकते हैं।

 $ touch .nvmrc $ echo "lts/*" > .nvmrc

अशक्त और अपरिभाषित के लिए सख्त जाँच

tsconfig.json और अपरिभाषित के लिए सख्त जाँच सक्षम करने के लिए tsconfig.json लिए निम्न नियम जोड़ें। यह आपको एक अपरिभाषित या अशक्त चर की संपत्ति को पढ़ने की सामान्य त्रुटि से बचाएगा।

 "compilerOptions": { "strictNullChecks": true, }

या बेहतर , यदि आप अधिक कठोर जांच चाहते हैं, तो संकलक में सभी नियम शामिल करें:

 /* Strict Type-Checking Options */ "strict": true, /* Enable all strict type-checking options. */ // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ // "strictNullChecks": true, /* Enable strict null checks. */ // "strictFunctionTypes": true, /* Enable strict checking of function types. */ // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ /* Additional Checks */ "noUnusedLocals": true, /* Report errors on unused locals. */ "noUnusedParameters": true, /* Report errors on unused parameters. */ "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */

टाइपस्क्रिप्ट के लिए न केवल टीएस फ़ाइलों में अधिक सख्त होने के लिए, बल्कि कोणीय टेम्प्लेट में आपको tsconfig.json में 'fullTemplateTypeCheck' विकल्प को सक्षम करने की आवश्यकता है:

 { "compilerOptions": { ... }, "angularCompilerOptions": { "fullTemplateTypeCheck": true ... } }

इन नियमों को जोड़ने के बाद, एक परियोजना बनाने और सभी त्रुटियों को ठीक करने का प्रयास करें।

 $ npm run build

सख्त नियम नियम

सबसे कड़े सेटिंग्स के साथ सभी tslint नियमों को सक्षम करें, बस इसके लिए tslint.json में बदलें

 "extends": "tslint:recommended",

पर

 "extends": "tslint:all",

और कुछ अतिरिक्त नियमों को अक्षम करने के लिए निम्नलिखित नियम जोड़ें

 "no-implicit-dependencies": false, "no-submodule-imports": false, "completed-docs": false, "prefer-function-over-method": false, "file-name-casing": [ true, "kebab-case" ], "no-object-literal-type-assertion": [ true, { "allow-arguments": true } ], "no-floating-promises": false, "promise-function-async": false, "no-unsafe-any": false, "no-any": false, "comment-format": [ true, "check-space" ], "newline-per-chained-call": false, "typedef": [ true, "call-signature", "arrow-call-signature", "parameter", "arrow-parameter", "property-declaration", "object-destructuring", "array-destructuring" ]

विकास प्रक्रिया के दौरान, उन नियमों को अक्षम या कॉन्फ़िगर करें जो आपको पसंद नहीं हैं। और अपने IDE में tslint समर्थन शामिल करना न भूलें।

इन नियमों को जोड़ने के बाद, प्रोजेक्ट को लिंटर से चलाने की कोशिश करें और सभी त्रुटियों को ठीक करें।

 $ npm run lint

स्टाइलिस्ट के साथ लिंट एससीएसएस

अपने sssss कोड की गुणवत्ता जांचने के लिए स्टाइललिंट जोड़ें

 $ npm install stylelint stylelint-config-standard --save-dev $ touch .stylelintrc

और .stylelintrc पर नियमों को कॉन्फ़िगर करें

 { "extends": "stylelint-config-standard", "rules": {} }

Package.json में स्टाइललिंट को चलाने के लिए निम्न पंक्तियाँ जोड़ें

 "scripts": { "lint-all-scss": "stylelint \"**/*.scss\"", "lint-all-scss-fix": "npm run lint-all-scss -- --fix" }

विकास प्रक्रिया के दौरान, उन नियमों को अक्षम या कॉन्फ़िगर करें जो आपके अनुरूप नहीं हैं। और अपने IDE में स्टाइललिंट समर्थन शामिल करना न भूलें

 $ npm run lint-all-scss-fix

खूबसूरत

Prettier का उपयोग code को format करने के लिए किया जाता है। कोड की कुछ पंक्तियों के लिए, Prettier आपको वह परिणाम नहीं देता है जो आपको पसंद है, लेकिन इसका उपयोग करने के लाभों के बावजूद, बहुत कुछ है।

 $ npm install --save-dev --save-exact prettier

प्रोजेक्ट के लिए .prettierrc कॉन्फ़िगरेशन फ़ाइल जोड़ें

 { "printWidth": 120, "tabWidth": 2, "arrowParens": "always", "bracketSpacing": true, "endOfLine": "lf", "semi": true, "singleQuote": true, "quoteProps": "consistent", "trailingComma": "all" }

और नजरअंदाज की गई फाइलों और फ़ोल्डरों के साथ एक व्याख्यात्मक फाइल

 karma.conf.js protractor.conf.js ng-package.json package.json tsconfig.lib.json tsconfig.app.json tsconfig.spec.json tslint.json tsconfig.json browserslist .gitkeep favicon.ico

Package.json में प्रीटियर चलाने के लिए स्क्रिप्ट जोड़ें

 "scripts": { "prettier": "prettier --write \"{apps,libs}/**/*\"", "prettier:check": "prettier --check \"{apps,libs}/**/*\"" },

उसके बाद, प्रोजेक्ट की सभी फ़ाइलों को ठीक करने के लिए प्रेटियर चलाएं

 $ npm run prettier

हुक

लिंटर, फॉर्मेटर या अन्य स्क्रिप्ट चलाने के लिए हम गिट हुक कॉन्फ़िगर कर सकते हैं। हम इसके लिए निम्नलिखित पैकेजों का उपयोग करेंगे:

कर्कश - हुक सेट करता है
सुंदर-त्वरित - केवल संशोधित फ़ाइलों के लिए प्रीटियर लॉन्च करता है

 $ npm i husky pretty-quick -D

अगला कदम हमारे हुक के लिए स्क्रिप्ट लिखना है। मैं शेल स्क्रिप्ट के लिए एक टूल फ़ोल्डर बनाना पसंद करता हूं। हम 3 हुक कॉन्फ़िगर करेंगे:

प्री-कमिट - एक हुक जिसे कमिट से पहले निष्पादित किया जाता है। इस हुड में, हम संशोधित फ़ाइलों पर प्रेटियर करेंगे।
प्रतिबद्ध-संदेश - एक हुक जिसमें आप प्रतिबद्ध पाठ को बदल सकते हैं, हम इसका उपयोग प्रतिबद्ध पाठ में एक शाखा का नाम जोड़ने के लिए करते हैं।
प्री-पुश - एक हुक जिसे गिट पुश से पहले निष्पादित किया जाता है। हम इसका उपयोग लिंटर लॉन्च करने के लिए करते हैं।

Package.json में कर्कश विन्यास:

 "husky": { "hooks": { "pre-commit": "pretty-quick --staged", "commit-msg": "node ./tools/commit-msg.js", "pre-push": "./tools/pre-push.sh" } },

स्क्रिप्ट ./tools/commit-msg.js

 const fs = require('fs'); const { execSync } = require('child_process'); const message = fs.readFileSync(process.env.HUSKY_GIT_PARAMS, 'utf8').trim(); const currentBranch = getCurrentBranch(); fs.writeFileSync(process.env.HUSKY_GIT_PARAMS, `${currentBranch}: ${message}`); process.exit(0); function getCurrentBranch() { const branches = execSync('git branch', { encoding: 'utf8' }); return branches .split('\n') .find((b) => b.charAt(0) === '*') .trim() .substring(2); }

स्क्रिप्ट ./tools/pre-push.sh

 #!/usr/bin/env bash npm run lint-all-scss || exit npm run lint || exit

आप प्री-पुश स्क्रिप्ट में टेस्ट रन और e2e भी जोड़ सकते हैं।

जल्द आ रहा है ...

यह लेख एक कोणीय परियोजना की स्थापना के बारे में एक श्रृंखला में पहला है। निम्नलिखित लेखों में निम्नलिखित विषयों को शामिल करने की मेरी योजना है:

ट्रैविस और डॉकर के साथ निरंतर एकीकरण को कॉन्फ़िगर करना
सर्वर साइड प्रतिपादन
अनुवाद
परीक्षण
राज्य और मॉड्यूल की संरचना का प्रबंधन
Nrwl.Nx के साथ मोनो रिपॉजिटरी

सदस्यता लें, सवाल पूछें। आप इस लेख में इस उदाहरण में वर्णित उदाहरण भी देख सकते हैं।

मध्यम , टेलीग्राम या ट्विटर पर भी हमारे समुदाय में शामिल हों।

एक नए कोणीय एप्लिकेशन के लिए सख्त नियम