𝗪𝗵𝗮𝘁 𝗛𝗮𝗽𝗽𝗲𝗻𝘀 𝗪𝗵𝗲𝗻 𝗬𝗼𝘂 𝗥𝘂𝗻 𝗡𝗽𝗺 𝗖𝗼𝗺𝗺𝗮𝗻𝗱𝘀? -> ನೀವು npm commands ರನ್ ಮಾಡಿದಾಗ ಏನಾಗುತ್ತದೆ?

ನೀವು ಒಂದು npm command ಮೇಲೆ Enter ಒತ್ತುತ್ತೀರಿ ಮತ್ತು ಕಾಯುತ್ತೀರಿ. ಇದ್ದಕ್ಕಿದ್ದಂತೆ, ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಇದು ಮ್ಯಾಜಿಕ್‌ನಂತೆ ಭಾಸವಾಗುತ್ತದೆ.

ಇದು ಮ್ಯಾಜಿಕ್ ಅಲ್ಲ. ಇದು ನೆಟ್‌ವರ್ಕ್ ರಿಕ್ವೆಸ್ಟ್‌ಗಳು (network requests), ಕೋಡ್ ಪಾರ್ಸಿಂಗ್ (code parsing) ಮತ್ತು ಫೈಲ್ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಳ (file optimizations) ಸರಣಿಯಾಗಿದೆ.

ಕಣ್ಣು ಮುಚ್ಚಿ ಕಮಾಂಡ್‌ಗಳನ್ನು ರನ್ ಮಾಡುವುದನ್ನು ನಿಲ್ಲಿಸಿ. ಈ 6 ಪ್ರಮುಖ ಕಮಾಂಡ್‌ಗಳ ಹಿಂದಿರುವ ಇಂಜಿನ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ.

  1. npm install ಈ ಕಮಾಂಡ್ ನಿಮ್ಮ package.json ಅನ್ನು ಓದುತ್ತದೆ. ಇದು ನಿಮ್ಮ dependencies ಪತ್ತೆಹಚ್ಚಲು ಕ್ಲೌಡ್ ರಿಜಿಸ್ಟ್ರಿಯನ್ನು (cloud registry) ಸಂಪರ್ಕಿಸುತ್ತದೆ. • ಇದು node_modules ಫೋಲ್ಡರ್‌ಗೆ ಪ್ಯಾಕೇಜ್‌ಗಳನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡುತ್ತದೆ. • ಇದು version conflicts ಅನ್ನು ಪರಿಹರಿಸುತ್ತದೆ. • ಇದು ನಿಖರವಾದ ವರ್ಷನ್‌ಗಳನ್ನು ದಾಖಲಿಸಲು package-lock.json ಅನ್ನು ರಚಿಸುತ್ತದೆ.

  2. npm run format:check ಇದು ಒಂದು ಪರಿಶೀಲನಾ ಹಂತವಾಗಿದೆ. ಇದು ನಿಮ್ಮ ಫೈಲ್‌ಗಳನ್ನು ಸ್ಕ್ಯಾನ್ ಮಾಡಲು Prettier ನಂತಹ ಟೂಲ್‌ಗಳನ್ನು ಬಳಸುತ್ತದೆ. • ಇದು ನಿಮ್ಮ ಕೋಡ್‌ನ ವರ್ಚುವಲ್ ಲೇಔಟ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ. • ಇದು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ನಿಮ್ಮ style rules ಗಳೊಂದಿಗೆ ಹೋಲಿಸುತ್ತದೆ. • ಇದು ನಿಮ್ಮ ಫೈಲ್‌ಗಳನ್ನು ಬದಲಾಯಿಸದೆ ತಪ್ಪುಗಳನ್ನು ಗುರುತಿಸುತ್ತದೆ.

  3. npm run format ಈ ಕಮಾಂಡ್ ಚೆಕ್ ಮಾಡುವಾಗ ಕಂಡುಬಂದ ಸಮಸ್ಯೆಗಳನ್ನು ಸರಿಪಡಿಸುತ್ತದೆ. • ಇದು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ನಲ್ಲಿ Prettier ಅನ್ನು ರನ್ ಮಾಡುತ್ತದೆ. • ಇದು ನಿಮ್ಮ style rules ಗೆ ಅನುಗುಣವಾಗಿ ನಿಮ್ಮ ಫೈಲ್‌ಗಳನ್ನು ಮರುಬರೆಯುತ್ತದೆ. • ಇದು ಸ್ಪೇಸಿಂಗ್ ಮತ್ತು ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸರಿಪಡಿಸುತ್ತದೆ.

  4. npm run lint ಇದನ್ನು ನಿಮ್ಮ ಕೋಡ್‌ನ ಸ್ಪೆಲ್ ಚೆಕರ್ ಎಂದು ಭಾವಿಸಿ. ESLint ಈ ಕೆಳಗಿನ ತಪ್ಪುಗಳಿಗಾಗಿ ಸ್ಕ್ಯಾನ್ ಮಾಡುತ್ತದೆ: • Syntax ತಪ್ಪುಗಳು. • ಬಳಕೆಯಾಗದ variables. • ಮಿಸ್ಸಿಂಗ್ imports. • ತಪ್ಪಾದ React Hook ಬಳಕೆ.

  5. npm run build ಈ ಕಮಾಂಡ್ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನೈಜ ಪ್ರಪಂಚಕ್ಕೆ ಸಿದ್ಧಪಡಿಸುತ್ತದೆ. ಇದು dist ಫೋಲ್ಡರ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ. • ಇದು ಬಳಕೆಯಾಗದ ಕೋಡ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲು tree shaking ಅನ್ನು ಮಾಡುತ್ತದೆ. • ಇದು ವೈಟ್‌ಸ್ಪೇಸ್ ಅನ್ನು ತೆಗೆದುಹಾಕುವ ಮೂಲಕ ಮತ್ತು variable ಹೆಸರುಗಳನ್ನು ಚಿಕ್ಕದಾಗಿಸುವ ಮೂಲಕ ಕೋಡ್ ಅನ್ನು minify ಮಾಡುತ್ತದೆ. • ಇದು JavaScript, CSS ಮತ್ತು assets ಗಳನ್ನು ಆಪ್ಟಿಮೈಸ್ ಮಾಡಿದ ಫೈಲ್‌ಗಳಾಗಿ ಬಂಡಲ್ ಮಾಡುತ್ತದೆ. • ಈ ಫೈಲ್‌ಗಳು ಸರ್ವರ್‌ಗೆ deployment ಮಾಡಲು ಸಿದ್ಧವಾಗಿರುತ್ತವೆ.

  6. npm run dev ಇದು ನೀವು ಕೆಲಸ ಮಾಡಲು ಲೋಕಲ್ ಸರ್ವರ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ. • ಇದು ನಿಮ್ಮ ಬ್ರೌಸರ್ ಕೇಳಿದಾಗ ಮಾತ್ರ ಫೈಲ್‌ಗಳನ್ನು ಕಾಂಪೈಲ್ ಮಾಡಲು Native ES Modules ಅನ್ನು ಬಳಸುತ್ತದೆ. • ಇದು ಪೇಜ್ ರಿಫ್ರೆಶ್ ಮಾಡದೆಯೇ ನಿಮ್ಮ ಸೈಟ್ ಅನ್ನು ತಕ್ಷಣವೇ ಅಪ್‌ಡೇಟ್ ಮಾಡಲು Hot Module Replacement (HMR) ಅನ್ನು ಬಳಸುತ್ತದೆ.

  7. npm run preview ಇದು ನಿಮ್ಮ ಅಂತಿಮ ಪರಿಶೀಲನೆ. ಇದು ನಿಮ್ಮ source code ಅನ್ನು ನಿರ್ಲಕ್ಷಿಸುತ್ತದೆ ಮತ್ತು ಕೇವಲ dist ಫೋಲ್ಡರ್ ಅನ್ನು ಮಾತ್ರ ನೋಡುತ್ತದೆ. • ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ನೈಜ ಸರ್ವರ್‌ನಲ್ಲಿ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಸಿಮ್ಯುಲೇಟ್ ಮಾಡುತ್ತದೆ. • ನೀವು production ಗೆ deploy ಮಾಡುವ ಮೊದಲು ಬಗ್‌ಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಇದು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಟರ್ಮಿನಲ್ ಒಂದು ಕಪ್ಪು ಪೆಟ್ಟಿಗೆಯಲ್ಲ (black box). ವಿಷಯಗಳು ವಿಫಲವಾದಾಗ ಇವುಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ನೀವು ವೇಗವಾಗಿ debug ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಇದರ ಕಾರ್ಯವೈಖರಿಯನ್ನು ಕಲಿತ ನಂತರ, ಯಾವ ಕಮಾಂಡ್ ನಿಮ್ಮ ಕೋಡಿಂಗ್ ಶೈಲಿಯನ್ನು ಬದಲಾಯಿಸಿತು? ಕೆಳಗೆ ತಿಳಿಸಿ.

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