Vite के साथ रिएक्ट ऐप कैसे सेट करें

एक नया रिएक्ट प्रोजेक्ट शुरू करते समय, कई डेवलपर्स इसका रुख करते हैं create-react-app प्रोजेक्ट सेटअप और कॉन्फ़िगरेशन के लिए उनके जाने-माने कमांड टूल के रूप में। हालाँकि, Vite एक बेहतर विकल्प है। यह तेज विकास समय और बेहतर प्रदर्शन प्रदान करता है।

वाइट क्या है?

Vite एक बिल्ड टूल और डेवलपमेंट सर्वर है जिसे आधुनिक वेब एप्लिकेशन की विकास प्रक्रिया को बेहतर बनाने के लिए डिज़ाइन किया गया है। यह आपके एप्लिकेशन मॉड्यूल को निर्भरता और स्रोत कोड में विभाजित करके करता है। निर्भरता मॉड्यूल हैं जो अक्सर बदलते नहीं हैं, जबकि स्रोत कोड आमतौर पर विकास के दौरान अक्सर संपादित किया जाता है।

विट उपयोग करता है esbuild, एक गो-आधारित बंडलर जो स्रोत कोड के लिए निर्माण प्रक्रिया को गति देने के लिए पारंपरिक जावास्क्रिप्ट-आधारित बंडलर की तुलना में काफी तेज़ है। यह आपके एप्लिकेशन की निर्भरताओं को प्री-बंडल भी करता है और मूल ईएसएम पर स्रोत कोड प्रदान करता है, ब्राउज़रों को अधिक कुशल और तेज़ एप्लिकेशन के लिए मॉड्यूल की लोडिंग को अनुकूलित करने की अनुमति देता है प्रदर्शन। जब आपके एप्लिकेशन को उत्पादन के लिए तैनात करने का समय आता है, तो Vite में एक अंतर्निहित बिल्ड कमांड होता है जो स्वचालित रूप से आपके ऐप को तैनाती के लिए अनुकूलित करता है, यह सुनिश्चित करता है कि आपका एप्लिकेशन सुचारू रूप से चलता रहे।

एक Vite परियोजना बनाना

Vite प्रोजेक्ट बनाने से पहले, ध्यान दें कि Vite को Node.js संस्करण 14.18+ या 16+ की आवश्यकता है। आप अपने विंडोज या उबंटू मशीन पर नोड स्थापित करने के लिए इन लेखों का उल्लेख कर सकते हैं।

• कैसे करें विंडोज़ पर नोड.जेएस स्थापित करें.
• सीखना Ubuntu पर Npm और Node.js कैसे स्थापित करें

इस आदेश को टर्मिनल में चलाकर एक Vite प्रोजेक्ट बनाएं।

एनपीएम वाइट@latest बनाएं

एक बार आदेश निष्पादित होने के बाद, आपको प्रोजेक्ट नाम के लिए संकेत दिया जाएगा। अपने प्रोजेक्ट का नाम टाइप करें और एंटर पर क्लिक करें।

इसके बाद, Vite आपको एक फ्रेमवर्क चुनने के लिए कहेगा। प्रतिक्रिया का चयन करें।

Vite आपको एक वेरिएंट चुनने के लिए भी कहेगा। जावास्क्रिप्ट का चयन करें।

जब Vite प्रोजेक्ट को मचान पूरा करता है, तो उसके द्वारा बनाई गई निर्देशिका को नेविगेट करें, और npm के माध्यम से निर्भरताएँ स्थापित करें।

एनपीएम इंस्टॉल करें

प्रोजेक्ट को चलाने के लिए, इस कमांड का उपयोग करें:

एनपीएम रन देव

यह होम पेज होना चाहिए।

आप अपनी परियोजना का संपादन शुरू कर सकते हैं और आपके परिवर्तन ब्राउज़र में दिखाई देंगे।

तेज विकास गति के लिए Vite का प्रयोग करें

CRA (क्रिएट-रिएक्शन-ऐप) आमतौर पर रिएक्ट एप्लिकेशन के लिए प्रोजेक्ट स्ट्रक्चर और कॉन्फ़िगरेशन सेट करने के लिए डिफ़ॉल्ट टूल है। यह सुविधाजनक है क्योंकि आपके लिए सब कुछ सेट अप है, लेकिन विकास के दौरान इसे बनाना और पुनः लोड करना धीमा हो सकता है।

दूसरी ओर, Vite तेजी से निर्माण समय प्रदान करने के लिए ब्राउज़र में देशी ES मॉड्यूल का उपयोग करता है। यदि आप Vite का उपयोग नहीं करना चाहते हैं, तो आप Next.js जैसे रिएक्ट मेटा फ्रेमवर्क का विकल्प चुन सकते हैं क्योंकि इसे अत्यधिक प्रदर्शन करने के लिए भी डिज़ाइन किया गया है।