जब आप npm कमांड चलाते हैं तो क्या होता है?
आप एक npm कमांड पर Enter दबाते हैं और इंतज़ार करते हैं। अचानक, आपका प्रोजेक्ट काम करने लगता है। यह जादू जैसा लगता है।
यह जादू नहीं है। यह नेटवर्क रिक्वेस्ट, कोड पार्सिंग और फ़ाइल ऑप्टिमाइज़ेशन की एक श्रृंखला है।
कमांड्स को बिना सोचे-समझे चलाना बंद करें। इन 6 मुख्य कमांड्स के पीछे के इंजन को समझें।
npm installयह कमांड आपकेpackage.jsonको पढ़ता है। यह आपकी डिपेंडेंसीज़ (dependencies) खोजने के लिए एक क्लाउड रजिस्ट्री से संपर्क करता है। • यहnode_modulesफ़ोल्डर में पैकेज डाउनलोड करता है। • यह वर्शन कॉन्फ्लिक्ट्स (version conflicts) को हल करता है। • यह सटीक वर्शन रिकॉर्ड करने के लिए एकpackage-lock.jsonबनाता है।npm run format:checkयह एक वेरिफिकेशन स्टेप है। यह आपकी फ़ाइलों को स्कैन करने के लिए Prettier जैसे टूल्स का उपयोग करता है। • यह आपके कोड का एक वर्चुअल लेआउट बनाता है। • यह आपके कोड की तुलना आपके स्टाइल रूल्स (style rules) से करता है। • यह आपकी फ़ाइलों को बदले बिना एरर्स (errors) को फ्लैग करता है।npm run formatयह कमांड चेक के दौरान पाई गई समस्याओं को ठीक करता है। • यह आपके प्रोजेक्ट पर Prettier चलाता है। • यह आपके स्टाइल रूल्स से मेल खाने के लिए आपकी फ़ाइलों को फिर से लिखता है। • यह स्पेसिंग और फॉर्मेटिंग को स्वचालित रूप से ठीक करता है।npm run lintइसे अपने कोड के लिए एक स्पेलचेकर की तरह समझें। ESLint इन एरर्स को स्कैन करता है: • सिंटैक्स गलतियाँ (Syntax mistakes)। • अनयूज्ड वेरिएबल्स (Unused variables)। • मिसिंग इम्पोर्ट्स (Missing imports)। • गलत React Hook उपयोग।npm run buildयह कमांड आपके ऐप को वास्तविक दुनिया के लिए तैयार करता है। यह एकdistफ़ोल्डर बनाता है। • यह अनयूज्ड कोड को हटाने के लिए tree shaking करता है। • यह व्हाइटस्पेस हटाकर और वेरिएबल के नाम छोटे करके कोड को minify करता है। • यह JavaScript, CSS, और एसेट्स को ऑप्टिमाइज़्ड फ़ाइलों में बंडल करता है। • ये फ़ाइलें सर्वर पर डिप्लॉयमेंट के लिए तैयार होती हैं।npm run devयह आपके काम करने के लिए एक लोकल सर्वर शुरू करता है। • यह फ़ाइलों को केवल तभी कंपाइल करने के लिए Native ES Modules का उपयोग करता है जब आपका ब्राउज़र उन्हें मांगता है। • यह पेज रिफ्रेश किए बिना आपकी साइट को तुरंत अपडेट करने के लिए Hot Module Replacement (HMR) का उपयोग करता है।npm run previewयह आपका अंतिम चेक है। यह आपके सोर्स कोड को अनदेखा करता है और केवलdistफ़ोल्डर को देखता है। • यह सिमुलेट करता है कि आपका ऐप एक वास्तविक सर्वर पर कैसे काम करेगा। • यह प्रोडक्शन में डिप्लॉय करने से पहले बग्स (bugs) को पकड़ने में आपकी मदद करता है।
टर्मिनल कोई ब्लैक बॉक्स नहीं है। इन टूल्स को समझने से चीजें खराब होने पर आपको तेज़ी से डिबग करने में मदद मिलती है।
एक बार जब आपने जान लिया कि यह कैसे काम करता है, तो किस कमांड ने आपके कोड करने के तरीके को बदल दिया? मुझे नीचे बताएं।