Nini Hutokea Unapoweka Amri za npm?

Unabonyeza enter kwenye amri ya npm. Mradi wako unajengwa. Inahisi kama uchawi.

Si uchawi. Ni mfululizo wa maombi ya mtandao (network requests), uchambuzi wa kodi (code parsing), na uboreshaji wa faili (file optimization).

Acha kuendesha amri bila kufikiria. Badala yake, elewa injini inayofanya kazi.

Hapa kuna kinachotokea nyuma ya amri 6 kuu unazotumia kila siku.

  1. npm install

Amri hii inasoma faili yako ya package.json. Inawasiliana na cloud registry ili kupata matoleo sahihi ya zana zako.

  • Inapakua vifurushi kutoka kwenye registry.
  • Inatengeneza folda ya node_modules.
  • Inatengeneza mti wa utegemezi (dependency tree).
  • Inasasisha package-lock.json ili kurekodi matoleo sahihi.
  1. npm run format:check

Hii ni hatua ya uhakiki. Inakagua ikiwa kodi yako inafuata sheria zako za mtindo (style rules) bila kubadilisha kitu chochote.

  • Inatengeneza mpangilio wa kidhahania (virtual layout) wa faili zako.
  • Inalinganisha faili zako na sheria kama Prettier.
  • Inaonyesha makosa ikiwa nafasi (spacing) au sintaksi (syntax) yako ni mbaya.

Ili kurekebisha makosa haya, endesha npm run format. Amri hii inatumia Prettier kuandika upya faili zako kulingana na mtindo sahihi.

  1. npm run lint

Iliishe kama programu ya kukagua tahajia (spellchecker) kwa kodi yako. ESLint hutafuta makosa yanayoharibu mantiki (logic) yako.

  • Inapata makosa ya sintaksi (syntax errors).
  • Inatambua vigezo (variables) visivyotumika.
  • Inagundua 'imports' zilizokosekana.
  • Inaonyesha matumizi yasiyo sahihi ya React Hook.
  1. npm run build

Amri hii inaandaa programu yako kwa ajili ya ulimwengu halisi. Inatengeneza folda ya dist.

  • Inatumia bundler kufanya tree shaking. Hii hufuta kodi uliyoiingiza (imported) lakini hukuitumia kamwe.
  • Inafanya minification. Hii huondoa nafasi (whitespace) na kubadilisha majina ya vigezo ili kuokoa bayti (bytes).
  • Inachakata CSS na rasilimali (assets).
  • Inatoa faili za kudumu (static files) zilizoboreshwa ambazo ziko tayari kwa seva.
  1. npm run dev

Hii huanzisha seva yako ya maendeleo ya ndani (local development server). Ikiwa unatumia Vite, inatumia Native ES Modules.

  • Inatafsiri (compiles) faili pale tu kivinjari (browser) chako kinapozihitaji.
  • Inatumia WebSockets kwa ajili ya Hot Module Replacement (HMR).
  • Inabadilisha kodi uliyohariri kwenye kivinjari chako papo hapo bila kuhitaji kuipakia upya ukurasa mzima (full page refresh).
  1. npm run preview

Tumia hii kukagua kazi yako mara mbili kabla ya ku-deploy. Amri hii inapuuza kodi yako ya chanzo (source code). Inaangalia tu folda yako ya dist.

  • Inaiga jinsi programu yako inavyofanya kazi kwenye Vercel au AWS.
  • Inatoa toleo lako la uzalishaji (production build) kwenye seva ya ndani.

Terminal si sanduku jeusi (black box). Unapoelewa zana zako, unatatua makosa (debug) kwa haraka zaidi.

Ni amri gani ilibadilisha mtindo wako wa kazi mara tu ulipojifunza jinsi inavyofanya kazi? Niambie hapa chini.

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