अपना पहला एनपीएम पैकेज बनाने का सबसे आसान तरीका

यह मार्गदर्शिका आपको माइक्रोबंडल का उपयोग करके, शुरू से अंत तक अपना एनपीएम पैकेज बनाने और जारी करने की सबसे आसान प्रक्रिया के बारे में बताएगी।

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

यहां इसकी विशेषताओं की एक संक्षिप्त सूची दी गई है:

• अंतर्निहित कॉन्फ़िगरेशन; आपको बस package.json में एक "निर्यात" फ़ील्ड जोड़ना है
• tsconfig.json के बिना बॉक्स से बाहर टाइपस्क्रिप्ट समर्थन
• एकाधिक आउटपुट प्रारूप (सीजेएस, यूएमडी, और ईएसएम)
• अंतर्निहित टेर्सर संपीड़न

मूल रूप से, microbundle रोलअप.जेएस के शीर्ष पर बनाया गया है। यदि आपके पास बनाने के लिए मेरे द्वारा इस लेख में बताए गए से अधिक जटिल पुस्तकालय हैं, तो आप शुद्ध rollup.js कॉन्फ़िगरेशन का उपयोग करने पर विचार कर सकते हैं।

आपका पैकेज प्रारंभ करना

उदाहरण के तौर पर, आइए दो संख्याओं के योग के लिए एक सरल लाइब्रेरी बनाएं, जो केवल एक फ़ंक्शन sum निर्यात करेगी।

1. प्रोजेक्ट के लिए एक फ़ोल्डर बनाएं, और package.json जेनरेट करने के लिए डिफ़ॉल्ट मानों के साथ npm init चलाएँ

   
   

2. src फ़ोल्डर में index.ts बनाएं

    // src/index.ts export function sum(a: number, b: number) { return a + b; }

3. microbundle स्थापित करें

   npm i -D microbundle

   
   

4. निम्नलिखित मानों के साथ package.json अद्यतन करें:

    // package.json ... "type": "module", "source": "src/index.ts", // your source code "exports": { "types": "./dist/index.d.ts", // TypeScript declaration file "require": "./dist/index.cjs", // CommonJS entry point "default": "./dist/index.esm.js" // ES Module entry point }, "main": "./dist/index.cjs", // where to generate the CommonJS bundle "module": "./dist/index.esm.js", // where to generate the ESM bundle "unpkg": "./dist/index.umd.js", // where to generate the UMD bundle "types": "./dist/index.d.ts", // TypeScript declaration file for the package "scripts": { "build": "microbundle", // compiles "source" to "main", "module", "unpkg" "dev": "microbundle watch" // re-build when source files change } ...

5. बिल्ड स्क्रिप्ट चलाएँ

   npm run build

   
   

   आउटपुट में बिल्कुल वही फ़ाइलें होनी चाहिए जो हमने package.json में घोषित की थीं

   

और वोइला, हमने अपना पहला पैकेज बनाया। आइए अधिक जटिल परिदृश्यों पर एक नज़र डालें।

अपनी लाइब्रेरी में रिएक्ट जोड़ना

यदि आप रिएक्ट को अपनी लाइब्रेरी में लाना चाहते हैं, तो आप अभी भी इसे microbundle उपयोग कर सकते हैं, लेकिन अब, आपका बिल्ड कमांड इस तरह दिखना चाहिए:

 microbundle --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react --globals react/jsx-runtime=jsx

भविष्य की सुविधा के लिए build स्क्रिप्ट में package.json कमांड जोड़ें:

 // package.json ... "scripts": { "build": "microbundle --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react --globals react/jsx-runtime=jsx" } ...

यूआई घटकों के लिए स्टोरीबुक का उपयोग करना

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

यहाँ कहानी की किताब आती है। यह अपने स्वयं के सुविधाजनक इंटरफ़ेस और बंडलर के साथ एक सैंडबॉक्स है, जहां आप आसानी से अपने घटकों की विभिन्न स्थितियों का वर्णन कर सकते हैं। आपके घटक स्थिति के प्रत्येक कैप्चर को "कहानी" कहा जाता है।

उनके दस्तावेज़ से ली गई यह तस्वीर दिखाती है कि यह कैसा दिखता है:

स्टोरीबुक इंस्टॉल करना काफी सरल है; बस अपनी लाइब्रेरी के अंदर कमांड चलाएँ:

 npx storybook@latest init

यह कमांड स्टोरीबुक के लिए सभी आवश्यक निर्भरताएँ स्थापित करेगा, चलाने के लिए स्क्रिप्ट जोड़ेगा, और स्टोरीबुक को package.json में बनाएगा, डिफ़ॉल्ट कॉन्फ़िगरेशन के साथ एक फ़ोल्डर .storybook बनाएगा, और फ़ोल्डर src/stories में कहानियों के कुछ उदाहरण जोड़ेगा।

अपनी लाइब्रेरी में स्टाइलिंग को एकीकृत करना

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

• सीएसएस फ़ाइल

  Src निर्देशिका में एक CSS फ़ाइल बनाएं, और इसे रूट रिएक्ट घटक फ़ाइल में आयात करें:

   // src/index.tsx import './styles.css'; export const MySuperComponent = () => { return ( <h1 className="title">Hi there!</h1> ) };

  
  

  तो, आइए बिल्ड कमांड फिर से चलाएँ।

   npm run build

  
  

  और आपकी आयातित styles.css फ़ाइल dist फ़ोल्डर में बनाई जाएगी:

  

  महान! हमने आवश्यक शैलियों के साथ एक सीएसएस फ़ाइल प्राप्त की है। हालाँकि, इस समाधान में थोड़ी असुविधा है। पैकेज स्थापित होने के बाद सीएसएस फ़ाइल को अलग से जोड़ना होगा।

  
  

  इसलिए, आपकी लाइब्रेरी के उपयोगकर्ताओं को आपकी सीएसएस फ़ाइल को संभालने के लिए एक सीएसएस लोडर (उदाहरण के लिए, वेबपैक के लिए एक सीएसएस-लोडर) का उपयोग करने की आवश्यकता होगी, और उनका उपयोग इस तरह दिखेगा:

   import { MySuperComponent } from 'my-super-library'; import 'my-super-library/dist/styles.css'; export const App = () => { return ( <MySuperComponent /> ); }

  
  

• सीएसएस-इन-जेएस

  आप इस उद्देश्य के लिए स्टाइल-घटकों जैसी लाइब्रेरी का उपयोग कर सकते हैं। और यह इस तरह दिखेगा:

   import styled from 'styled-components'; const Title = styled.h1` font-size: 30px; font-weight: bold; `; export const MySuperComponent = () => { return ( <Title>Hi there!</Title> ) };

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

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

एक विस्तृत README.md फ़ाइल विकसित करना

एक README.md फ़ाइल आपकी लाइब्रेरी, इसे कैसे स्थापित करें, इसके मूल उपयोग और इसमें मौजूद सुविधाओं के बारे में जानकारी प्रदान करती है। यह अक्सर पहली फ़ाइल होती है जिसे डेवलपर्स आपके रिपॉजिटरी या एनपीएम पैकेज का सामना करने पर पढ़ते हैं, इसलिए यह संक्षिप्त और जानकारीपूर्ण होनी चाहिए।

मैं निम्नलिखित क्रम में एक संरचना बनाना पसंद करता हूं:

1. शीर्षक
2. अति लघु पैकेज विवरण
3. फैंसी सांख्यिकी बैज ( shields.io )
4. यदि आपकी लाइब्रेरी एक यूआई घटक है, तो एक स्क्रीनशॉट शामिल करें या कोडसैंडबॉक्स पर एक डेमो लिंक प्रदान करें
5. सुविधाओं की सूची
6. इंस्टालेशन गाइड
7. उपयोग के साथ कोड के टुकड़े
8. विकल्प और प्रॉप्स जिन्हें आपकी लाइब्रेरी कॉन्फ़िगरेशन के लिए स्वीकार करती है

आप प्रेरणा के लिए मेरे पैकेज से README.md फ़ाइलों के उदाहरण देख सकते हैं, जैसे dot-path-value और प्रतिक्रिया-नेस्टेड-ड्रॉपडाउन ।

निर्भरता प्रबंधन को नेविगेट करना

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

• "डेवडिपेंडेंसीज़" केवल विकास के लिए हैं और आपके बंडल में शामिल नहीं की जाएंगी। उदाहरण के लिए, यदि आपके पास microbundle पैकेज स्थापित है, जिसे उपयोगकर्ताओं को उपयोग करने की आवश्यकता नहीं है, तो इसे डिपेंडेंसी में रखें, और यह बंडल में दिखाई नहीं देगा।

• पैकेज के साथ "निर्भरताएं" स्थापित की जाएंगी। उन निर्भरताओं को शामिल करें जिनकी आपके पैकेज को उपयोगकर्ताओं की परियोजनाओं में काम करने के लिए आवश्यकता है। ध्यान दें कि कुछ निर्भरताएँ, जैसे "प्रतिक्रिया", उपयोगकर्ता के प्रोजेक्ट में पहले से ही स्थापित हो सकती हैं। आपके पैकेज में डुप्लिकेट "प्रतिक्रिया" होने से बंडल का आकार बढ़ सकता है। यहीं पर "सहकर्मी निर्भरता" काम आती है।

• "सहकर्मी निर्भरता" वे निर्भरताएँ हैं जिनका आपका पैकेज उपयोग करता है लेकिन आपके बंडल में शामिल नहीं होगा। आपका पैकेज उस निर्भरता के संस्करण का उपयोग करेगा जो उपयोगकर्ता के पास उनके प्रोजेक्ट में है।

  
  

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

  
  

  यदि उपयोगकर्ता के पास अपने प्रोजेक्ट में निर्दिष्ट सहकर्मी निर्भरता नहीं है, तो npm install कमांड एक चेतावनी प्रदर्शित करेगा, लेकिन यह स्वचालित रूप से निर्भरता स्थापित नहीं करेगा।

यह कैसा दिखता है इसका एक छोटा सा उदाहरण:

 // package.json ... "dependencies": { // libraries which will be installed along with your library "clsx": "^1.2.1" // just library for className combining }, "peerDependencies": { // user should have these packages installed "react": "^16.8.0 || ^17.0.0 || ^18.0.0" // user should have react 16.8+ version }, "devDependencies": { // won't be in user's bundle, these libraries just for your developing needs "@types/react": "^18.2.33", "react": "^18.2.0", // in case if we are using storybook, we need actual react library to render our components there "microbundle": "^0.15.1", }, ...

अपने पैकेज के लिए GitHub का उपयोग करना

यदि आप एनपीएम पैकेज प्रकाशित कर रहे हैं, तो इसका मतलब है कि यह सार्वजनिक रूप से पहुंच योग्य होगा (यदि आपके पास एक निःशुल्क खाता है)। उपयोगकर्ताओं से प्रतिक्रिया एकत्र करने के लिए, आप अपने मूल कोड के लिए GitHub रिपॉजिटरी बना सकते हैं। लोग वहां मुद्दे बना सकते हैं और आपके पैकेज के बारे में आपसे संवाद कर सकते हैं। आप अपनी रिलीज़ का वर्णन भी कर सकते हैं और कुछ सितारे प्राप्त कर सकते हैं!

आप निश्चित रूप से इस चरण को छोड़ सकते हैं, लेकिन यह डेवलपर संस्कृति का एक अभिन्न अंग है और ओपन-सोर्स में एक मूल्यवान योगदान हो सकता है।

पैकेज का प्रकाशन और रखरखाव

इससे पहले कि आप अपना पैकेज प्रकाशित कर सकें, यह सुनिश्चित करना आवश्यक है कि आपकी package.json फ़ाइल ठीक से कॉन्फ़िगर की गई है। यहां अनुसरण करने योग्य कुछ महत्वपूर्ण चरण दिए गए हैं:

1. नाम दें और अपनी लाइब्रेरी की मुख्य कार्यक्षमता का वर्णन करने का प्रयास करें। उदाहरण के लिए:

    "name": "react-color-picker"

   
   

2. GitHub रिपॉजिटरी जानकारी जोड़ें (यदि यह मौजूद है):

    ... "homepage": "https://github.com/{your_repository}", "repository": { "type": "git", "url": "https://github.com/{your_repository}" }, "bugs": { "url": "https://github.com/{your_repository}/issues" }, ...

   
   

3. files कॉन्फ़िगर करें:

    ... "files": [ "dist", ], ...

   आपको उन फ़ाइलों को निर्दिष्ट करना चाहिए जो आपकी लाइब्रेरी स्थापित होने पर node_modules में शामिल की जाएंगी। आमतौर पर, dist फ़ोल्डर को शामिल करना पर्याप्त है।

   
   

4. keywords जोड़ें:

   कीवर्ड स्ट्रिंग्स की एक श्रृंखला है जो आपके पैकेज का वर्णन करती है और एनपीएम द्वारा खोजों और अनुशंसाओं के लिए उपयोग की जाती है। अपने पैकेज के लिए प्रासंगिक शब्द चुनें जिनका आप अनुमान लगाते हैं कि लोग खोजते समय उपयोग करेंगे। आइए अपनी sum लाइब्रेरी के लिए कीवर्ड बनाएं:

    ... "keywords": ["typescript", "math", "sum", "numbers", "arithmetic", "calculator", "calculation"] ...

   अपनी प्रौद्योगिकियों को निर्दिष्ट करना महत्वपूर्ण है क्योंकि उपयोगकर्ता अक्सर "गणित के लिए टाइपस्क्रिप्ट लाइब्रेरी" या "प्रतिक्रिया कैलेंडर पिकर" जैसे शब्दों की खोज करते हैं।

   
   

5. यदि आपने पहले से एनपीएम खाता नहीं बनाया है, तो बनाएं और अपने टर्मिनल में npm login चलाएं; अपने खाते को प्रमाणित करने के लिए संकेतों का पालन करें। डिफ़ॉल्ट रूप से, आपके पैकेज का संस्करण 1.0.0 होगा; आप इसे package.json फ़ाइल में देख सकते हैं। मैं इसे 0.0.1 में बदलने की अनुशंसा करता हूं।

   
   

6. npm publish चलाएँ, और आपका काम हो गया! भविष्य में संस्करण को अद्यतन करने के लिए, संस्करण को बढ़ाने के लिए npm version patch कमांड का उपयोग करें, और फिर अद्यतन पैकेज को npm publish के साथ प्रकाशित करें।

निष्कर्ष

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

एनपीएम पैकेज बनाना और ओपन-सोर्स में योगदान करना सभी कौशल स्तरों के डेवलपर्स के लिए एक पुरस्कृत और मूल्यवान अनुभव है। यह आपको समुदाय के साथ अपना कोड साझा करने, ढेर सारा अनुभव प्राप्त करने और अपने काम का एक पोर्टफोलियो बनाने की अनुमति देता है।