यह मार्गदर्शिका आपको उपयोग करके, शुरू से अंत तक अपना एनपीएम पैकेज बनाने और जारी करने की सबसे आसान प्रक्रिया के बारे में बताएगी। माइक्रोबंडल का आइये इसके के बारे में थोड़ी बात करते हैं। मुझे यह सरल पुस्तकालयों के लिए विशेष रूप से प्रभावी लगता है क्योंकि आपको कॉन्फ़िगरेशन के बारे में चिंता करने की ज़रूरत नहीं है, जिससे आप अपने पैकेज को विकसित करने पर ध्यान केंद्रित कर सकते हैं। microbundle यहां इसकी विशेषताओं की एक संक्षिप्त सूची दी गई है: अंतर्निहित कॉन्फ़िगरेशन; आपको बस में एक "निर्यात" फ़ील्ड जोड़ना है package.json के बिना बॉक्स से बाहर टाइपस्क्रिप्ट समर्थन tsconfig.json एकाधिक आउटपुट प्रारूप (सीजेएस, यूएमडी, और ईएसएम) अंतर्निहित टेर्सर संपीड़न मूल रूप से, के शीर्ष पर बनाया गया है। यदि आपके पास बनाने के लिए मेरे द्वारा इस लेख में बताए गए से अधिक जटिल पुस्तकालय हैं, तो आप शुद्ध कॉन्फ़िगरेशन का उपयोग करने पर विचार कर सकते हैं। microbundle रोलअप.जेएस rollup.js आपका पैकेज प्रारंभ करना उदाहरण के तौर पर, आइए दो संख्याओं के योग के लिए एक सरल लाइब्रेरी बनाएं, जो केवल एक फ़ंक्शन निर्यात करेगी। sum प्रोजेक्ट के लिए एक फ़ोल्डर बनाएं, और जेनरेट करने के लिए डिफ़ॉल्ट मानों के साथ चलाएँ package.json npm init फ़ोल्डर में बनाएं src index.ts // src/index.ts export function sum(a: number, b: number) { return a + b; } स्थापित करें microbundle npm i -D microbundle निम्नलिखित मानों के साथ अद्यतन करें: 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 } ... बिल्ड स्क्रिप्ट चलाएँ 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 मैं निम्नलिखित क्रम में एक संरचना बनाना पसंद करता हूं: शीर्षक अति लघु पैकेज विवरण फैंसी सांख्यिकी बैज ( ) shields.io यदि आपकी लाइब्रेरी एक यूआई घटक है, तो एक स्क्रीनशॉट शामिल करें या कोडसैंडबॉक्स पर एक डेमो लिंक प्रदान करें सुविधाओं की सूची इंस्टालेशन गाइड उपयोग के साथ कोड के टुकड़े विकल्प और प्रॉप्स जिन्हें आपकी लाइब्रेरी कॉन्फ़िगरेशन के लिए स्वीकार करती है आप प्रेरणा के लिए मेरे पैकेज से फ़ाइलों के उदाहरण देख सकते हैं, जैसे और । 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 नाम दें और अपनी लाइब्रेरी की मुख्य कार्यक्षमता का वर्णन करने का प्रयास करें। उदाहरण के लिए: "name": "react-color-picker" GitHub रिपॉजिटरी जानकारी जोड़ें (यदि यह मौजूद है): ... "homepage": "https://github.com/{your_repository}", "repository": { "type": "git", "url": "https://github.com/{your_repository}" }, "bugs": { "url": "https://github.com/{your_repository}/issues" }, ... कॉन्फ़िगर करें: files ... "files": [ "dist", ], ... आपको उन फ़ाइलों को निर्दिष्ट करना चाहिए जो आपकी लाइब्रेरी स्थापित होने पर में शामिल की जाएंगी। आमतौर पर, फ़ोल्डर को शामिल करना पर्याप्त है। node_modules dist जोड़ें: keywords कीवर्ड स्ट्रिंग्स की एक श्रृंखला है जो आपके पैकेज का वर्णन करती है और एनपीएम द्वारा खोजों और अनुशंसाओं के लिए उपयोग की जाती है। अपने पैकेज के लिए प्रासंगिक शब्द चुनें जिनका आप अनुमान लगाते हैं कि लोग खोजते समय उपयोग करेंगे। आइए अपनी लाइब्रेरी के लिए कीवर्ड बनाएं: sum ... "keywords": ["typescript", "math", "sum", "numbers", "arithmetic", "calculator", "calculation"] ... अपनी प्रौद्योगिकियों को निर्दिष्ट करना महत्वपूर्ण है क्योंकि उपयोगकर्ता अक्सर "गणित के लिए टाइपस्क्रिप्ट लाइब्रेरी" या "प्रतिक्रिया कैलेंडर पिकर" जैसे शब्दों की खोज करते हैं। यदि आपने पहले से खाता नहीं बनाया है, तो बनाएं और अपने टर्मिनल में चलाएं; अपने खाते को प्रमाणित करने के लिए संकेतों का पालन करें। डिफ़ॉल्ट रूप से, आपके पैकेज का संस्करण होगा; आप इसे फ़ाइल में देख सकते हैं। मैं इसे में बदलने की अनुशंसा करता हूं। एनपीएम npm login 1.0.0 package.json 0.0.1 चलाएँ, और आपका काम हो गया! भविष्य में संस्करण को अद्यतन करने के लिए, संस्करण को बढ़ाने के लिए कमांड का उपयोग करें, और फिर अद्यतन पैकेज को के साथ प्रकाशित करें। npm publish npm version patch npm publish निष्कर्ष जैसा कि आप देख सकते हैं, अपनी खुद की लाइब्रेरी बनाना बहुत आसान है! मूलतः, पैकेज बनाने और बनाए रखने के लिए आपको बस यही चाहिए। यदि आप अपनी लाइब्रेरी को के साथ सीमित करने में संघर्ष करते हैं, तो मैं अधिक विशिष्ट कॉन्फ़िगरेशन के साथ उपयोग करने की सलाह देता हूं। microbundle रोलअप.जेएस का एनपीएम पैकेज बनाना और ओपन-सोर्स में योगदान करना सभी कौशल स्तरों के डेवलपर्स के लिए एक पुरस्कृत और मूल्यवान अनुभव है। यह आपको समुदाय के साथ अपना कोड साझा करने, ढेर सारा अनुभव प्राप्त करने और अपने काम का एक पोर्टफोलियो बनाने की अनुमति देता है।
