तुम्ही npm कमांड्स रन केल्यावर काय होते?

तुम्ही npm कमांडवर Enter दाबता आणि प्रतीक्षा करता. अचानक, तुमचा प्रोजेक्ट काम करू लागतो. हे एखाद्या जादूसारखे वाटते.

ही जादू नाही. ही नेटवर्क रिक्वेस्ट्स, कोड पार्सिंग आणि फाईल ऑप्टिमायझेशनची एक मालिका आहे.

कमांड्स आंधळेपणाने रन करणे थांबवा. या ६ मुख्य कमांड्समागील इंजिन समजून घ्या.

  1. npm install ही कमांड तुमचे package.json वाचते. तुमच्या डिपेंडन्सीज (dependencies) शोधण्यासाठी ती क्लाउड रजिस्ट्रीशी संपर्क साधते. • ती node_modules फोल्डरमध्ये पॅकेजेस डाउनलोड करते. • ती व्हर्जन कॉन्फ्लिक्ट्स (version conflicts) सोडवते. • ती अचूक व्हर्जन रेकॉर्ड करण्यासाठी package-lock.json तयार करते.

  2. npm run format:check ही एक पडताळणी (verification) पायरी आहे. ती तुमच्या फाईल्स स्कॅन करण्यासाठी Prettier सारखी टूल्स वापरते. • ती तुमच्या कोडचा एक व्हर्च्युअल लेआउट तयार करते. • ती तुमच्या कोडची तुमच्या स्टाईल रूल्सशी तुलना करते. • ती तुमच्या फाईल्समध्ये बदल न करता त्रुटी (errors) दर्शवते.

  3. npm run format ही कमांड चेक दरम्यान आढळलेल्या समस्या सुधारते. • ती तुमच्या प्रोजेक्टवर Prettier रन करते. • ती तुमच्या स्टाईल रूल्सशी जुळण्यासाठी तुमच्या फाईल्स पुन्हा लिहिते. • ती स्पेसिंग आणि फॉरमॅटिंग आपोआप स्वच्छ करते.

  4. npm run lint याला तुमच्या कोडसाठी एक 'स्पेलचेकर' समजा. ESLint खालील प्रकारच्या त्रुटी शोधते: • सिंटॅक्स चुका (Syntax mistakes). • न वापरलेले व्हेरिएबल्स (Unused variables). • गहाळ इम्पॉर्ट्स (Missing imports). • चुकीचा React Hook वापर.

  5. npm run build ही कमांड तुमच्या ॲपला खऱ्या जगासाठी (real world) तयार करते. ती dist फोल्डर तयार करते. • ती न वापरलेला कोड काढून टाकण्यासाठी tree shaking करते. • ती व्हाईटस्पेस काढून टाकून आणि व्हेरिएबलची नावे लहान करून कोड minify करते. • ती JavaScript, CSS आणि ॲसेट्सना ऑप्टिमाइझ केलेल्या फाईल्समध्ये बंडल करते. • या फाईल्स सर्व्हरवर डिप्लॉयमेंटसाठी तयार असतात.

  6. npm run dev हे तुमच्या कामासाठी एक लोकल सर्व्हर सुरू करते. • जेव्हा तुमचा ब्राउझर फाईल्सची मागणी करतो, तेव्हाच फाईल्स कंपाईल करण्यासाठी ते Native ES Modules वापरते. • पेज रिफ्रेश न करता तुमची साइट त्वरित अपडेट करण्यासाठी ते Hot Module Replacement (HMR) वापरते.

  7. npm run preview ही तुमची अंतिम तपासणी आहे. ती तुमच्या सोर्स कोडकडे दुर्लक्ष करते आणि फक्त dist फोल्डरकडे पाहते. • तुमचा ॲप खऱ्या सर्व्हरवर कसा काम करेल याचे ते सिम्युलेशन करते. • प्रोडक्शनमध्ये डिप्लॉय करण्यापूर्वी बग्स शोधण्यात ते तुम्हाला मदत करते.

टर्मिनल ही कोणतीही 'ब्लॅक बॉक्स' नाही. जेव्हा गोष्टी बिघडतात, तेव्हा या टूल्सची समज तुम्हाला वेगाने डीबग (debug) करण्यास मदत करते.

एकदा का तुम्हाला एखादी कमांड कशी काम करते हे समजले की, कोणत्या कमांडमुळे तुमच्या कोडिंगची पद्धत बदलली? मला खाली सांगा.

Source: https://dev.to/ashomondi/the-magic-under-the-terminal-what-actually-happens-when-you-run-npm-commands-13ba