पुन: प्रयोज्य एनपीएम पैकेज बनाने से आपकी विकास प्रक्रिया अधिक कुशल और मनोरंजक बन सकती है। इस लेख में, हम आपको रिएक्ट, टाइपस्क्रिप्ट, सीएसएस मॉड्यूल और अन्य टूल का उपयोग करके एक आधुनिक और मजबूत प्रोजेक्ट सेटअप बनाने में मार्गदर्शन करेंगे। शुरू करने से पहले, आप यहां स्रोत कोड पा सकते हैं: . यह रिपॉजिटरी रिएक्ट और टाइपस्क्रिप्ट का उपयोग करके एनपीएम पैकेज बनाने के लिए आधार के रूप में कार्य करता है। यह एक निर्माण प्रक्रिया और आधुनिक विकास वर्कफ़्लो के लिए अनुशंसित पैकेजों के एक सेट के साथ पूर्व-कॉन्फ़िगर किया गया है। https://github.com/helgastogova/npm-react-typescript-template प्रमुख विशेषताओं में शामिल हैं: : मजबूत प्रकार की सुरक्षा और बेहतर डेवलपर अनुभव के साथ आधुनिक यूआई विकास। प्रतिक्रिया और टाइपस्क्रिप्ट : घटकों को अलग-अलग स्टाइल करना, सीएसएस विवादों से बचना और मॉड्यूलर डिजाइन को सक्षम करना। सीएसएस मॉड्यूल : जावास्क्रिप्ट और रिएक्ट की सर्वोत्तम प्रथाओं का पालन करके कोड गुणवत्ता सुनिश्चित करना। ESLint : वितरण के लिए रिएक्ट और टाइपस्क्रिप्ट कोड को कुशलतापूर्वक एक फ़ाइल में बंडल करना। रोलअप : अगली पीढ़ी के सीएसएस सुविधाओं का उपयोग करना और ब्राउज़र संगतता को संभालना। पोस्टसीएसएस : अपनी लाइब्रेरी के आकार की निगरानी करना और आकस्मिक आकार के फूलने को रोकना। आकार सीमा आइए प्रत्येक टूल के बारे में अधिक विस्तार से जानें। सीएसएस मॉड्यूल सीएसएस मॉड्यूल स्टाइलिंग अराजकता के क्षेत्र में सुरक्षा के प्रतीक के रूप में काम करते हैं। वे आपकी शैलियों के लिए स्थानीय गुंजाइश लागू करते हैं, संघर्षों और ओवरलैप मुद्दों को दूर करते हैं। प्रत्येक सीएसएस मॉड्यूल को घटक में "एनकैप्सुलेटेड" किया जाएगा, यह सुनिश्चित करते हुए कि आपके द्वारा परिभाषित शैलियाँ लीक नहीं होंगी और अनजाने में अन्य तत्वों को प्रभावित नहीं करेंगी। इस सरल घटक पर विचार करें जहां हम सीएसएस मॉड्यूल का उपयोग करते हैं: // 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}'" } लिंटर को से चलाएँ। ESLint आपकी टाइपस्क्रिप्ट फ़ाइलों को स्कैन करेगा और आपको किसी भी संभावित समस्या के बारे में चेतावनी देगा। यह विशेष रूप से बड़े कोडबेस के लिए उपयोगी है जहां छोटी त्रुटियों या विसंगतियों का प्रवेश आसान होता है। npm run lint जमना आपके कोड का व्यक्तिगत फिटनेस ट्रेनर है। यह आपकी जावास्क्रिप्ट, टाइपस्क्रिप्ट और सीएसएस लेता है और उन्हें वितरण के लिए तैयार एक दुबले, कुशल पैकेज में बंडल करता है। रोलअप यह हल्का और तेज़ है, लेकिन वास्तविक लाभ इसकी "पेड़-हिलाने" क्षमता से आता है। रोलअप अंतिम बंडल से अप्रयुक्त कोड को हटा सकता है, जिससे आपका पैकेज यथासंभव छोटा हो जाएगा। आपका रोलअप कॉन्फ़िगरेशन कैसा दिख सकता है इसका एक उदाहरण यहां दिया गया है: // 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" } ] फिर आप अपने बंडल का आकार जांचने के लिए चला सकते हैं। यदि यह आपके द्वारा निर्धारित सीमा (इस मामले में, 10 KB) से अधिक है, तो स्क्रिप्ट एक त्रुटि उत्पन्न करेगी। यह सुनिश्चित करने का एक शानदार तरीका है कि आप अनजाने में अपने उपयोगकर्ताओं के डाउनलोड समय में वृद्धि नहीं कर रहे हैं। npm run size स्थापित करना इस टेम्पलेट का उपयोग शुरू करने के लिए, रिपॉजिटरी को क्लोन करें: git clone https://github.com/helgastogova/npm-react-typescript-template.git निर्देशिका में नेविगेट करें: cd npm-react-typescript-template निर्भरताएँ स्थापित करें: npm install आप अपना पैकेज विकसित करना शुरू करने के लिए पूरी तरह तैयार हैं! प्रवेश बिंदु है src/index.tsx पैकेज का निर्माण अपना स्वयं का घटक बनाने के बाद और जब आप वितरण के लिए अपना पैकेज बनाने के लिए तैयार हों, तो चलाएँ: npm run build आपका निर्मित पैकेज निर्देशिका में होगा, जो npm पर प्रकाशन के लिए तैयार होगा। dist एनपीएम पर प्रकाशन सुनिश्चित करें कि आपने अपने में फ़ील्ड को अपने इच्छित पैकेज नाम पर सेट कर लिया है। साथ ही, प्रत्येक नए प्रकाशन से पहले संस्करण संख्या अपडेट करना याद रखें। एक बार यह हो जाने पर, npm का उपयोग करके लॉग इन करें: package.json name npm login अपना उपयोगकर्ता नाम, पासवर्ड और ईमेल दर्ज करें। एक बार लॉग इन करने के बाद, आप अपना पैकेज यहां प्रकाशित कर सकते हैं: npm publish अब आपने अपना घटक में प्रकाशित कर दिया है, और लोग इसका उपयोग करना शुरू कर सकते हैं। आप कमाल हैं! npmjs लाइब्रेरी हैप्पी कोडिंग!
