Vite v4.0.4 3 जनवरी 2023 को जारी किया गया और Vite के विकास के वातावरण की कार्यक्षमता को बढ़ाता है और Vite 3 के ठीक पांच महीने बाद आता है। नया संस्करण नई सुविधाओं और अपडेट के साथ आता है जो जावास्क्रिप्ट विकास के अनुभव को पहले से तेज और मजबूत बना देगा।
यहां, हम Vite क्या है, Vite 4 में पाए जाने वाले महत्वपूर्ण फीचर्स और अपडेट्स पर चर्चा करेंगे।
वाइट क्या है?
"वाइट" शब्द का अर्थ ही "तेज" है। यह एक फ्रंट-एंड बिल्ड टूल और डेवलपमेंट सर्वर है जिसे तेज, हल्का और सरल विकास अनुभव प्रदान करने के लिए डिज़ाइन किया गया है। यह विकास के दौरान आपके कोड की सेवा करता है, आपकी फ़ाइलों को उत्पादन के लिए बंडल करता है, और विभिन्न के साथ आसान एकीकरण की अनुमति देता है जावास्क्रिप्ट चौखटे और पुस्तकालय, जैसे कि Vue, React, Preact और Svelte।
विटे पिछले दो वर्षों में कई सुधार हुए हैं, और Vite 4 कई नई और बेहतर सुविधाएँ लाता है।
1. रोलअप 3
जमना एक जावास्क्रिप्ट मॉड्यूल बंडलर है जो डेवलपर्स को अलग-अलग बंडल करने की अनुमति देता है
जावास्क्रिप्ट मॉड्यूल एक फ़ाइल में। यह बदले में कोड को लोड करने के लिए ब्राउज़र द्वारा किए जाने वाले अनुरोधों की संख्या को कम करके एप्लिकेशन के प्रदर्शन में सुधार करता है।Vite अब निर्माण समय के दौरान रोलअप 3 का उपयोग करता है। Vite संस्करण 3 में रोलअप 2 का उपयोग किया गया था, लेकिन अक्टूबर 2022 में रोलअप 3 की रिलीज़ के बाद, Vite का नया संस्करण रोलअप 3 में एक प्रमुख अपग्रेड के साथ आया।
रोलअप 3 में अपग्रेड करने से पहले आपको रोलअप माइग्रेशन गाइड का संदर्भ लेना चाहिए, क्योंकि समस्याएँ हो सकती हैं, भले ही रोलअप 3 ज्यादातर रोलअप 2 के साथ संगत हो।
2. स्पीडी वेब कंपाइलर (एसडब्ल्यूसी) का उपयोग कर नया रिएक्ट प्लगइन
एसडब्ल्यूसी रस्ट में लिखा गया एक सुपर-फास्ट जावास्क्रिप्ट कंपाइलर है। एसडब्ल्यूसी और कोलाहल दोनों जावास्क्रिप्ट कंपाइलर हैं जो आपके कोड को ब्राउज़रों द्वारा समर्थित के रूप में परिवर्तित करते हैं लेकिन एसडब्ल्यूसी ने बाबेल से तेज होने का दावा किया है।
चूंकि Vite v3 ने बैबल का उपयोग किया है, v4 विशेष रूप से रिएक्ट परियोजनाओं के लिए प्रतिस्थापन या विकल्प के रूप में SWC की शुरुआत के साथ आता है।
जबकि Vite बैबेल का समर्थन करना जारी रखता है, Vite 4 दो प्लगइन्स (vitejs/plugin-react और vitejs/plugin-react-swc) रिएक्ट परियोजनाओं के लिए अलग-अलग ट्रेडऑफ़ के साथ पेश करता है।
Vitejs/प्लगइन-प्रतिक्रिया प्लगइन
यह प्लगइन एस्बिल्ड और बेबेल का उपयोग करके न्यूनतम पैकेज आकार का उपयोग करते हुए तेजी से हॉट मॉड्यूल रिप्लेसमेंट प्रदान करता है। यह बेबेल रूपांतरण पाइपलाइन का उपयोग करने में सक्षम होने का अतिरिक्त लचीलापन भी प्रदान करता है।
हॉट मॉड्यूल रिप्लेसमेंट फैट रिफ्रेश को सक्षम बनाता है। यह डेवलपर्स को पूरे पृष्ठ को रीफ्रेश किए बिना चल रहे एप्लिकेशन में मॉड्यूल अपडेट करने की अनुमति देता है। अपने प्रोजेक्ट में प्लगइन स्थापित करने के लिए नीचे दिए गए प्रदर्शन का पालन करें।
एनपीएम इंस्टॉल @vitejs/प्लगइन-प्रतिक्रिया
अपने प्रोजेक्ट में प्लगइन आयात करने के लिए नीचे दिए गए कोड का पालन करें;
आयात {कॉन्फ़िग परिभाषित करें} से'वाइट'
आयात प्रतिक्रिया से'@vitejs/प्लगइन-प्रतिक्रिया'
निर्यातगलती करना डिफाइन कॉन्फिग({
प्लग-इन: [प्रतिक्रिया ()],
})
Vitejs/प्लगइन-प्रतिक्रिया-swc प्लगइन
यह एक नया प्लगइन है जो निर्माण के दौरान esbuild और विकास के दौरान स्पीड वेब कंपाइलर का उपयोग करता है।
बेबेल को एसडब्ल्यूसी से बदलकर, प्लगइन का उद्देश्य विकास प्रक्रिया को महत्वपूर्ण रूप से तेज करना है, विशेष रूप से उन परियोजनाओं के लिए जिन्हें गैर-मानक रिएक्ट एक्सटेंशन की आवश्यकता नहीं है।
यहाँ बताया गया है कि प्लगइन कैसे स्थापित करें;
एनपीएम मैं @vitejs/प्लगइन-प्रतिक्रिया-swc
इसे अपनी परियोजना में निम्नानुसार आयात करें;
आयात {कॉन्फ़िग परिभाषित करें} से"वाइट";
आयात प्रतिक्रिया से"@vitejs/प्लगइन-प्रतिक्रिया-swc";
निर्यातगलती करना डिफाइन कॉन्फिग({
प्लग-इन: [प्रतिक्रिया ()],
});
3. CSS को एक स्ट्रिंग के रूप में आयात करना
यह सुविधा Vite 3 CSS डबल-लोडिंग व्यवहार का समाधान देती है जो CSS फ़ाइल के डिफ़ॉल्ट निर्यात को आयात करने से होता है, उदाहरण के लिए:
आयात cssString से'./global.cssइस व्यवहार को रोकने के लिए, Vite 4 ने ?inline query suffix modifier के उपयोग का परिचय दिया है। यहाँ सिंटैक्स का प्रदर्शन है;
आयात cssString से'./global.css? इन - लाइन'इसलिए v3 CSS डिफ़ॉल्ट निर्यात को पदावनत कर दिया गया है।
4. पर्यावरण चर
Vite ने dotenv और dotenv-expand पर अपनी निर्भरताओं को अद्यतन किया। उपयोग किए जा रहे नए संस्करण क्रमशः dotenv 16 और dotenv-expand 9 हैं। इस अद्यतन के लिए आपको उन मानों को लपेटने की आवश्यकता होगी जिनमें उचित कार्यक्षमता सुनिश्चित करने के लिए उद्धरण चिह्नों में "#" या "`" वर्ण शामिल हैं। यहाँ एक उदाहरण है;
SECRET_HASH="कुछ-साथ-ए-#-हैश"ENV फ़ाइलों को अपडेट करने की प्रक्रिया को आसान बनाने के लिए, Vite ने dotenv कमांड लाइन इंटरफ़ेस के उपयोग की अनुशंसा की है। यह एक वैकल्पिक प्लगइन है जो यह सुनिश्चित करने में मदद कर सकता है कि ENV फाइलें विभिन्न मशीनों, परिवेशों या टीम के सदस्यों के बीच सुसंगत हैं। यह ENV फ़ाइलों को अपडेट करने की प्रक्रिया को कम कठिन बनाने में मदद कर सकता है।
अन्य उन्नयन, सुधार, और Vite v4.0.4 में माइग्रेट करना
Vite ने अधिक कमांड लाइन इंटरफेस शॉर्टकट जोड़े हैं। सभी शॉर्टकट की सूची देखने के लिए दबाएं एच विकास के दौरान।
आधुनिक ब्राउज़र बिल्ड भी अब व्यापक ES2020 संगतता के लिए डिफ़ॉल्ट रूप से सफारी14 को लक्षित करता है। पूर्व-बंडलिंग निर्भरता के दौरान पैच-पैकेज के लिए समर्थन है, SSR के दौरान बेहतर त्रुटि संदेश हैं और बहुत कुछ।
