𝗪𝗵𝗮𝘁 𝗛𝗮𝗽𝗽𝗲𝗻𝘀 𝗪𝗵𝗲𝗻 𝗬𝗼𝘂 𝗥𝘂𝗻 𝗡𝗽𝗺 𝗖𝗼𝗺𝗺𝗮𝗻𝗱𝘀?
நீங்கள் ஒரு npm கட்டளைக்கு Enter அழுத்தி காத்திருக்கிறீர்கள். திடீரென்று, உங்கள் திட்டம் (project) வேலை செய்கிறது. இது ஒரு மந்திரம் போலத் தோன்றுகிறது.
இது மந்திரம் அல்ல. இது தொடர்ச்சியான நெட்வொர்க் கோரிக்கைகள் (network requests), குறியீடு பகுப்பாய்வு (code parsing) மற்றும் கோப்பு மேம்படுத்தல்கள் (file optimizations) ஆகியவற்றின் தொகுப்பாகும்.
கட்டளைகளைக் கண்மூடித்தனமாக இயக்குவதை நிறுத்துங்கள். இந்த 6 முக்கிய கட்டளைகளுக்குப் பின்னால் உள்ள இயந்திரத்தைப் புரிந்து கொள்ளுங்கள்.
npm install இந்தக் கட்டளை உங்கள் package.json கோப்பைப் படிக்கிறது. உங்கள் சார்புகளை (dependencies) கண்டறிய இது ஒரு கிளவுட் ரெஜிஸ்ட்ரியைத் (cloud registry) தொடர்பு கொள்கிறது. • இது தொகுப்புகளை (packages) node_modules கோப்புறைக்குள் பதிவிறக்கம் செய்கிறது. • இது பதிப்பு முரண்பாடுகளைத் (version conflicts) தீர்க்கிறது. • துல்லியமான பதிப்புகளைப் பதிவு செய்ய இது ஒரு package-lock.json கோப்பை உருவாக்குகிறது.
npm run format:check இது ஒரு சரிபார்ப்புப் படிநிலையாகும். இது உங்கள் கோப்புகளை ஸ்கேன் செய்ய Prettier போன்ற கருவிகளைப் பயன்படுத்துகிறது. • இது உங்கள் குறியீட்டின் ஒரு மெய்நிகர் அமைப்பை (virtual layout) உருவாக்குகிறது. • இது உங்கள் குறியீட்டை உங்கள் பாணி விதிகளுடன் (style rules) ஒப்பிடுகிறது. • இது உங்கள் கோப்புகளை மாற்றாமல் பிழைகளைக் கண்டறிந்து சுட்டிக்காட்டுகிறது.
npm run format சரிபார்ப்பின் போது கண்டறியப்பட்ட சிக்கல்களை இந்தக் கட்டளை சரிசெய்கிறது. • இது உங்கள் திட்டத்தில் Prettier-ஐ இயக்குகிறது. • இது உங்கள் பாணி விதிகளுக்கு ஏற்ப உங்கள் கோப்புகளை மீண்டும் எழுதுகிறது. • இது இடைவெளிகள் மற்றும் வடிவமைப்பைத் தானாகவே சீரமைக்கிறது.
npm run lint இதை உங்கள் குறியீட்டிற்கான எழுத்துப்பிழை சரிபார்ப்பி (spellchecker) என்று நினைத்துக் கொள்ளுங்கள். ESLint பின்வரும் பிழைகளை ஸ்கேன் செய்கிறது: • தொடரியல் பிழைகள் (Syntax mistakes). • பயன்படுத்தப்படாத மாறிகள் (Unused variables). • விடுபட்ட இறக்குமதிகள் (Missing imports). • தவறான React Hook பயன்பாடு.
npm run build இந்தக் கட்டளை உங்கள் செயலியை (app) நிஜ உலகிற்குத் தயார் செய்கிறது. இது ஒரு dist கோப்புறையை உருவாக்குகிறது. • இது பயன்படுத்தப்படாத குறியீட்டை நீக்க tree shaking செய்கிறது. • இது இடைவெளிகளை நீக்குவதன் மூலமும், மாறிப் பெயர்களைச் சுருக்குவதன் மூலமும் குறியீட்டைச் சுருக்குகிறது (minifies). • இது JavaScript, CSS மற்றும் பிற சொத்துக்களை (assets) மேம்படுத்தப்பட்ட கோப்புகளாகத் தொகுக்கிறது (bundles). • இந்தத் கோப்புகள் ஒரு சேவையகத்திற்கு (server) பதிவேற்றத் தயாராக உள்ளன.
npm run dev இது நீங்கள் வேலை செய்வதற்கு ஒரு உள்ளூர் சேவையகத்தைத் (local server) தொடங்குகிறது. • உங்கள் உலாவியானது (browser) கோப்புகளைக் கேட்கும்போது மட்டும் அவற்றை கம்பைல் செய்ய இது Native ES Modules-ஐப் பயன்படுத்துகிறது. • பக்கத்தைப் புதுப்பிக்காமலேயே (page refresh) உங்கள் தளத்தை உடனடியாகப் புதுப்பிக்க இது Hot Module Replacement (HMR)-ஐப் பயன்படுத்துகிறது.
npm run preview இது உங்கள் இறுதிச் சரிபார்ப்பு. இது உங்கள் மூலக் குறியீட்டை (source code) புறக்கணித்து, dist கோப்புறையை மட்டுமே பார்க்கிறது. • ஒரு நிஜ சேவையகத்தில் உங்கள் செயலி எவ்வாறு செயல்படும் என்பதை இது உருவகப்படுத்துகிறது (simulates). • நீங்கள் தயாரிப்புச் சூழலுக்கு (production) பதிவேற்றுவதற்கு முன்பே பிழைகளைக் கண்டறிய இது உதவுகிறது.
டெர்மினல் (terminal) என்பது ஒரு மர்மப் பெட்டி (black box) அல்ல. விஷயங்கள் தவறாக நடக்கும்போது, இந்தத் கருவிகளைப் புரிந்துகொள்வது நீங்கள் விரைவாகப் பிழைகளைத் திருத்த (debug) உதவும்.
இதன் செயல்பாடு தெரிந்தவுடன், உங்கள் குறியீட்டு முறையை மாற்றிய கட்டளை எது? கீழே சொல்லுங்கள்.