𝗪𝗵𝗮𝘁 𝗛𝗮𝗽𝗽𝗲𝗻𝘀 𝗪𝗵𝗲𝗻 𝗬𝗼𝘂 𝗥𝘂𝗻 𝗡𝗽𝗺 𝗖𝗼𝗺𝗺𝗮𝗻𝗱𝘀?
നിങ്ങൾ ഒരു npm കമാൻഡിൽ എന്റർ അമർത്തുന്നു. നിങ്ങളുടെ പ്രോജക്റ്റ് ബിൽഡ് ആകുന്നു. അത് ഒരു മാജിക് പോലെ തോന്നാം.
ഇതൊരു മാജിക് അല്ല. ഇത് നെറ്റ്വർക്ക് റിക്വസ്റ്റുകൾ, കോഡ് പാഴ്സിംഗ്, ഫയൽ ഒപ്റ്റിമൈസേഷൻ എന്നിവയുടെ ഒരു പരമ്പരയാണ്.
കമാൻഡുകൾ അന്ധമായി റൺ ചെയ്യുന്നത് നിർത്തുക. പകരം അതിന്റെ പ്രവർത്തനം മനസ്സിലാക്കുക.
നിങ്ങൾ ദിവസവും ഉപയോഗിക്കുന്ന 6 പ്രധാന കമാൻഡുകൾക്ക് പിന്നിൽ എന്താണ് സംഭവിക്കുന്നത് എന്ന് നോക്കാം.
- npm install
ഈ കമാൻഡ് നിങ്ങളുടെ package.json ഫയൽ വായിക്കുന്നു. നിങ്ങളുടെ ടൂളുകളുടെ ശരിയായ പതിപ്പുകൾ (versions) കണ്ടെത്താനായി ഇത് ഒരു ക്ലൗഡ് രജിസ്ടറിയുമായി ബന്ധപ്പെടുന്നു.
- ഇത് രജിസ്ട്രിയിൽ നിന്ന് പാക്കേജുകൾ ഡൗൺലോഡ് ചെയ്യുന്നു.
- ഇത് node_modules ഫോൾഡർ നിർമ്മിക്കുന്നു.
- ഇത് ഒരു dependency tree നിർമ്മിക്കുന്നു.
- കൃത്യമായ പതിപ്പുകൾ രേഖപ്പെടുത്തുന്നതിനായി ഇത് package-lock.json അപ്ഡേറ്റ് ചെയ്യുന്നു.
- npm run format:check
ഇതൊരു വെരിഫിക്കേഷൻ ഘട്ടമാണ്. നിങ്ങളുടെ കോഡ് മാറ്റങ്ങളൊന്നും വരുത്താതെ തന്നെ സ്റ്റൈൽ നിയമങ്ങൾ പാലിക്കുന്നുണ്ടോ എന്ന് ഇത് പരിശോധിക്കുന്നു.
- ഇത് നിങ്ങളുടെ ഫയലുകളുടെ ഒരു വിർച്വൽ ലേഔട്ട് നിർമ്മിക്കുന്നു.
- ഇത് Prettier പോലുള്ള നിയമങ്ങളുമായി നിങ്ങളുടെ ഫയലുകളെ താരതമ്യം ചെയ്യുന്നു.
- സ്പേസിംഗിലോ സിന്റാക്സിലോ തെറ്റുകൾ ഉണ്ടെങ്കിൽ ഇത് അവ ചൂണ്ടിക്കാണിക്കുന്നു.
ഈ തെറ്റുകൾ പരിഹരിക്കാൻ npm run format റൺ ചെയ്യുക. ഈ കമാൻഡ് Prettier ഉപയോഗിച്ച് നിങ്ങളുടെ ഫയലുകളെ ശരിയായ സ്റ്റൈലിലേക്ക് മാറ്റുന്നു.
- npm run lint
ഇതിനെ നിങ്ങളുടെ കോഡിനായുള്ള ഒരു സ്പെൽചെക്കർ (spellchecker) ആയി കരുതുക. നിങ്ങളുടെ ലോജിക് തകരാറിലാക്കുന്ന പിശകുകൾ ESLint കണ്ടെത്തുന്നു.
- ഇത് സിന്റാക്സ് പിശകുകൾ കണ്ടെത്തുന്നു.
- ഉപയോഗിക്കാത്ത വേരിയബിളുകളെ ഇത് തിരിച്ചറിയുന്നു.
- വിട്ടുപോയ ഇംപോർട്ടുകൾ (missing imports) ഇത് കണ്ടെത്തുന്നു.
- തെറ്റായ React Hook ഉപയോഗം ഇത് ചൂണ്ടിക്കാണിക്കുന്നു.
- npm run build
ഈ കമാൻഡ് നിങ്ങളുടെ ആപ്പിനെ യഥാർത്ഥ ലോകത്തിനായി (real world) തയ്യാറാക്കുന്നു. ഇത് ഒരു dist ഫോൾഡർ നിർമ്മിക്കുന്നു.
- ഇത് tree shaking ചെയ്യാൻ ഒരു bundler ഉപയോഗിക്കുന്നു. നിങ്ങൾ ഇംപോർട്ട് ചെയ്തതും എന്നാൽ ഉപയോഗിക്കാത്തതുമായ കോഡുകൾ ഇത് നീക്കം ചെയ്യുന്നു.
- ഇത് minification ചെയ്യുന്നു. ബൈറ്റുകൾ ലാഭിക്കുന്നതിനായി ഇത് വൈറ്റ്സ്പേസ് നീക്കം ചെയ്യുകയും വേരിയബിളുകളുടെ പേര് മാറ്റുകയും ചെയ്യുന്നു.
- ഇത് CSS-ഉം അസറ്റുകളും പ്രോസസ്സ് ചെയ്യുന്നു.
- ഒരു സെർവറിന് ഉപയോഗിക്കാൻ പാകത്തിൽ ഒപ്റ്റിമൈസ് ചെയ്ത സ്റ്റാറ്റിക് ഫയലുകൾ ഇത് നൽകുന്നു.
- npm run dev
ഇത് നിങ്ങളുടെ ലോക്കൽ ഡെവലപ്മെന്റ് സെർവർ ആരംഭിക്കുന്നു. നിങ്ങൾ Vite ആണ് ഉപയോഗിക്കുന്നതെങ്കിൽ, ഇത് Native ES Modules ഉപയോഗിക്കുന്നു.
- ബ്രൗസർ ആവശ്യപ്പെടുമ്പോൾ മാത്രം ഇത് ഫയലുകൾ കംപൈൽ ചെയ്യുന്നു.
- Hot Module Replacement (HMR)-നായി ഇത് WebSockets ഉപയോഗിക്കുന്നു.
- പേജ് മുഴുവനായി റീഫ്രഷ് ചെയ്യാതെ തന്നെ നിങ്ങൾ എഡിറ്റ് ചെയ്ത കോഡ് ബ്രൗസറിൽ ഉടൻ തന്നെ മാറ്റം വരുത്തുന്നു.
- npm run preview
ഡെപ്ലോയ് ചെയ്യുന്നതിന് മുമ്പ് നിങ്ങളുടെ വർക്ക് ഒന്നുകൂടി പരിശോധിക്കാൻ ഇത് ഉപയോഗിക്കുക. ഈ കമാൻഡ് നിങ്ങളുടെ സോഴ്സ് കോഡ് അവഗണിക്കുന്നു. ഇത് നിങ്ങളുടെ dist ഫോൾഡർ മാത്രമേ പരിശോധിക്കൂ.
- Vercel അല്ലെങ്കിൽ AWS-ൽ നിങ്ങളുടെ ആപ്പ് എങ്ങനെ പ്രവർത്തിക്കും എന്ന് ഇത് അനുകരിക്കുന്നു (simulates).
- ഇത് നിങ്ങളുടെ പ്രൊഡക്ഷൻ ബിൽഡ് ഒരു ലോക്കൽ സെർവറിൽ പ്രവർത്തിപ്പിക്കുന്നു.
ടെർമിനൽ ഒരു ബ്ലാക്ക് ബോക്സ് അല്ല. നിങ്ങളുടെ ടൂളുകളെക്കുറിച്ച് നിങ്ങൾക്ക് അറിവുണ്ടെങ്കിൽ, നിങ്ങൾക്ക് വേഗത്തിൽ ഡീബഗ് (debug) ചെയ്യാൻ കഴിയും.
ഇതിന്റെ പ്രവർത്തനം മനസ്സിലാക്കിയപ്പോൾ നിങ്ങളുടെ വർക്ക്ഫ്ലോയിൽ മാറ്റം വരുത്തിയ കമാൻഡ് ഏതാണ്? താഴെ പറയൂ.
ടെർമിനലിന് പിന്നിലെ മാന്ത്രികത: നിങ്ങൾ npm കമാൻഡുകൾ പ്രവർത്തിപ്പിക്കുമ്പോൾ യഥാർത്ഥത്തിൽ എന്താണ് സംഭവിക്കുന്നത്?
നിങ്ങൾ ടെർമിനലിൽ npm install എന്ന് ടൈപ്പ് ചെയ്യുമ്പോൾ പിന്നണിയിൽ എന്താണ് സംഭവിക്കുന്നതെന്ന് എപ്പോഴെങ്കിലും ചിന്തിച്ചിട്ടുണ്ടോ? ഇത് ഒരു മാന്ത്രികത പോലെ തോന്നാം, എന്നാൽ ഇതിന് പിന്നിൽ വളരെ കൃത്യമായി ക്രമീകരിച്ച ഒരു പ്രക്രിയയുണ്ട്.
1. package.json ഫയൽ വായിക്കുന്നു
npm ആദ്യം ചെയ്യുന്ന കാര്യം നിങ്ങളുടെ നിലവിലെ ഡയറക്ടറിയിൽ package.json ഫയൽ ഉണ്ടോ എന്ന് പരിശോധിക്കുക എന്നതാണ്. നിങ്ങളുടെ പ്രോജക്റ്റിന്റെ ഹൃദയമാണ് ഈ ഫയൽ; ഇതിൽ പ്രോജക്റ്റിനെക്കുറിച്ചുള്ള വിവരങ്ങളും (metadata) ആവശ്യമായ ഡിപെൻഡൻസികളുടെ (dependencies) പട്ടികയും അടങ്ങിയിരിക്കുന്നു.
2. ഡിപെൻഡൻസി റെസല്യൂഷൻ (Dependency Resolution)
നിങ്ങൾക്ക് എന്താണ് വേണ്ടതെന്ന് മനസ്സിലാക്കിയ ശേഷം, npm ഡിപെൻഡൻസി റെസല്യൂഷൻ പ്രക്രിയ ആരംഭിക്കുന്നു. package.json-ൽ പറഞ്ഞിരിക്കുന്ന വേർഷനുകൾ നോക്കി ഏറ്റവും അനുയോജ്യമായത് കണ്ടെത്താൻ npm ശ്രമിക്കുന്നു. ഡിപെൻഡൻസികൾക്ക് അവരുടേതായ മറ്റ് ഡിപെൻഡൻസികൾ (transitive dependencies) ഉള്ളതുകൊണ്ട് ഈ പ്രക്രിയ സങ്കീർണ്ണമായേക്കാം.
3. package-lock.json ഫയൽ
വിവിധ സാഹചര്യങ്ങളിൽ (environments) ഒരേപോലെയുള്ള ഡിപെൻഡൻസികൾ ഉറപ്പാക്കാൻ npm package-lock.json ഫയൽ ഉപയോഗിക്കുന്നു. ഇൻസ്റ്റാൾ ചെയ്ത ഓരോ പാക്കേജിന്റെയും കൃത്യമായ വേർഷൻ ഈ ഫയൽ രേഖപ്പെടുത്തുന്നു, ഇത് ഡിപെൻഡൻസി ട്രീയെ (dependency tree) ലോക്ക് ചെയ്യുന്നു.
4. npm രജിസ്ട്രിയിൽ നിന്നുള്ള ഡൗൺലോഡ്
വേർഷനുകൾ കണ്ടെത്തിക്കഴിഞ്ഞാൽ, ആവശ്യമായ ഫയലുകൾ ഡൗൺലോഡ് ചെയ്യുന്നതിനായി npm രജിസ്ട്രിയിലേക്ക് (പാക്കേജുകളുടെ ഒരു വലിയ ഓൺലൈൻ ഡാറ്റാബേസ്) ബന്ധപ്പെടുന്നു.
5. node_modules ഫോൾഡർ തയ്യാറാക്കുന്നു
ഡൗൺലോഡ് ചെയ്ത പാക്കേജുകൾ പിന്നീട് എക്സ്ട്രാക്റ്റ് ചെയ്ത് node_modules ഫോൾഡറിലേക്ക് മാറ്റുന്നു. നിങ്ങളുടെ ഡിപെൻഡൻസികളുടെ യഥാർത്ഥ കോഡ് ഇരിക്കുന്ന ഇടമാണിത്.
ഉപസംഹാരം
അടുത്ത തവണ നിങ്ങൾ npm install പ്രവർത്തിപ്പിക്കുമ്പോൾ, അത് വെറുമൊരു ഡൗൺലോഡ് മാത്രമല്ലെന്ന് ഓർക്കുക; അത് വായിക്കുക, പരിഹരിക്കുക (resolve), ഡൗൺലോഡ് ചെയ്യുക, ക്രമീകരിക്കുക എന്നിവയുടെ സങ്കീർണ്ണമായ ഒരു പ്രക്രിയയാണ്.