आधुनिक वेब विकास में, संवेदनशील डेटा जैसे एपीआई कुंजी, डेटाबेस क्रेडेंशियल और विभिन्न वातावरणों के लिए विभिन्न कॉन्फ़िगरेशन का प्रबंधन करना आवश्यक है। इन वेरिएबल्स को सीधे कोड में संग्रहीत करने से सुरक्षा जोखिम पैदा हो सकता है और तैनाती जटिल हो सकती है। वाइट, एक आधुनिक फ्रंट-एंड बिल्ड टूल, .env फ़ाइलों के माध्यम से पर्यावरण चर को प्रबंधित करने का एक सीधा तरीका प्रदान करता है।

.env फ़ाइल क्या है?

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

विटे में पर्यावरण चर:

वाइट पर्यावरण चर के लिए अंतर्निहित समर्थन के साथ आता है, जिससे वर्तमान परिवेश के आधार पर विभिन्न मूल्यों को इंजेक्ट करना आसान हो जाता है। यहां बताया गया है कि Vite पर्यावरण चर को कैसे संभालता है:

वैश्विक चर: वाइट निर्माण के समय पर्यावरण चर इंजेक्ट करता है।
प्रीफ़िक्स्ड वेरिएबल्स: केवल VITE_ के साथ प्रीफ़िक्स्ड वेरिएबल्स सुरक्षा कारणों से क्लाइंट-साइड जावास्क्रिप्ट कोड के संपर्क में आते हैं। इस तरह से उपसर्ग नहीं किया गया कोई भी वेरिएबल ब्राउज़र में पहुंच योग्य नहीं होगा।

विटे पर्यावरण चर का उदाहरण:

VITE_API_URL=https://api.example.com

Vite में .env फ़ाइलें सेट करना
Vite अनेक .env फ़ाइलों का समर्थन करता है, जो आपको विशिष्ट परिवेशों के लिए पर्यावरण चर परिभाषित करने की अनुमति देता है। यहाँ एक विशिष्ट सेटअप है:

.env: सभी परिवेशों में साझा किए गए पर्यावरण चर के लिए डिफ़ॉल्ट फ़ाइल।
.env.development: विकास परिवेश के लिए विशिष्ट चर।
.env.production: उत्पादन परिवेश के लिए विशिष्ट चर।

उदाहरण .env फ़ाइल:

VITE_API_URL=https://api.example.com
VITE_APP_NAME=MyViteApp

उदाहरण .env.विकास फ़ाइल:

VITE_API_URL=http://localhost:3000
VITE_DEBUG_MODE=true

उदाहरण .env.production फ़ाइल:

VITE_API_URL=https://api.production.com
VITE_DEBUG_MODE=false

विटे में पर्यावरण चर तक पहुंच

अपने Vite प्रोजेक्ट के अंदर पर्यावरण चर तक पहुंचने के लिए, आयात.मेटा.env ऑब्जेक्ट का उपयोग करें।

console.log(import.meta.env.VITE_API_URL); // Outputs the value of VITE_API_URL

Vite वर्तमान परिवेश के आधार पर निर्माण प्रक्रिया के दौरान आयात.मेटा.env मानों को स्वचालित रूप से बदल देता है।

एकाधिक वातावरण का प्रबंधन:

Vite की .env फ़ाइलों को विकास, स्टेजिंग और उत्पादन जैसे विभिन्न वातावरणों के लिए अनुकूलित किया जा सकता है। आप किस वातावरण में हैं, इसके आधार पर, Vite उपयुक्त .env फ़ाइल लोड करेगा:

वीट चलाने से .env.development फ़ाइल लोड होती है।
वाइट बिल्ड चलाने से .env.production फ़ाइल लोड होती है।
एक विशिष्ट वातावरण में चल रहा है:

vite --mode staging

डिबगिंग पर्यावरण चर:

यदि आपको पर्यावरण चर के अपेक्षा के अनुरूप काम न करने में समस्या हो रही है, तो निम्नलिखित की जाँच करें:

• वेरिएबल उपसर्ग: सुनिश्चित करें कि सभी क्लाइंट-साइड वेरिएबल्स में VITE_ उपसर्ग है, क्योंकि Vite इस उपसर्ग के बिना वेरिएबल्स को अनदेखा करता है।
• Env लोडिंग ऑर्डर: सुनिश्चित करें कि .env और पर्यावरण-विशिष्ट फ़ाइलें प्रोजेक्ट रूट में हैं और सही ढंग से नामित हैं।
• बिल्ड प्रक्रिया की जांच करें: विकास के दौरान सभी उपलब्ध पर्यावरण चर देखने के लिए कंसोल.लॉग(import.meta.env) का उपयोग करें।

निष्कर्ष::

.env फ़ाइलों के माध्यम से पर्यावरण चर के लिए Vite का अंतर्निहित समर्थन विभिन्न वातावरणों में कॉन्फ़िगरेशन को प्रबंधित करना आसान बनाता है।