रिएक्ट, टाइपस्क्रिप्ट और सीएसएस मॉड्यूल के साथ कुशल एनपीएम पैकेज बनाना: एक व्यापक गाइड

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

शुरू करने से पहले, आप यहां स्रोत कोड पा सकते हैं: https://github.com/helgastogova/npm-react-typescript-template . यह रिपॉजिटरी रिएक्ट और टाइपस्क्रिप्ट का उपयोग करके एनपीएम पैकेज बनाने के लिए आधार के रूप में कार्य करता है। यह एक निर्माण प्रक्रिया और आधुनिक विकास वर्कफ़्लो के लिए अनुशंसित पैकेजों के एक सेट के साथ पूर्व-कॉन्फ़िगर किया गया है।

प्रमुख विशेषताओं में शामिल हैं:

1. प्रतिक्रिया और टाइपस्क्रिप्ट : मजबूत प्रकार की सुरक्षा और बेहतर डेवलपर अनुभव के साथ आधुनिक यूआई विकास।
2. सीएसएस मॉड्यूल : घटकों को अलग-अलग स्टाइल करना, सीएसएस विवादों से बचना और मॉड्यूलर डिजाइन को सक्षम करना।
3. ESLint : जावास्क्रिप्ट और रिएक्ट की सर्वोत्तम प्रथाओं का पालन करके कोड गुणवत्ता सुनिश्चित करना।
4. रोलअप : वितरण के लिए रिएक्ट और टाइपस्क्रिप्ट कोड को कुशलतापूर्वक एक फ़ाइल में बंडल करना।
5. पोस्टसीएसएस : अगली पीढ़ी के सीएसएस सुविधाओं का उपयोग करना और ब्राउज़र संगतता को संभालना।
6. आकार सीमा : अपनी लाइब्रेरी के आकार की निगरानी करना और आकस्मिक आकार के फूलने को रोकना।

आइए प्रत्येक टूल के बारे में अधिक विस्तार से जानें।

सीएसएस मॉड्यूल

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

इस सरल घटक पर विचार करें जहां हम सीएसएस मॉड्यूल का उपयोग करते हैं:

 // TestComponent.tsx import React from 'react'; import s from './TestComponent.module.css'; type TestComponentProps = { text?: string; }; export const TestComponent: React.FC<TestComponentProps> = ({ text }) => { return <div className={s.root}>{text ?? 'Hello!'}</div>; };

और इससे जुड़ा सीएसएस मॉड्यूल:

 /* TestComponent.module.css */ .root { background-color: pink; padding: 20px; border-radius: 8px; }

इस मामले में, TestComponent.module.css का .root वर्ग किसी भिन्न मॉड्यूल में किसी अन्य .root वर्ग को प्रभावित नहीं करेगा।

ईएसलिंट

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

आपके package.json में, आपके पास है:

 "scripts": { "lint": "eslint './src/**/*.{ts,tsx}'" }

लिंटर को npm run lint से चलाएँ। ESLint आपकी टाइपस्क्रिप्ट फ़ाइलों को स्कैन करेगा और आपको किसी भी संभावित समस्या के बारे में चेतावनी देगा। यह विशेष रूप से बड़े कोडबेस के लिए उपयोगी है जहां छोटी त्रुटियों या विसंगतियों का प्रवेश आसान होता है।

जमना

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

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

 // rollup.config.js const postcss = require('rollup-plugin-postcss'); const typescript = require('@rollup/plugin-typescript'); const peerDepsExternal = require('rollup-plugin-peer-deps-external'); const resolve = require('@rollup/plugin-node-resolve').default; const commonjs = require('@rollup/plugin-commonjs'); module.exports = { input: 'src/index.tsx', output: { dir: 'dist', format: 'cjs', sourcemap: true, }, plugins: [ peerDepsExternal(), resolve(), typescript(), commonjs(), postcss({ modules: true, }), ], };

पोस्टसीएसएस

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

आप उपरोक्त रोलअप कॉन्फ़िगरेशन में PostCSS को क्रियाशील होते हुए देख सकते हैं। rollup-plugin-postcss उपयोग करके, आपका आधुनिक सीएसएस रूपांतरित हो जाता है और आपके अंतिम बंडल में शामिल हो जाता है। इसकी खूबी यह है कि आप ब्राउज़र अनुकूलता की चिंता किए बिना नवीनतम सुविधाओं का उपयोग करके सीएसएस लिख सकते हैं।

आकार सीमा

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

आपके package.json में:

 "scripts": { "size": "size-limit", }, "size-limit": [ { "path": "dist/*.js", "limit": "10 KB" } ]

फिर आप अपने बंडल का आकार जांचने के लिए npm run size चला सकते हैं। यदि यह आपके द्वारा निर्धारित सीमा (इस मामले में, 10 KB) से अधिक है, तो स्क्रिप्ट एक त्रुटि उत्पन्न करेगी। यह सुनिश्चित करने का एक शानदार तरीका है कि आप अनजाने में अपने उपयोगकर्ताओं के डाउनलोड समय में वृद्धि नहीं कर रहे हैं।

स्थापित करना

इस टेम्पलेट का उपयोग शुरू करने के लिए, रिपॉजिटरी को क्लोन करें:

 git clone https://github.com/helgastogova/npm-react-typescript-template.git

निर्देशिका में नेविगेट करें:

 cd npm-react-typescript-template

निर्भरताएँ स्थापित करें:

 npm install

आप अपना पैकेज विकसित करना शुरू करने के लिए पूरी तरह तैयार हैं! प्रवेश बिंदु src/index.tsx है

पैकेज का निर्माण

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

 npm run build

आपका निर्मित पैकेज dist निर्देशिका में होगा, जो npm पर प्रकाशन के लिए तैयार होगा।

एनपीएम पर प्रकाशन

सुनिश्चित करें कि आपने अपने package.json में name फ़ील्ड को अपने इच्छित पैकेज नाम पर सेट कर लिया है। साथ ही, प्रत्येक नए प्रकाशन से पहले संस्करण संख्या अपडेट करना याद रखें। एक बार यह हो जाने पर, npm का उपयोग करके लॉग इन करें:

 npm login

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

 npm publish

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

हैप्पी कोडिंग!