पिछले कुछ महीनों में, मुझे यह निर्धारित करने का काम सौंपा गया था कि मैं अपनी पूर्णकालिक नौकरी के लिए स्टैंडअलोन विजेट कैसे लिखूं और प्रबंधित करूं। हालाँकि यह सुनिश्चित करना अपेक्षाकृत सरल था कि वे कार्यात्मक थे, मुझे तुरंत एहसास हुआ कि उन्हें बनाए रखना पूरी तरह से एक अलग चुनौती थी

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

मैंने उन्हें मूल रूप से कैसे किया?

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

• मेरा अप्रयुक्त सीएसएस ओवरटाइम बढ़ रहा है और मैं यह भी अनिश्चित था कि क्या केवल वांछित घटक का सीएसएस ही बंडल किया जा रहा था।

• सख्त टाइपिंग के बिना विजेट के माध्यम से जावास्क्रिप्ट को संभालना कठिन समय है। यह तेजी से एक गड़बड़ी बन गया क्योंकि मुझे जेडब्ल्यूटी डिकोडिंग और प्रमाणीकरण जैसे कुछ उपयोग साझा करने पड़े।

मैंने इसे कैसे बदला?

मैंने विचार करना शुरू किया कि मैं कुछ डिफ़ॉल्ट कैसे स्थापित कर सकता हूं और, अधिक महत्वपूर्ण बात, एक प्रकार की प्रणाली को एकीकृत कर सकता हूं। इससे मेरे साइड प्रोजेक्ट, स्वेल्ट-स्टैंडअलोन का निर्माण हुआ।

स्वेल्ट-स्टैंडअलोन का लक्ष्य था:

• एक अच्छी तरह से छोटा सीएसएस सुनिश्चित करें और बंडल करते समय अप्रयुक्त सीएसएस को हटा दें।
• मेरे सभी ऐप पर अच्छी तरह से समर्थित और पुन: उपयोग की जाने वाली पसंदीदा प्रकार की प्रणाली सुनिश्चित करें।

ध्यान दें: पसंद का टाइप सिस्टम टाइपस्क्रिप्ट था।

• इकाई और एकीकरण परीक्षण सुनिश्चित करें।
• सुनिश्चित करें कि मैं अपने विजेट्स को रोलअप करने से पहले और बाद में उन्हें पार्स करने के बाद विजुअली जांच कर सकूं।

मैंने यह सब कैसे हासिल किया?

रोलअप प्लगइन्स और स्वेल्ट प्रीप्रोसेसर के साथ टाइपस्क्रिप्ट संगतता सुनिश्चित करने के बाद, मैंने एक कदम पीछे लिया और अपने प्रोजेक्ट को प्रमुख चरणों में तोड़ दिया। मूलतः मेरे पास था:

1. A .svelte.
2. एक एम्बेड.जेएस फ़ाइल .svelte फ़ाइल के उदाहरण को शुरू करने और इसे बॉडी में जोड़ने के लिए जिम्मेदार है।

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

1. declaration.d.ts - सक्षम किया गया कि मैं अपने व्यापक घटक को सीधे आयात कर सकता हूं और इसे SvelteComponent प्रकार का उपयोग करके लपेट सकता हूं, इसलिए मैंने अपने व्यापक घटकों को डिफ़ॉल्ट रूप से मजबूत टाइप किया।
2. types.ts - सक्षम किया गया कि मैं डिक्लेरेशन.डी.टीएस से घोषित प्रॉप्स के आधार पर एक डिफॉल्टकॉन्फिग लिख सकता हूं।
3. embed.ts - मेरे सभी विजेट्स के लिए एक मानक तरीके से मेरे घटक का स्टार्ट/स्टॉप सक्षम किया गया!

और वोइला! इस दृष्टिकोण ने टाइप सिस्टम के साथ मेरी समस्याओं का समाधान किया और मेरे विजेट्स की रखरखाव में सुधार किया।

मैंने सीएसएस चुनौतियों का समाधान कैसे किया:

सीएसएस से संबंधित मुख्य चुनौतियाँ जिनका मुझे सामना करना पड़ा, वे थीं: मैं बिना किसी परेशानी के अपने सीएसएस को कैसे शुद्ध और छोटा कर सकता हूँ? मैं सीएसएस कैसे लिख सकता हूं जिस पर सहयोग करना और विभिन्न वातावरणों में एकीकृत करना दोनों आसान है?

समाधान बहुत सीधा था: बस टेलविंड सीएसएस का उपयोग करें।

इस दृष्टिकोण के साथ, मैंने निम्नलिखित लाभों की पहचान की:

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

• निर्बाध एकीकरण: अपने विजेट को किसी अन्य टेलविंड ऐप में आयात करते समय, मैं अपने बंडल आकार को कम करने के लिए कुछ टेलविंड निर्देशों को आसानी से छोड़ सकता हूं।

• सरल पर्जिंग और मिनिमाइजेशन: मिनिफाई करना सीधा हो गया, और टेलविंड के बिल्ट-इन पर्जसीएसएस के साथ, मुझे बस प्रत्येक विजेट के लिए सामग्री ध्वज को ठीक से कॉन्फ़िगर करने की आवश्यकता थी। इससे यह सुनिश्चित हो गया कि अंतिम बंडल में केवल आवश्यक शैलियाँ ही शामिल की गईं।

मैंने परीक्षण संबंधी समस्याओं का समाधान कैसे किया?

मुझे अपने विजेट्स के लिए व्यापक परीक्षण सुनिश्चित करने में एक चुनौती का सामना करना पड़ा, जिसमें यूनिट परीक्षण, एकीकरण परीक्षण और दृश्य परीक्षण शामिल थे।

मेरा प्राथमिक लक्ष्य मेरे घटकों को रोलअप के साथ संसाधित करने से पहले और बाद में कल्पना करना था। इसे प्राप्त करने के लिए, मैंने निम्नलिखित कदम उठाए:

• कड़ाई से टाइप की गई स्टोरीबुक: मैंने अपनी घोषणा.डी.टीएस और टाइप्स.टीएस फाइलों के आधार पर एक सख्ती से टाइप की गई स्टोरीबुक लागू की। इससे मेरे प्रत्येक विजेट के लिए स्वचालित रूप से एक डिफ़ॉल्ट कहानी उत्पन्न करना सुविधाजनक हो गया।

• वाइट एकीकरण: मैंने स्वेल्ट रूट पर बंडल किए गए घटक को लोड करने के लिए वाइट का उपयोग किया। मेरी टाइपस्क्रिप्ट फ़ाइलों के आधार पर एक डिफ़ॉल्ट रूट घटक उत्पन्न करना भी सुविधाजनक था।

यही सबकुछ था! मैं कुछ फीडबैक की तहे दिल से सराहना करूंगा! इसके अलावा, स्वेल्ट-स्टैंडअलोन की जाँच करें।

चाहे आपके कोई प्रश्न, सुझाव या चिंताएं हों, बेझिझक मुझसे संपर्क करें!