हमने अपने और टीम के लिए या आधुनिक फ्रंट-एंड टूल्स के बारे में एक सुविधाजनक npm प्रोजेक्ट स्थापित किया

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

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

आवश्यकताओं

पहले, मुझे पता चला कि हमारे पास पहले से क्या है:

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

फिर उन्होंने अपनी विशलिस्ट का अनुमान लगाया - चूंकि समय और इच्छा है, इसलिए इसे आसान नहीं लिया जाए। मुझे और क्या चाहिए:

• मुझे एक समान स्वरूपण शैली चाहिए
• मुझे एक एकीकृत टाइपस्क्रिप्ट शैली चाहिए
• मुझे प्रलेखन चाहिए, लेकिन मैं इसे लिखना नहीं चाहता
• सामान्य तौर पर, मैं सब कुछ अधिकतम करने के लिए स्वचालित करना चाहता हूं। क्या उत्पादन और उत्पादन में fyr-fyr-fyr होगा

परिणामस्वरूप, निम्नलिखित में आवश्यकताओं ने आकार लिया:

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

यह अच्छा लग रहा है, आपको प्रयास करने की आवश्यकता है।

प्रारंभिक इशारे

हम स्थानीय रूप से टाइपस्क्रिप्ट सेट करते हैं, रिपॉजिटरी (पैकेज) क्लोन बनाते हैं, पैकेज को टाइप करते हैं। सामान्य तौर पर, हम स्थानीय रूप से सभी निर्भरताएं निर्धारित करते हैं, क्योंकि सब कुछ सर्वर पर जाएगा। संस्करण निर्भरता को ठीक करने के लिए मत भूलना।

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

तुरंत मौके पर आपको अपने लिए tsconfig.json को ट्वीक करने की आवश्यकता होती है - निर्धारित लक्ष्य, लिबास, शामिल / बहिष्कृत, बाहर और अन्य विकल्प।

स्वरूपण शैली

समान स्वरूपण बनाए रखने के लिए, मैंने दो उपकरण लिए। पहली .editorconfig फ़ाइल है। यह सभी प्रमुख IDE (WebStorm, VSCode, Visual Studio, इत्यादि) द्वारा समझा जाता है, इन्हें किसी भी चीज़ की स्थापना की आवश्यकता नहीं होती है, और बड़ी संख्या में फ़ाइल प्रकारों के साथ काम करता है - js, ts, md, और इसी तरह।

 #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 पैकेज है जो जांच करता है और यदि संभव हो तो, स्वचालित रूप से आपके पाठ स्वरूपण को सही करता है। इसे स्थानीय रूप से स्थापित करें और पहले कमांड को package.json में जोड़ें

 npm i -D prettier 

package.json

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

प्रीटियर में एक init कमांड नहीं है, इसलिए आपको इसे मैन्युअल रूप से कॉन्फ़िगर करने की आवश्यकता है। प्रोजेक्ट की जड़ में .prettierrc.json बनाएँ जैसे कि यह विवादास्पद सामग्री (यदि कुछ भी हो, तो पोस्ट बिल्कुल नहीं है जिसके बारे में उद्धरण बेहतर हैं, लेकिन आप कोशिश कर सकते हैं)

.prettierrc.json

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

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

कोड शैली

कोड शैली के साथ, सब कुछ भी जटिल नहीं है। जावास्क्रिप्ट के लिए, वहाँ eslint है ; टाइपस्क्रिप्ट के लिए, tslint है । हम tslint डालते हैं और सेटिंग्स को स्टोर करने के लिए tsconfig.js बनाते हैं

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

package.json

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

आप अपने स्वयं के नियम लिख सकते हैं, या आप मौजूदा नियमों का उपयोग विस्तार पैरामीटर का उपयोग करके कर सकते हैं। यहाँ , उदाहरण के लिए, airbnb से एक विन्यास।

 module.exports = { extends: "./tslint-base.json", rules: { "no-excessive-commenting": [true, {maxComments: Math.random() * 10}] } }; 

एक महत्वपूर्ण बिंदु है - कार्यक्षमता में tslint और Prettier intersect (उदाहरण के लिए, एक स्ट्रिंग या "हैंगिंग कॉमा" की लंबाई में)। इसलिए, यदि आप दोनों का उपयोग करते हैं, तो आपको अनुपालन की निगरानी करने या कुछ छोड़ने की आवश्यकता होगी।

और फिर भी, उन लोगों के लिए जो सभी फ़ाइलों की जांच नहीं करना चाहते हैं, लेकिन केवल मंचन किया गया है - एक लिंट-मंचित पैकेज है

परीक्षण

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

हम कर्म , चमेली और सभी संबंधित शरीर किट डालते हैं

 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, excludes: [] }, file: { statements: 60, branches: 60, functions: 60, lines: 60, excludes: [], overrides: {} } } }, } 

और, ज़ाहिर है, package.json में एक नई कमांड जोड़ना न भूलें

package.json

 "test": "karma start" 

यदि आप सीआई का उपयोग कर रहे हैं या योजना बना रहे हैं, तो हेडलेसक्रोम लगाना बेहतर है:

 npm i -D puppeteer 

और कर्मा (क्रोमहेडलेस पर क्रोम फिक्स) और कुछ और पूर्व-कॉन्फ़िगर करें। संपादन डेमो रिपॉजिटरी में देखे जा सकते हैं।

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

रिपोर्ट:

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

कमिट को भी एकीकृत किया जा सकता है (और साथ ही किसी को सफेद-गर्म में लाएं, यदि आप इसे ज़्यादा करते हैं, तो यह कट्टरता के बिना बेहतर है)। इसके लिए मैंने कमिटमेंट लिया। यह एक संवाद के रूप में काम करता है, पारंपरिक-चेंगलॉग प्रारूप का समर्थन करता है (आप इसके हिट से चैंज बना सकते हैं) और इसके लिए एक VsCode प्लगइन है

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

cz-पारंपरिक-चैंज एक एडॉप्टर है जो प्रश्नों के लिए जिम्मेदार है, और परिणामस्वरूप, आपके कमिट के प्रारूप के लिए

स्क्रिप्ट अनुभाग में एक नई कमांड जोड़ें

 "commit":"git-cz" 

और एक नया package.json अनुभाग - कमिटमैन के लिए कॉन्फ़िगर

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

नागरिक के साथ संवाद इस तरह दिखता है:

प्रलेखन

अब प्रलेखन के लिए। हमारे पास दो प्रकार के दस्तावेज होंगे - कोड से और कमिट से। कोड से दस्तावेज़ीकरण के लिए, मैंने टाइपडॉक ( एसडेक के अनुरूप लेकिन टाइपस्क्रिप्ट के लिए) लिया। यह स्थापित करने और काम करने के लिए बहुत सरल है। मुख्य बात यह है कि संस्करण नियंत्रण से अपने काम के परिणामों को हटाने के लिए मत भूलना।

 npm i typedoc -D 

और पैकेज को अपडेट करें

package.json

 "doc": "typedoc --out docs/src/ --readme ./README.md" 

--Readme ध्वज रीडमी को मुख्य दस्तावेज़ पृष्ठ में शामिल करने के लिए बाध्य करेगा, जो सुविधाजनक है।

दूसरे प्रकार का दस्तावेज़ीकरण चैंज है, और पारंपरिक-चेंगलोग-क्लि पैकेज हमें इसके साथ मदद करेगा।

 npm i -D conventional-changelog-cli 

package.json

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

कोणीय से केवल स्वरूपण होता है और अधिक कुछ नहीं। अब चैंज को अपडेट करने के लिए सिर्फ npm रन चैंज को रन करें। मुख्य बात यह है कि ध्यान से कमिट लिखना है। खैर, हम हमेशा सही तरीके से लिखते हैं, इसलिए यह एक समस्या नहीं होनी चाहिए।

Bild

चूंकि हमारे पैकेज को जावास्क्रिप्ट के लिए भी काम करना चाहिए, इसलिए हमें टाइपस्क्रिप्ट को जावास्क्रिप्ट में बदलना होगा। इसके अलावा, केवल मामले में, एक छोटा बंडल बनाना अच्छा होगा। इसके लिए हमें uglifyjs और थोड़े ट्विक पैकेज.जॉन की जरूरत है

 npm i -D uglifyjs 

package.json

 "clean":"rmdir dist /S /Q", "build": "tsc --p ./ --sourceMap false", "bundle": "uglifyjs ./dist/*.js --compress --mangle --output ./dist/index.min.js" 

वैसे, यदि आप अपने प्रोजेक्ट के आकार को नियंत्रित करना चाहते हैं, तो दो और दिलचस्प पैकेज हैं

• bundlesize
• sizelimit - एक ही चीज़ लेकिन वेबपैक पर

उन्हें स्वीकार्य बंडल आकार में रहने के लिए प्रतिबद्ध / धक्का / प्रकाशन प्रक्रिया में भी एकीकृत किया जा सकता है। बहुत, बहुत मददगार।

स्वचालन

खैर, हमने पहले ही बुनियादी कदम उठा लिए हैं, अब सब कुछ स्वचालित होने की जरूरत है, अन्यथा यह काम करने के लिए स्पष्ट रूप से असुविधाजनक होगा।

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

 npm i -D husky 

package.json

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

यहां एक महत्वपूर्ण बारीकियों है, कॉल सिंटैक्स का उपयोग क्रॉस-प्लेटफ़ॉर्म नहीं है और यूनिक्स सिस्टम पर बंद नहीं होगा। इसलिए यदि आप ईमानदारी से सब कुछ करना चाहते हैं तो आपको npm-run-all पैकेज भी स्थापित करना होगा, यह वही है लेकिन क्रॉस-प्लेटफॉर्म है।

प्रकाशन

ठीक है, यहाँ हम अपने (खाली हाथ) पैकेज के प्रकाशन पर आते हैं। आइए विचार करें कि हम प्रकाशन से क्या चाहते हैं?

• सब कुछ फिर से टेस्ट करें
• निर्माण कलाकृतियों लीजिए
• दस्तावेज एकत्रित करें
• संस्करण उठाएँ
• ट्रिगर टैग
• Npm को सबमिट करें

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

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

यह पैकेज के लिए निर्दिष्ट करने के लिए बना हुआ है। पैकेज में क्या शामिल करें, प्रविष्टि बिंदु और हमारे प्रकारों के लिए पथ (d.ts फ़ाइलों को प्राप्त करने के लिए tsconfig.json में -declaration ध्वज निर्दिष्ट करना न भूलें)

package.json

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

खैर, यह सब लगता है। अब बस करो

 npm version ... npm publish 

और बाकी सब कुछ अपने आप हो जाएगा।

बोनस

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

धन्यवाद

जेसेफेस्ट पर अपनी रिपोर्ट के लिए एलेक्सी वोलकोव को बहुत धन्यवाद, जो इस लेख का आधार बना।

अधिकतम 7z , अविनाशी , धन्यवाद के लिए धन्यवाद कि स्थानीय निर्भरता के लिए पथ को छोड़ा जा सकता है।

और कुछ आँकड़े

• Node_modules का आकार: 444 MB (NTFS)
• पहले स्तर की निर्भरता की संख्या: 17
• कुल पैकेज प्रयुक्त: 643

उपयोगी लिंक

• .editorconfig
• खूबसूरत
• tslint
• eslint
• typedoc
• esdoc
• commitizen
• vscode के लिए कमिशन प्लगइन
• परंपरागत बदलाव का
• uglifyjs
• bundlesize
• sizelimit
• कर्कश
• NPM रन-सब
• दिलाने
• डेमो रिपॉजिटरी