जावास्क्रिप्ट मेटा फ्रेमवर्क एस्ट्रो को नई सुविधाओं के चयन के साथ अद्यतन किया गया है।

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

1. डेटा संग्रह

एस्ट्रो 2.5 अब संग्रह में JSON और YAML को संग्रहीत करने का समर्थन करता है। नया प्रकार: 'डेटा' गुण इस कार्यक्षमता को सक्षम करता है। इसे प्रदर्शित करने के लिए, src/content फ़ोल्डर में एक 'लेखक' डेटा संग्रह बनाएँ, जहाँ JSON या वाईएएमएल फ़ाइलें जोड़ी जा सकती हैं।

अगला, src/content/config.ts का उपयोग करके संग्रहों को कॉन्फ़िगर करें definitionCollection और जेड उपयोगिताओं से खगोल: सामग्री मॉड्यूल और प्रकार को डेटा पर सेट करना।

आयात {z, परिभाषित चयन} से"एस्ट्रो: सामग्री";
कॉन्स्ट लेखक = परिभाषित चयन ({
प्रकार: "आंकड़े",
योजना: जेड।वस्तु({ नाम: जेड।डोरी() }),
});

अंत में, संग्रह वस्तु को अपने संग्रह को पंजीकृत करने के लिए निर्यात करें।

instagram viewer 
निर्यातकॉन्स्ट संग्रह = {लेखकों के:लेखकों के}

2. एचटीएमएल न्यूनतमकरण

एस्ट्रो 2.5 में कॉम्प्रेसएचटीएमएल विकल्प पेश किया गया है जो आपके एचटीएमएल से सभी सफेद रिक्त स्थान (और लाइन ब्रेक) को हटा देता है। घटक केवल एक बार एस्ट्रो कंपाइलर द्वारा और फिर निर्माण के दौरान संकुचित होते हैं। यह प्रदर्शन लागत को कम करने के लिए किया जाता है।

अपने प्रोजेक्ट में इस विकल्प को सक्षम करना आसान है। बस अपनी कॉन्फ़िगरेशन फ़ाइल में निम्न पंक्तियां जोड़ें। HTML Minification केवल .astro फ़ाइल स्वरूप में लिखे गए घटकों के साथ काम करता है।

निर्यातगलती करनापरिभाषितकॉन्फ़िग({सेक HTML:सत्य})

3. समानांतर प्रतिपादन

समानांतर में घटकों का प्रतिपादन एस्ट्रो में एक लंबे समय से प्रतीक्षित विशेषता है। ऐसे मामलों में जहां विभिन्न उप-पेड़ों में बाल घटक डेटा प्राप्त करते हैं, एस्ट्रो 2.5 समानांतर में डेटा प्राप्त करके लोडिंग समय में सुधार करता है।

यह पेड़ में ऊपर एक डेटा लाने वाले घटक द्वारा अवरुद्ध किए बिना पेड़ में एक घटक को और नीचे प्रस्तुत करने की अनुमति देता है। फिलहाल, समानांतर रेंडरिंग के साथ ठीक से काम नहीं करता है सरणी.नक्शा अतुल्यकालिक टुकड़े।

एस्ट्रो 2.5 प्रयोगात्मक सुविधाओं का एक नया सेट भी लाता है जो नीचे कवर किया गया है।

4. हाइब्रिड रेंडरिंग

एस्ट्रो 2.5 अब आपको अपनी कॉन्फ़िगरेशन फ़ाइल में एक नया सर्वर आउटपुट विकल्प परिभाषित करने की अनुमति देता है जो एसएसआर के डिफ़ॉल्ट प्री-रेंडरिंग व्यवहार को ओवरराइड करता है।

हाइब्रिड रेंडरिंग का लाभ उठाने के लिए, सेट करें हाइब्रिडआउटपुट अपने कॉन्फ़िगरेशन के प्रायोगिक अनुभाग में सही पर जाएँ और एक एडॉप्टर जोड़ें।

ऐसा करने से आपकी पूरी साइट डिफ़ॉल्ट रूप से प्री-रेंडर हो जाएगी, लेकिन आप सेटिंग करके इस व्यवहार से ऑप्ट आउट कर सकते हैं prerender किसी भी रूट या पेज को गलत पर एक्सपोर्ट करना:

निर्यातकॉन्स्ट प्रीरेंडर = असत्य;

5. कस्टम क्लाइंट निर्देश

एस्ट्रो 2.5 कस्टम का उपयोग करके कस्टम क्लाइंट-साइड घटक हाइड्रेशन नियंत्रण के लिए AddClientDirective API पेश करता है ग्राहक:* निर्देश।

इस सुविधा का उपयोग करने के लिए, सक्षम करें प्रयोगात्मक.customClientDirectives कॉन्फ़िगरेशन फ़ाइल में और घटक हाइड्रेशन पर किसी भी नकारात्मक प्रभाव से बचने के लिए निर्देश प्रविष्टि बिंदुओं को न्यूनतम रखें।

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

आयात {क्लाइंटडायरेक्टिव} से"एस्ट्रो";
कॉन्स्ट क्लिक डायरेक्टिव: क्लाइंट डायरेक्टिव = (लोड, ऑप्ट, एल) => {
खिड़कीऐडइवेंट लिस्टनर (
"क्लिक करें",
async () => {
कॉन्स्ट हाइड्रेट = इंतजार भार();
इंतजार हाइड्रेट ();
 },
 { एक बार: सत्य }
 );
};
निर्यातगलती करना क्लिक डायरेक्टिव;

अब ग्राहक: क्लिक करें आपके घटकों में पूर्ण प्रकार के समर्थन के साथ उपयोग किया जा सकता है।

एस्ट्रो कैसे स्थापित करें

एस्ट्रो नामक एक कमांड लाइन इंटरफेस (सीएलआई) प्रदान करता है खगोल बनाएँ आपको आरंभ करने के लिए। आप लेना चाहते हैं आपकी मशीन पर NodeJS 16+ और npm स्थापित है।

एनपीएम एस्ट्रो बनाएं@नवीनतम

यह स्क्रैच से एक नई एस्ट्रो परियोजना को तैयार करेगा। चीजों को सेट करने के लिए स्क्रीन पर दिए गए निर्देशों का पालन करें (यदि आप सुनिश्चित नहीं हैं कि क्या चुनना है, तो बस अनुशंसित विकल्पों के साथ जाएं)। अगला, सीडी प्रोजेक्ट फ़ोल्डर में, फिर चलाएँ:

एनपीएम रन देव

आप रिएक्ट जैसे फ्रेमवर्क जोड़ सकते हैं खगोल जोड़। अगर सब कुछ ठीक से स्थापित है तो आप खोल सकते हैं लोकलहोस्ट: 3000 आपकी मशीन पर, और आपको "एस्ट्रो में आपका स्वागत है" संदेश देखना चाहिए।

यदि आप एनपीएम को नापसंद करते हैं, तो आप दूसरे विकल्प को चुन सकते हैं जावास्क्रिप्ट पैकेज प्रबंधक यार्न और पीएनपीएम की तरह।

एस्ट्रो के साथ डेवलपर अनुभव को बढ़ाना

एस्ट्रो जैसे ऑल-इन-वन फ्रेमवर्क तेज वेबसाइटों के विकास को जितना संभव हो उतना सहज बनाते हैं। यह शानदार है, यूआई-अज्ञेयवादी प्रकृति का मतलब है कि आप अपनी पसंद के किसी भी लोकप्रिय जावास्क्रिप्ट ढांचे के साथ शून्य परेशानी के साथ काम कर सकते हैं।