🔅 📤 🥦 एक सामान्य तैनाती, CI और डेमो (जीवन में खुशी के नुकसान के बिना) के साथ एक एनपीएम पैकेज कैसे खोलें 💯 🕷️ 🦖

तो आपने कुछ नया और अच्छा किया, सोचा ऊपर आता है - खुले स्रोत में डाल दिया और npm में प्रकाशित किया।

बस कोड को सार्वजनिक भंडार में धकेलना पर्याप्त नहीं है। यह परियोजना को विकास और विफलता की कमी की ओर ले जाएगा। दूसरी ओर, मुझे कई उबाऊ प्रक्रियाएँ याद हैं: पैकेज बनाना और प्रकाशित करना, निरंतर एकीकरण की स्थापना करना, डेमो प्रोजेक्ट से पेजों की तैनाती करना और उनकी तैनाती करना, समुदाय के लिए योगदान की संभावना को व्यवस्थित करना।

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

वास्तव में, यह सब आपको एक घंटे से भी कम समय लग सकता है। DevOps के ज्ञान के बिना और पूरी तरह से मुक्त।

हम संस्करण का आयोजन करते हैं

यदि आपकी लाइब्रेरी पहली रिलीज़ के लिए तैयार है, तो मैं मानक-संस्करण का उपयोग करने का सुझाव देता हूं। यह पैकेज पूरी तरह से संस्करण के लिए जिम्मेदार होगा: पैकेज में संस्करण को अपडेट करें। आगजनी, git में CHANGELOG.md फ़ाइल और affix संस्करण टैग उत्पन्न करें।

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

कनेक्शन प्रक्रिया में कोई कठिनाइयां नहीं हैं, यह गीथब पृष्ठ पर विस्तार से वर्णित है। सुविधा के लिए हमारे पैकेज के लिए रिलीज़ कमांड का एक सेट जोड़ें:

"release": "standard-version", "release:patch": "npm run release -- --release-as patch", "release:minor": "npm run release -- --release-as minor", "release:major": "npm run release -- --release-as major",

सीआई को व्यवस्थित करें

निरंतर एकीकरण के लिए, मैं ट्रैविस सीआई का उपयोग करने का सुझाव देता हूं। इसे बहुत उपयोगकर्ता के अनुकूल भी बनाया गया है:

जीथब के माध्यम से लॉग इन करें
सूची से अपनी परियोजना का चयन करें और इसके लिए ट्रैविस को सक्षम करें
प्रोजेक्ट रूट फ़ोल्डर में, एक साधारण कॉन्फिगर जोड़ें जिसे CI पर निष्पादित किया जाएगा:
```
 language: node_js node_js: - "10" script: - npm run lint - npm run build - npm run test:ci 
```

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

आप शाखाओं की स्थिति देख सकते हैं, अनुरोध कर सकते हैं, प्रत्येक चल रहे निर्माण के लॉग का विश्लेषण कर सकते हैं।

अन्य डेवलपर्स आपके पैकेज पर स्विच करने में अधिक आश्वस्त होंगे यदि वे देखते हैं कि आपके सभी कोड का परीक्षण किया गया है।

मेरा सुझाव है कि विशेष कवरेज सेवा के परीक्षणों के साथ कोड कवरेज पर नियंत्रण शिफ्ट किया जाए। प्रत्येक सीआई के निर्माण के बाद ट्रैविस ने उसे परीक्षा परिणाम पास करने दिया।

कवरलेट में प्रवेश करें और वांछित रिपॉजिटरी के सामने एक चेकमार्क डालें। ट्रैविस की तरह।

हम परियोजना की ओर कॉन्फ़िगर करते हैं:

परियोजना देव-निर्भरता में coveralls पैकेज स्थापित करें
आवरणों को चलाने के लिए एक स्क्रिप्ट जोड़ें, इसे परीक्षण कमांड में जोड़ें: ci
```
 "test:ci": "npm run test && npm run coveralls", "coveralls": "cat coverage/lcov.info | coveralls", 
```

ध्यान दें कि --code-coverage रन टेस्ट कमांड में --code-coverage फ्लैग शामिल होना चाहिए। Coveralls के लिए आपकी lcov.info फ़ाइल की आवश्यकता होती है, जो इस ध्वज के साथ आपके परीक्षण धावक द्वारा बनाई गई है। यदि ऐसा कोई झंडा नहीं है, तो आप इस्तानबुल पैकेज का उपयोग कर सकते हैं।

ट्रैविस की तरफ कॉन्फ़िगर करें:

यदि भंडार पहले से ही खुला है और हमेशा सार्वजनिक रहेगा, तो आप .travis.yml में कुछ पंक्तियाँ जोड़ सकते हैं:

 notifications: webhooks: https://coveralls.io/webhook

किसी भी अन्य मामले में, उन्हें टोकन के माध्यम से जोड़ना बेहतर है:

Coveralls पर रिपॉजिटरी सेटिंग्स पर जाएं और रेपो टोकन जेनरेट करें:
इस टोकन के साथ, ट्रैविस पर रिपॉजिटरी की सेटिंग पर जाएं और इसे COVERALLS_REPO_TOKEN के रूप में पर्यावरण चर खंड में जोड़ें।

टोकन ने दोनों सेवाओं को जोड़ा। अब हम अपने नए टूल्स के साथ प्रोजेक्ट मास्टर ब्रांच की सुरक्षा के लिए वापस जाएं।

सेटिंग्स -> शाखाओं पर जाएं
सभी शाखाओं के लिए एक नया नियम बनाएँ: *
हम आवश्यक जांच डालते हैं जिसके बिना मास्टर शाखा में पुल अनुरोध को फ्रीज करना संभव नहीं होगा

इस स्तर पर, मैं भी Coveralls में रिपॉजिटरी सेटिंग्स पर लौटने का सुझाव देता हूं। PULL REQUESTS ALERTS अनुभाग में, आप यह निर्दिष्ट कर सकते हैं कि Pull अनुरोध परीक्षण द्वारा कवरेज के स्तर को कम करने से परीक्षण पास नहीं होगा। ऐसा करें ताकि आपका पैकेज हमेशा अच्छी तरह से जांचा-परखा रहे।

अपने वर्कफ़्लो को ब्रश करें

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

बस मामले में, जांचें कि आपके पास एक .editorconfig फ़ाइल है और उसमें कोड स्वरूपण सेटिंग्स लिखी गई हैं।

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

उदाहरण के लिए, यह टाइपस्क्रिप्ट और कम पर एक पैकेज के लिए एक सेटिंग की तरह लग सकता है:

 { ... "scripts": { ... "typecheck": "tsc --noEmit --skipLibCheck", }, "husky": { "hooks": { "pre-commit": "lint-staged && npm run typecheck" } }, "lint-staged": { "*.{js,ts,html,md,less,json}": [ "prettier --write", "git add" ], "*.ts": "tslint", "*.less": "stylelint" } }

यदि आपने अभी तक लिंटर को कॉन्फ़िगर नहीं किया है, तो मैं सलाह दे सकता हूं:

कोड स्वरूपण के लिए पूर्ववर्ती
जेएस / टीएस फ़ाइलों के लिंटर के रूप में एस्लिंट या tslint
स्टाइल फ़ाइलों के लिए स्टाइललिंट

उन सभी के लिए तैयार-तैयार कॉन्फ़िगरेशन हैं, जिसमें सभी बुनियादी सेटिंग्स प्रदान की जाती हैं। उदाहरण के लिए, आप हमारे टर्नकी समाधान @ tinkoff / linters ले सकते हैं। कनेक्शन तीन फ़ाइलों को बनाने के लिए नीचे आता है:

.stylelintrc

 { "extends": ["@tinkoff/linters/stylelint/bases/prettier.stylelint.json"] }

prettier.config.js

 module.exports = { ...require('@tinkoff/linters/prettier/prettier.config'), };

tslint.json

 { "extends": ["@tinkoff/linters/tslint/bases/prettier.tslint.json"] }

एनपीएम को प्रकाशित करें

अब हमारे पैकेज को प्रकाशित करने का समय आ गया है। पैकेज-ज्सन स्क्रिप्ट में एक और सरल कमांड जोड़ें:

 "publish": "npm run build && npm publish ./dist"

इस मामले में, हमारी रिपॉजिटरी में विकास के लिए स्रोत कोड और फाइलें होती हैं, और एनपीएम में एक संकलित पैकेज होता है जिसमें कुछ भी नहीं होता है।

हम वर्तमान विधानसभा को इकट्ठा करते हैं, प्रकाशित करते हैं। काम हो गया।

चलो npm हुक का भी उपयोग करते हैं और एक पोस्टबिल्ड स्क्रिप्ट जोड़ते हैं जो README.md को असेंबली फ़ोल्डर में कॉपी करेगा। इसलिए हम एनपीएम पर पैकेज विवरण को अपडेट करना कभी नहीं भूलेंगे।

 "build": "..", "postbuild": "node scripts/postbuild.js",

लिपियों / पोस्टबिल्ट .js

 const fs = require('fs'); const DIST_LIB_PATH = 'dist/'; const README_PATH = 'README.md'; const PATH_TO = DIST_LIB_PATH + README_PATH; copyReadmeIntoDistFolder(); function copyReadmeIntoDistFolder() { if (!fs.existsSync(README_PATH)) { throw new Error('README.md does not exist'); } else { fs.copyFileSync(README_PATH, PATH_TO); } }

डेमो कस्टमाइज़ करें

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

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

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

आप इनमें से किसी भी सेवा की कोशिश कर सकते हैं, इसमें पाँच मिनट से अधिक समय नहीं लगेगा:

stackblitz.com अब आपको Angular, React, Ionic, TypeScript, RxJs और Svelte पर प्रोजेक्ट चलाने की अनुमति देता है। आप केवल लिंक पर क्लिक करके एक प्रोजेक्ट को जीथब से खोल सकते हैं।
codeandbox.io ने भी Angular, React, और Vue लॉन्च किए हैं। वह यह भी जानता है कि सादे जावास्क्रिप्ट का निर्माण कैसे किया जाता है। यह रिपॉजिटरी के लिंक से उसी तरह से खुलता है, लेकिन थोड़ा और विवरण यहां पढ़ा जा सकता है
repl.it इस सेवा पर आप NodeJS, Express, NextJS, GatsbyJS के साथ एक भंडार का आयात कर सकते हैं। टाइपस्क्रिप्ट और वेनिला जेएस भी उपलब्ध हैं।

कोई भी चुनें, README में डेमो के लिए एक लिंक जोड़ें और फिर कभी इसके बारे में चिंता न करें। सभी परिवर्तन स्वचालित रूप से उठाए जाएंगे।

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

अंतिम मारफेट

README.md में बैज जोड़ें। एक तिपहिया, लेकिन यह आपको जल्दी से खुद को अपने पैकेज के आगंतुक को गीथब पर उन्मुख करने में मदद करेगा।

उदाहरण के लिए, यहां चार बैज हैं जो कहते हैं कि परियोजना पर सब कुछ ठीक है, और इसकी एनपीएम, सीआई या परीक्षण कवरेज तक एक-क्लिक की अनुमति है।

बैज उत्पन्न करने के लिए, मैं Shields.io सेवा का उपयोग करने का सुझाव देता हूं । वे सरल और उच्च गुणवत्ता के हैं।

कुल मिलाकर

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

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

एक सामान्य तैनाती, CI और डेमो (जीवन में खुशी के नुकसान के बिना) के साथ एक एनपीएम पैकेज कैसे खोलें