మీరు npm కమాండ్లను రన్ చేసినప్పుడు ఏమి జరుగుతుంది?

మీరు ఒక npm కమాండ్‌పై ఎంటర్ నొక్కుతారు. మీ ప్రాజెక్ట్ బిల్డ్ అవుతుంది. అది ఒక మ్యాజిక్ లా అనిపిస్తుంది.

అది మ్యాజిక్ కాదు. అది నెట్‌వర్క్ రిక్వెస్ట్‌లు, కోడ్ పార్సింగ్ మరియు ఫైల్ ఆప్టిమైజేషన్ల శ్రేణి.

కమాండ్లను గుడ్డిగా రన్ చేయడం ఆపండి. దానికి బదులుగా దాని వెనుక ఉన్న ఇంజిన్‌ను అర్థం చేసుకోండి.

మీరు ప్రతిరోజూ ఉపయోగించే 6 ముఖ్యమైన కమాండ్ల వెనుక ఏం జరుగుతుందో ఇక్కడ చూడండి.

  1. npm install

ఈ కమాండ్ మీ package.json ఫైల్‌ను చదువుతుంది. మీ టూల్స్ యొక్క సరైన వెర్షన్లను కనుగొనడానికి ఇది ఒక క్లౌడ్ రిజిస్ట్రీని సంప్రదిస్తుంది.

  • ఇది రిజిస్ట్రీ నుండి ప్యాకేజీలను డౌన్‌లోడ్ చేస్తుంది.
  • ఇది node_modules ఫోల్డర్‌ను సృష్టిస్తుంది.
  • ఇది డిపెండెన్సీ ట్రీని (dependency tree) నిర్మిస్తుంది.
  • ఖచ్చితమైన వెర్షన్లను నమోదు చేయడానికి ఇది package-lock.jsonను అప్‌డేట్ చేస్తుంది.
  1. npm run format:check

ఇది ఒక వెరిఫికేషన్ దశ. ఇది మీ కోడ్ ఏమీ మార్చకుండా మీ స్టైల్ రూల్స్‌ను అనుసరిస్తుందో లేదో తనిఖీ చేస్తుంది.

  • ఇది మీ ఫైల్‌ల యొక్క వర్చువల్ లేఅవుట్‌ను నిర్మిస్తుంది.
  • ఇది మీ ఫైల్‌లను Prettier వంటి రూల్స్‌తో పోల్చి చూస్తుంది.
  • మీ స్పేసింగ్ లేదా సింటాక్స్ తప్పుగా ఉంటే ఇది ఎర్రర్లను సూచిస్తుంది.

ఈ ఎర్రర్లను సరిచేయడానికి, npm run format రన్ చేయండి. ఈ కమాండ్ మీ ఫైల్‌లను సరైన స్టైల్‌లోకి తిరిగి రాయడానికి Prettierని ఉపయోగిస్తుంది.

  1. npm run lint

దీనిని మీ కోడ్ కోసం ఒక స్పెల్ చెక్కర్‌గా భావించండి. ESLint మీ లాజిక్‌ను దెబ్బతీసే ఎర్రర్ల కోసం వెతుకుతుంది.

  • ఇది సింటాక్స్ ఎర్రర్లను కనుగొంటుంది.
  • ఇది ఉపయోగించని వేరియబుల్స్‌ను గుర్తిస్తుంది.
  • ఇది మిస్సింగ్ ఇంపోర్ట్‌లను గుర్తిస్తుంది.
  • ఇది తప్పుగా వాడిన React Hookలను సూచిస్తుంది.
  1. npm run build

ఈ కమాండ్ మీ యాప్‌ను రియల్ వరల్డ్ కోసం సిద్ధం చేస్తుంది. ఇది ఒక dist ఫోల్డర్‌ను సృష్టిస్తుంది.

  • ఇది tree shaking చేయడానికి ఒక బండలర్‌ను (bundler) ఉపయోగిస్తుంది. మీరు ఇంపోర్ట్ చేసినా, ఎప్పుడూ ఉపయోగించని కోడ్‌ను ఇది తొలగిస్తుంది.
  • ఇది minification చేస్తుంది. ఇది బైట్‌లను ఆదా చేయడానికి వైట్‌స్పేస్‌ను తొలగిస్తుంది మరియు వేరియబుల్స్‌ను రీనేమ్ చేస్తుంది.
  • ఇది CSS మరియు అసెట్స్‌ను ప్రాసెస్ చేస్తుంది.
  • ఇది సర్వర్‌కు సిద్ధంగా ఉన్న ఆప్టిమైజ్డ్ స్టాటిక్ ఫైల్‌లను అవుట్‌పుట్‌గా ఇస్తుంది.
  1. npm run dev

ఇది మీ లోకల్ డెవలప్‌మెంట్ సర్వర్‌ను ప్రారంభిస్తుంది. మీరు Vite ఉపయోగిస్తే, ఇది Native ES Modulesని ఉపయోగిస్తుంది.

  • మీ బ్రౌజర్ అడిగినప్పుడు మాత్రమే ఇది ఫైల్‌లను కంపైల్ చేస్తుంది.
  • ఇది Hot Module Replacement (HMR) కోసం WebSocketsని ఉపయోగిస్తుంది.
  • ఇది పూర్తి పేజీ రిఫ్రెష్ అవసరం లేకుండానే, మీరు ఎడిట్ చేసిన కోడ్‌ను మీ బ్రౌజర్‌లో తక్షణమే మారుస్తుంది.
  1. npm run preview

మీరు డిప్లాయ్ చేసే ముందు మీ పనిని సరిచూసుకోవడానికి దీనిని ఉపయోగించండి. ఈ కమాండ్ మీ సోర్స్ కోడ్‌ను విస్మరిస్తుంది. ఇది కేవలం మీ dist ఫోల్డర్‌ను మాత్రమే చూస్తుంది.

  • ఇది Vercel లేదా AWSలో మీ యాప్ ఎలా పనిచేస్తుందో అనుకరిస్తుంది.
  • ఇది మీ ప్రొడక్షన్ బిల్డ్‌ను లోకల్ సర్వర్‌లో అందిస్తుంది.

టెర్మినల్ అనేది ఒక బ్లాక్ బాక్స్ కాదు. మీరు మీ టూల్స్‌ను అర్థం చేసుకున్నప్పుడు, మీరు వేగంగా డీబగ్ చేయగలరు.

అది ఎలా పనిచేస్తుందో తెలుసుకున్న తర్వాత, ఏ కమాండ్ మీ వర్క్‌ఫ్లోను మార్చింది? కింద తెలియజేయండి.

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