ನೀವು npm ಕಮಾಂಡ್ಗಳನ್ನು ರನ್ ಮಾಡಿದಾಗ ಏನಾಗುತ್ತದೆ?
ನೀವು ಒಂದು npm ಕಮಾಂಡ್ ಮೇಲೆ ಎಂಟರ್ ಒತ್ತುತ್ತೀರಿ. ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಬಿಲ್ಡ್ ಆಗುತ್ತದೆ. ಇದು ಮ್ಯಾಜಿಕ್ನಂತೆ ಭಾಸವಾಗುತ್ತದೆ.
ಇದು ಮ್ಯಾಜಿಕ್ ಅಲ್ಲ. ಇದು ನೆಟ್ವರ್ಕ್ ರಿಕ್ವೆಸ್ಟ್ಗಳು, ಕೋಡ್ ಪಾರ್ಸಿಂಗ್ ಮತ್ತು ಫೈಲ್ ಆಪ್ಟಿಮೈಸೇಶನ್ನ ಸರಣಿ.
ಕಮಾಂಡ್ಗಳನ್ನು ಕುರುಡಾಗಿ ರನ್ ಮಾಡುವುದನ್ನು ನಿಲ್ಲಿಸಿ. ಬದಲಾಗಿ ಅದರ ಹಿಂದಿರುವ ಇಂಜಿನ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ.
ನೀವು ಪ್ರತಿದಿನ ಬಳಸುವ 6 ಪ್ರಮುಖ ಕಮಾಂಡ್ಗಳ ಹಿಂದೆ ಏನಾಗುತ್ತದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ.
- npm install
ಈ ಕಮಾಂಡ್ ನಿಮ್ಮ package.json ಫೈಲ್ ಅನ್ನು ಓದುತ್ತದೆ. ನಿಮ್ಮ ಟೂಲ್ಗಳ ಸರಿಯಾದ ವರ್ಷನ್ಗಳನ್ನು ಹುಡುಕಲು ಇದು ಕ್ಲೌಡ್ ರಿಜಿಸ್ಟ್ರಿಯನ್ನು ಸಂಪರ್ಕಿಸುತ್ತದೆ.
- ಇದು ರಿಜಿಸ್ಟ್ರಿಯಿಂದ ಪ್ಯಾಕೇಜ್ಗಳನ್ನು ಡೌನ್ಲೋಡ್ ಮಾಡುತ್ತದೆ.
- ಇದು node_modules ಫೋಲ್ಡರ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ.
- ಇದು dependency tree ಅನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ.
- ಇದು ನಿಖರವಾದ ವರ್ಷನ್ಗಳನ್ನು ದಾಖಲಿಸಲು package-lock.json ಅನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡುತ್ತದೆ.
- npm run format:check
ಇದು ಒಂದು ಪರಿಶೀಲನಾ ಹಂತವಾಗಿದೆ. ಇದು ಏನನ್ನೂ ಬದಲಾಯಿಸದೆ ನಿಮ್ಮ ಕೋಡ್ ನಿಮ್ಮ ಸ್ಟೈಲ್ ನಿಯಮಗಳನ್ನು ಅನುಸರಿಸುತ್ತದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ.
- ಇದು ನಿಮ್ಮ ಫೈಲ್ಗಳ ವರ್ಚುವಲ್ ಲೇಔಟ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ.
- ಇದು ನಿಮ್ಮ ಫೈಲ್ಗಳನ್ನು Prettier ನಂತಹ ನಿಯಮಗಳೊಂದಿಗೆ ಹೋಲಿಸುತ್ತದೆ.
- ನಿಮ್ಮ ಸ್ಪೇಸಿಂಗ್ ಅಥವಾ ಸಿಂಟ್ಯಾಕ್ಸ್ ತಪ್ಪಾಗಿದ್ದರೆ ಇದು ದೋಷಗಳನ್ನು (errors) ಸೂಚಿಸುತ್ತದೆ.
ಈ ದೋಷಗಳನ್ನು ಸರಿಪಡಿಸಲು, npm run format ರನ್ ಮಾಡಿ. ಈ ಕಮಾಂಡ್ ನಿಮ್ಮ ಫೈಲ್ಗಳನ್ನು ಸರಿಯಾದ ಸ್ಟೈಲ್ಗೆ ಮರುಬರೆಯಲು Prettier ಅನ್ನು ಬಳಸುತ್ತದೆ.
- npm run lint
ಇದನ್ನು ನಿಮ್ಮ ಕೋಡ್ನ ಸ್ಪೆಲ್ ಚೆಕರ್ ಎಂದು ಭಾವಿಸಿ. ESLint ನಿಮ್ಮ ಲಾಜಿಕ್ ಅನ್ನು ಹಾಳುಮಾಡುವ ದೋಷಗಳನ್ನು ಹುಡುಕುತ್ತದೆ.
- ಇದು ಸಿಂಟ್ಯಾಕ್ಸ್ ದೋಷಗಳನ್ನು ಪತ್ತೆಹಚ್ಚುತ್ತದೆ.
- ಇದು ಬಳಕೆಯಾಗದ ವೇರಿಯೇಬಲ್ಗಳನ್ನು ಗುರುತಿಸುತ್ತದೆ.
- ಇದು ಮಿಸ್ಸಿಂಗ್ ಇಂಪೋರ್ಟ್ಗಳನ್ನು ಪತ್ತೆಹಚ್ಚುತ್ತದೆ.
- ಇದು ತಪ್ಪಾದ React Hook ಬಳಕೆಯನ್ನು ಸೂಚಿಸುತ್ತದೆ.
- npm run build
ಈ ಕಮಾಂಡ್ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನೈಜ ಪ್ರಪಂಚಕ್ಕೆ ಸಿದ್ಧಪಡಿಸುತ್ತದೆ. ಇದು dist ಫೋಲ್ಡರ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ.
- ಇದು tree shaking ಮಾಡಲು ಬಂಡಲರ್ ಅನ್ನು ಬಳಸುತ್ತದೆ. ಇದು ನೀವು ಇಂಪೋರ್ಟ್ ಮಾಡಿದ ಆದರೆ ಎಂದಿಗೂ ಬಳಸದ ಕೋಡ್ ಅನ್ನು ಡಿಲೀಟ್ ಮಾಡುತ್ತದೆ.
- ಇದು minification ಅನ್ನು ಮಾಡುತ್ತದೆ. ಇದು ಬೈಟ್ಗಳನ್ನು ಉಳಿಸಲು ವೈಟ್ಸ್ಪೇಸ್ ಅನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ ಮತ್ತು ವೇರಿಯೇಬಲ್ಗಳನ್ನು ಮರುನಾಮಕರಣ ಮಾಡುತ್ತದೆ.
- ಇದು CSS ಮತ್ತು ಅಸೆಟ್ಗಳನ್ನು ಪ್ರೊಸೆಸ್ ಮಾಡುತ್ತದೆ.
- ಇದು ಸರ್ವರ್ಗೆ ಸಿದ್ಧವಾಗಿರುವ ಆಪ್ಟಿಮೈಸ್ಡ್ ಸ್ಟ್ಯಾಟಿಕ್ ಫೈಲ್ಗಳನ್ನು ನೀಡುತ್ತದೆ.
- npm run dev
ಇದು ನಿಮ್ಮ ಲೋಕಲ್ ಡೆವಲಪ್ಮೆಂಟ್ ಸರ್ವರ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ. ನೀವು Vite ಬಳಸುತ್ತಿದ್ದರೆ, ಇದು Native ES Modules ಅನ್ನು ಬಳಸುತ್ತದೆ.
- ನಿಮ್ಮ ಬ್ರೌಸರ್ ಕೇಳಿದಾಗ ಮಾತ್ರ ಇದು ಫೈಲ್ಗಳನ್ನು ಕಂಪಿಲ್ ಮಾಡುತ್ತದೆ.
- ಇದು Hot Module Replacement (HMR) ಗಾಗಿ WebSockets ಅನ್ನು ಬಳಸುತ್ತದೆ.
- ಇದು ಪೂರ್ಣ ಪೇಜ್ ರಿಫ್ರೆಶ್ ಮಾಡದೆಯೇ ಎಡಿಟ್ ಮಾಡಿದ ಕೋಡ್ ಅನ್ನು ನಿಮ್ಮ ಬ್ರೌಸರ್ನಲ್ಲಿ ತಕ್ಷಣವೇ ಬದಲಾಯಿಸುತ್ತದೆ.
- npm run preview
ನೀವು ಡಿಪ್ಲಾಯ್ ಮಾಡುವ ಮೊದಲು ನಿಮ್ಮ ಕೆಲಸವನ್ನು ಮತ್ತೊಮ್ಮೆ ಪರಿಶೀಲಿಸಲು ಇದನ್ನು ಬಳಸಿ. ಈ ಕಮಾಂಡ್ ನಿಮ್ಮ ಸೋರ್ಸ್ ಕೋಡ್ ಅನ್ನು ನಿರ್ಲಕ್ಷಿಸುತ್ತದೆ. ಇದು ಕೇವಲ ನಿಮ್ಮ dist ಫೋಲ್ಡರ್ ಅನ್ನು ಮಾತ್ರ ನೋಡುತ್ತದೆ.
- ಇದು Vercel ಅಥವಾ AWS ನಲ್ಲಿ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಹೇಗೆ ವರ್ತಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಸಿಮ್ಯುಲೇಟ್ ಮಾಡುತ್ತದೆ.
- ಇದು ನಿಮ್ಮ ಪ್ರೊಡಕ್ಷನ್ ಬಿಲ್ಡ್ ಅನ್ನು ಲೋಕಲ್ ಸರ್ವರ್ನಲ್ಲಿ ಸರ್ವ್ ಮಾಡುತ್ತದೆ.
ಟರ್ಮಿನಲ್ ಎಂಬುದು ಒಂದು ಕಪ್ಪು ಪೆಟ್ಟಿಗೆಯಲ್ಲ (black box). ನೀವು ನಿಮ್ಮ ಟೂಲ್ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಂಡಾಗ, ನೀವು ವೇಗವಾಗಿ ಡಿಬಗ್ ಮಾಡಬಹುದು.
ಅದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಎಂದು ತಿಳಿದ ನಂತರ, ಯಾವ ಕಮಾಂಡ್ ನಿಮ್ಮ ಕೆಲಸದ ವಿಧಾನವನ್ನು (workflow) ಬದಲಾಯಿಸಿತು? ಕೆಳಗೆ ತಿಳಿಸಿ.