Stencil.js का उपयोग करके वेब कंपोनेंट का निर्माण कैसे करें

वेब घटक तकनीकों का एक समूह है जो आपको पुन: प्रयोज्य तत्व बनाने और विभिन्न वेब अनुप्रयोगों में उनका पुन: उपयोग करने देता है।

Stencil.js एक कंपाइलर है जो वेब घटकों को उत्पन्न करता है जो सभी आधुनिक ब्राउज़रों के साथ संगत हैं। यह तेज़, कार्यकुशल, मापनीय वेब घटक बनाने में आपकी मदद करने के लिए टूल और API प्रदान करता है।

स्टैंसिल.जेएस के साथ शुरुआत करना

Stencil.js के साथ आरंभ करने के लिए, आपको सबसे पहले इसे अपने कंप्यूटर पर इनिशियलाइज़ करना होगा।

अपने नोड.जेएस टर्मिनल में निम्नलिखित कमांड चलाकर ऐसा करें:

एनपीएम इनिट स्टैंसिल

आदेश चलाने के बाद, आपकी स्क्रीन पर एक संकेत दिखाई देगा कि आप कौन सा प्रोजेक्ट शुरू करना चाहते हैं:

आगे बढ़ने के लिए, घटक विकल्प चुनें, अपने प्रोजेक्ट का नाम दर्ज करें और अपने चयन की पुष्टि करें:

अगला, अपनी परियोजना की निर्देशिका में बदलें और इन आदेशों को चलाकर अपनी निर्भरताएँ स्थापित करें:

सीडी फर्स्ट-स्टैंसिल-प्रोजेक्ट
एनपीएम इंस्टॉल करें

एक नया वेब घटक बनाना

Stencil.js में एक नया वेब कंपोनेंट बनाने के लिए, जैसा फोल्डर पाथ बनाएं

src/components. घटक फ़ोल्डर में आपके घटक के नाम पर Stencil.js नाम की एक टाइपस्क्रिप्ट फ़ाइल होगी टाइपस्क्रिप्ट भाषा का उपयोग करता है और घटक विकास के लिए JSX। फ़ोल्डर में एक CSS फ़ाइल भी होगी जिसमें आपके घटक की स्टाइलिंग होगी।

उदाहरण के लिए, यदि आप "माय-बटन" नामक एक घटक बनाना चाहते हैं, तो एक फ़ाइल बनाएँ, जिसका नाम my-button.tsx और एक सीएसएस फ़ाइल कहा जाता है my-button.css. में my-button.tsx फ़ाइल, Stencil.js API का उपयोग करके अपने घटक को परिभाषित करें:

आयात {घटक, एच} से'@ स्टैंसिल/कोर';
@अवयव({
 उपनाम: 'मेरा बटन',
 शैलीयूआरएल: 'माय-बटन.सीएसएस',
 छाया: सत्य,
})
निर्यातकक्षामायबटन{
 प्रदान करना() {
वापस करना (
मुझे क्लिक करें</button>
 );
 }
}

यह कोड आयात करता है अवयव और एच Stencil.js से कार्य करता है। अवयव फ़ंक्शन घटक को परिभाषित करता है, जबकि एच समारोह HTML का उपयोग करके अपना मार्कअप बनाता है.

का उपयोग करके अपने घटक को परिभाषित करें @अवयव डेकोरेटर, जो एक वस्तु को तीन गुणों के साथ लेता है: उपनाम, शैलीयूआरएल, और छाया.

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

निम्न के अलावा शैलीयूआरएल संपत्ति, आप अपने घटक को स्टाइल करने के लिए दो और गुणों का उपयोग कर सकते हैं: शैली और styleUrls.

शैली गुण घटक के लिए इनलाइन शैलियों को परिभाषित करता है। यह एक स्ट्रिंग मान लेता है जो घटक के लिए CSS शैलियों का प्रतिनिधित्व करता है:

आयात {घटक, एच} से'@ स्टैंसिल/कोर';
@अवयव({
 उपनाम: 'मेरा बटन',
 शैली: `
 बटन {
 गद्दी: 1रेम 0.5रेम;
 सीमा-त्रिज्या: 12पीएक्स;
 फ़ॉन्ट-परिवार: कर्सिव;
 सीमा: कोई नहीं;
 रंग: #e2e2e2;
 पृष्ठभूमि का रंग: #333333;
 फोंट की मोटाई: बोल्ड;
 }
`,
 छाया: सत्य,
})
निर्यातकक्षामायबटन{
 प्रदान करना() {
वापस करना (
मुझे क्लिक करें</button>
 );
 }
}

styleUrls गुण घटक को स्टाइल करने के लिए कई बाहरी CSS फ़ाइलें निर्दिष्ट करता है। यह CSS फाइलों के पथों का प्रतिनिधित्व करने वाले स्ट्रिंग मानों की एक सरणी लेता है:

आयात {घटक, एच} से'@ स्टैंसिल/कोर';
@अवयव({
 उपनाम: 'मेरा बटन',
 शैलीयूआरएल: ['माय-बटन.सीएसएस', 'अन्य-बटन.सीएसएस'],
 छाया: सत्य,
})
निर्यातकक्षामायबटन{
 प्रदान करना() {
वापस करना (
मुझे क्लिक करें</button>
 );
 }
}

वेब घटक का प्रतिपादन

एक बार जब आप अपना वेब कंपोनेंट बना लेते हैं, तो आप कस्टम एलिमेंट टैग जोड़कर इसे HTML फ़ाइल में रेंडर कर सकते हैं। यहां बताया गया है कि आप my-button कॉम्पोनेंट को कैसे शामिल कर सकते हैं:

एचटीएमएल>
<एचटीएमएलडिर="एल टीआर"लैंग="एन">
<सिर>
<मेटाcharset="यूटीएफ-8" />
<मेटानाम="व्यूपोर्ट"संतुष्ट="चौड़ाई = उपकरण-चौड़ाई, प्रारंभिक-पैमाना = 1.0, न्यूनतम-पैमाना = 1.0, अधिकतम-पैमाना = 5.0" />
<जोड़नाhref=""संबंधित="शैली पत्रक">
<शीर्षक>स्टैंसिल घटक स्टार्टरशीर्षक>
<लिखी हुई कहानीप्रकार="मापांक"स्रोत="/बिल्ड/फर्स्ट-स्टैंसिल-प्रोजेक्ट.esm.js">लिखी हुई कहानी>
<लिखी हुई कहानीnomoduleस्रोत="/बिल्ड/फर्स्ट-स्टैंसिल-प्रोजेक्ट.जेएस">लिखी हुई कहानी>
सिर>
<शरीर>
<my-button>my-button>
शरीर>
एचटीएमएल>

अब आप Stencil.js का उपयोग करके वेब घटक बना सकते हैं

Stencil.js वेब घटकों के निर्माण के लिए एक शक्तिशाली उपकरण है जो तेज, कुशल और स्केलेबल हैं। इसके एपीआई और उपकरण वेब घटकों को बनाना और प्रबंधित करना आसान बनाते हैं, और सभी आधुनिक ब्राउज़रों के साथ इसकी अनुकूलता सुनिश्चित करती है कि आपके घटक विभिन्न वेब अनुप्रयोगों में अच्छी तरह से काम करेंगे।

जैसे-जैसे वेब घटक अधिक से अधिक लोकप्रिय होते जा रहे हैं, Stencil.js एक ढांचा है जिस पर आपको वेब के लिए पुन: प्रयोज्य तत्वों का निर्माण करते समय विचार करना चाहिए।