जब आप npm कमांड चलाते हैं तो क्या होता है?
आप एक npm कमांड पर एंटर दबाते हैं। आपका प्रोजेक्ट बिल्ड हो जाता है। यह जादू जैसा लगता है।
यह जादू नहीं है। यह नेटवर्क रिक्वेस्ट, कोड पार्सिंग और फ़ाइल ऑप्टिमाइज़ेशन की एक श्रृंखला है।
कमांड्स को आँख मूँदकर चलाना बंद करें। इसके बजाय इसके इंजन को समझें।
यहाँ उन 6 मुख्य कमांड्स के पीछे की प्रक्रिया दी गई है जिनका आप रोज़ाना उपयोग करते हैं।
- npm install
यह कमांड आपकी package.json फ़ाइल को पढ़ता है। यह आपके टूल्स के सही वर्शन खोजने के लिए क्लाउड रजिस्ट्री से संपर्क करता है।
- यह रजिस्ट्री से पैकेज डाउनलोड करता है।
- यह
node_modulesफ़ोल्डर बनाता है। - यह एक डिपेंडेंसी ट्री (dependency tree) बनाता है।
- यह सटीक वर्शन रिकॉर्ड करने के लिए
package-lock.jsonको अपडेट करता है।
- npm run format:check
यह एक वेरिफिकेशन स्टेप है। यह बिना कुछ बदले यह जाँचता है कि क्या आपका कोड आपके स्टाइल रूल्स का पालन करता है।
- यह आपकी फ़ाइलों का एक वर्चुअल लेआउट बनाता है।
- यह आपकी फ़ाइलों की तुलना Prettier जैसे नियमों से करता है।
- यदि आपकी स्पेसिंग या सिंटैक्स गलत है, तो यह एरर दिखाता है।
इन एरर्स को ठीक करने के लिए, npm run format चलाएँ। यह कमांड आपकी फ़ाइलों को सही स्टाइल में फिर से लिखने के लिए Prettier का उपयोग करता है।
- npm run lint
इसे अपने कोड के लिए एक स्पेलचेकर की तरह समझें। ESLint उन एरर्स को ढूँढता है जो आपके लॉजिक को बिगाड़ सकते हैं।
- यह सिंटैक्स एरर्स ढूँढता है।
- यह अनयूज्ड वेरिएबल्स (unused variables) की पहचान करता है।
- यह मिसिंग इम्पोर्ट्स (missing imports) का पता लगाता है।
- यह गलत React Hook इस्तेमाल करने पर एरर दिखाता है।
- npm run build
यह कमांड आपके ऐप को वास्तविक दुनिया के लिए तैयार करता है। यह एक dist फ़ोल्डर बनाता है।
- यह tree shaking करने के लिए एक bundler का उपयोग करता है। यह उस कोड को डिलीट कर देता है जिसे आपने इम्पोर्ट तो किया है लेकिन कभी इस्तेमाल नहीं किया।
- यह minification करता है। यह बाइट्स बचाने के लिए व्हाइटस्पेस हटा देता है और वेरिएबल्स का नाम बदल देता है।
- यह CSS और एसेट्स (assets) को प्रोसेस करता है।
- यह सर्वर के लिए तैयार ऑप्टिमाइज़्ड स्टैटिक फ़ाइलें आउटपुट करता है।
- npm run dev
यह आपके लोकल डेवलपमेंट सर्वर को शुरू करता है। यदि आप Vite का उपयोग करते हैं, तो यह Native ES Modules का उपयोग करता है।
- यह फ़ाइलों को तभी कंपाइल करता है जब आपका ब्राउज़र उन्हें मांगता है।
- यह Hot Module Replacement (HMR) के लिए WebSockets का उपयोग करता है।
- यह पूरे पेज को रिफ्रेश किए बिना आपके ब्राउज़र में एडिट किए गए कोड को तुरंत बदल देता है।
- npm run preview
डिप्लॉय करने से पहले अपने काम को दोबारा जाँचने के लिए इसका उपयोग करें। यह कमांड आपके सोर्स कोड को अनदेखा करता है। यह केवल आपके dist फ़ोल्डर को देखता है।
- यह सिमुलेट करता है कि आपका ऐप Vercel या AWS पर कैसा व्यवहार करेगा।
- यह आपके प्रोडक्शन बिल्ड को लोकल सर्वर पर सर्व करता है।
टर्मिनल कोई ब्लैक बॉक्स नहीं है। जब आप अपने टूल्स को समझते हैं, तो आप तेज़ी से डिबग (debug) कर पाते हैं।
एक बार जब आपने जान लिया कि कोई कमांड कैसे काम करती है, तो किस कमांड ने आपके वर्कफ़्लो को बदल दिया? मुझे नीचे बताएं।