Vite என்றால் என்ன? ஆப் உருவாக்குபவர்களுக்கான எளிய வழிகாட்டி

Vite ("veet" என்று உச்சரிக்கப்படும், பிரெஞ்சு மொழியில் "விரைவு") என்பது வலைத்தளங்களுக்கும் வலை ஆப்களுக்குமான ஒரு build கருவி. நீங்கள் உருவாக்கும்போது, உங்கள் மாற்றங்களை உலாவியில் கிட்டத்தட்ட உடனடியாகக் காட்டும் development server இயங்குகிறது. வெளியிடத் தயாரானதும், உங்கள் கோடு எந்த வலை ஹோஸ்டும் வழங்கக்கூடிய சிறிய, உகந்த கோப்புகளாகத் தொகுக்கப்படுகிறது. இது இலவசம், திறந்த மூலம், பல React, Vue மற்றும் Svelte திட்டங்களின் பின்னால் இயல்பாக உள்ள கருவி.

AI உடன் உருவாக்கும்போது Vite ஏன் முக்கியம்

நீங்கள் ஒருபோதும் Vite கட்டளையைத் தட்டச்சு செய்யாமல் இருக்கலாம், ஆனால் உங்கள் ஆப் AI ஆப் பில்டரால் உருவாக்கப்பட்டிருந்தால், அதை இயக்குவது பெரும்பாலும் Vite-ஆகவே இருக்கும். வேறு எதையும் கேட்காவிட்டால் Mythex புதிய திட்டங்களை Vite + React + TypeScript + Tailwind மீது தொடங்குகிறது (தொழில்நுட்பம் எப்படித் தேர்வாகிறது).

Vite என்ன செய்கிறது என்பதை அறிவது உங்களுக்கு உதவும்:

• Preview-ஐப் புரிந்துகொள்ள. AI கோப்புகளைத் திருத்தும்போது புதுப்பிக்கப்படும் நேரடி preview பொதுவாக ஒரு Vite development server.
• வெளியீட்டைப் புரிந்துகொள்ள. Vite ஆப் ஒரு நிலையான கோப்புகளின் கோப்புறையாக மாறுகிறது — HTML, JavaScript, CSS மற்றும் படங்கள் — இது மலிவானதும் ஹோஸ்ட் செய்ய எளிதானதும்.
• பிழைச் செய்திகளைப் படிக்க. Preview-இல் சிவப்புப் பிழைத் திரை அல்லது வெற்றுப் பக்கம் தெரிந்தால், பெரும்பாலும் ஒரு கோப்பு compile ஆகவில்லை என்று Vite தெரிவிக்கிறது.
• அதன் வரம்புகளை அறிய. Vite frontend-ஐ build செய்கிறது. உங்கள் ஆப்புக்கு backend தேவைப்பட்டால் — தரவுத்தளம், ரகசிய API விசைகள், கட்டணங்கள் — அது வேறு இடத்தில் இயங்கும். பார்க்க: frontend vs backend.

அன்றாட உதாரணம்

ஒரு உணவக சமையலறையை நினையுங்கள்.

• சேவைக்கு முந்தைய தயாரிப்பின்போது (development), சமையல்காரர் ஒவ்வொரு உணவையும் சுவைத்துச் சரிசெய்கிறார். மசாலாவை மாற்றி, ஒரு வினாடி கழித்து மீண்டும் சுவைக்கிறார். அதுதான் Vite-இன் dev server: ஒரு கோப்பை மாற்றுகிறீர்கள், பக்கம் உடனே புதுப்பிக்கப்படுகிறது, படிவத்தில் நீங்கள் தட்டச்சு செய்ததையும் பெரும்பாலும் இழக்காமல்.
• கேட்டரிங் ஆர்டருக்கு (production), எல்லாம் சமைக்கப்பட்டு, பகுதி பிரிக்கப்பட்டு, பொட்டலமிட்டு, நன்றாகப் பயணம் செய்து எங்கும் பரிமாறக்கூடிய வகையில் லேபிள் இடப்படுகிறது. அதுதான் vite build: உங்கள் கோடு தொகுக்கப்பட்டு, சுருக்கப்பட்டு, எந்த ஹோஸ்டுக்கும் தயாரான கோப்புகளாக மாற்றப்படுகிறது.

அதே சமையல் குறிப்புகள், இரண்டு வெவ்வேறு வழிகளில் கையாளப்படுகின்றன — Vite இரண்டையும் செய்கிறது.

Vite உண்மையில் என்ன செய்கிறது

நவீன வலை ஆப் பல கோப்புகளால் ஆனது: கூறுகள், styles, படங்கள், மூன்றாம் தரப்பு நூலகங்கள். உலாவிகள் அவை எழுதப்பட்டபடியே எல்லாவற்றையும் பயன்படுத்த முடியாது. TypeScript JavaScript ஆக மாற வேண்டும், React JSX மாற்றப்பட வேண்டும், Tailwind வகுப்புகள் CSS ஆக மாற்றப்பட வேண்டும்.

Vite இதை இரண்டு முறைகளில் கையாள்கிறது:

பழைய கருவிகள் எதையும் காட்டுவதற்கு முன் முழு ஆப்பையும் தொகுத்தன, அதனால் பெரிய திட்டத்தைத் தொடங்குவதும் புதுப்பிப்பதும் நீண்ட நேரம் எடுக்கலாம். Vite-இன் தந்திரம் development-இல் அதைத் தவிர்த்து, உலாவி தேவையான கோப்புகளை ஏற்றிக்கொள்ள அனுமதிப்பது. Production-க்கு இன்னும் தொகுக்கிறது — Vite 8 முதல், Rolldown என்ற bundler உடன் — ஏனெனில் பல சிறிய கோப்புகள் சில உகந்த கோப்புகளை விடப் பார்வையாளர்களுக்கு மெதுவானவை.

ஓர் எடுத்துக்காட்டு: Vite திட்டத்திற்குள் என்ன இருக்கிறது

ஒரு சிறிய Vite + React ஆப் தோராயமாக இப்படி இருக்கும்:

my-app/
  index.html          ← ஆப் தொடங்கும் ஒரே HTML பக்கம்
  package.json        ← நூலகங்கள் மற்றும் scripts பட்டியல் (dev, build)
  vite.config.ts      ← Vite அமைப்புகள் மற்றும் plugins
  src/
    main.tsx          ← React-ஐத் தொடங்கி index.html-இல் இணைக்கும்
    App.tsx           ← உங்கள் ஆப்பின் மேல்நிலை கூறு
    index.css         ← styles, எடுத்துக்காட்டாக @import "tailwindcss";
  public/             ← அப்படியே நகலெடுக்கப்படும் கோப்புகள் (favicon, robots.txt)

package.json-இல் உள்ள scripts:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

இப்போது ஒரு மாற்றத்தைப் பின்தொடருங்கள்:

1. "தலைப்பை நீலமாக்கு" என்று AI-இடம் கேட்கிறீர்கள்.
2. அது App.tsx-இல் ஒரு வகுப்பைத் திருத்துகிறது.
3. கோப்பு மாறியதை Vite கவனித்து, அந்தக் கோப்பை மட்டும் மாற்றி உலாவிக்கு புதுப்பிப்பை அனுப்புகிறது.
4. பொதுவாக ஒரு வினாடிக்குள் preview-இல் தலைப்பு நீலமாகிறது.

வெளியிடும்போது, vite build dist/index.html மற்றும் dist/assets/index-a1b2c3.js போன்றவற்றை உருவாக்குகிறது. கோப்புப் பெயரில் உள்ள சீரற்றது போலத் தோன்றும் பகுதி உள்ளடக்கம் மாறும்போதெல்லாம் மாறுகிறது, அதனால் பழைய கோடை வழங்காமல் உலாவிகளும் CDN-களும் கோப்புகளை நீண்ட நேரம் cache செய்யலாம்.

Vite-இல் சூழல் மாறிகள்

VITE_ என்று தொடங்கும் பெயர்களைக் கொண்ட மாறிகளை மட்டுமே Vite உலாவிக் கோடுக்குக் காட்டுகிறது, எடுத்துக்காட்டாக VITE_PUBLIC_MAP_ID. இது ஒரு பாதுகாப்பு நடவடிக்கை: உலாவிக் கோடில் உள்ள எதையும் பார்வையாளர்கள் பார்க்க முடியும், எனவே ரகசிய விசைகளுக்கு அந்த முன்னொட்டு ஒருபோதும் இருக்கக்கூடாது மேலும் அவை backend-இல்தான் இருக்க வேண்டும். பார்க்க: சூழல் மாறிகள் மற்றும் ரகசியங்கள்.

முக்கியச் சொற்கள்

பொதுவான தவறான கருத்துகள்

• "Vite ஒரு framework." இது ஒரு build கருவி. React, Vue அல்லது Svelte தான் framework; Vite அதை இயக்கித் தொகுக்கிறது.
• "Vite ஆப்பில் backend உள்ளது." நிலையான Vite ஆப் frontend மட்டுமே. தரவுத்தளங்கள், உள்நுழைவுகள், ரகசிய விசைகளுக்கு அதனுடன் ஒரு சேவையகம் அல்லது API தேவை.
• "Dev server-ஐ இணையத்தில் வைப்பது சரி." அது உண்மையான போக்குவரத்துக்காக அல்ல. எப்போதும் production build-இன் வெளியீட்டையே வெளியிடுங்கள்.
• ".env-இல் உள்ளது எல்லாம் ரகசியம்." Vite ஆப்பில் VITE_ மாறிகள் ஒவ்வொரு பார்வையாளரும் பதிவிறக்கும் கோப்புகளுக்குள் பதிக்கப்படுகின்றன.
• "404 தரும் பக்கத்தை refresh செய்தால் ஆப் உடைந்துவிட்டது என்று பொருள்." ஒற்றைப் பக்க ஆப்பில், ஹோஸ்ட் ஒவ்வொரு வழியையும் index.html-க்குத் திருப்பி அனுப்ப வேண்டும். அது ஹோஸ்டிங் அமைப்பு — பார்க்க: வெளியிட்ட பிறகு 404 பிழைகளைச் சரிசெய்வது எப்படி.

உங்கள் AI பில்டரிடம் என்ன கேட்பது

• "இந்த ஆப் Vite மட்டும் (frontend) தானா, அல்லது backend-உம் உள்ளதா? ஒவ்வொரு பகுதியும் எங்கே இயங்குகிறது?"
• "Production build-ஐ இயக்கி, நான் வெளியிடுவதற்கு முன் ஒவ்வொரு பிழையையும் எச்சரிக்கையையும் சரிசெய்யவும்."
• "VITE_ மாறிகளிலோ frontend கோடிலோ எங்கும் ரகசிய விசைகள் இல்லை என்று உறுதி செய்யவும்."
• "Preview வெற்றுப் பக்கம் காட்டுகிறது — Vite மற்றும் உலாவிப் பிழைகளைச் சரிபார்த்து காரணத்தைச் சரிசெய்யவும்." பார்க்க: வெற்று வெள்ளைப் பக்கத்தைச் சரிசெய்வது எப்படி.
• "வெளியிட்ட பிறகு முகப்புப் பக்கம் மட்டுமல்ல, எந்தப் பக்க URL-ஐ refresh செய்தாலும் வேலை செய்ய வேண்டும் என்று உறுதி செய்யவும்."

Mythex-இல் Vite

நீங்கள் Next.js, நிலையான HTML அல்லது வேறு backend கேட்காவிட்டால், ஒவ்வொரு புதிய Mythex திட்டமும் Vite-இல் தொடங்குகிறது. உங்கள் தனிப்பட்ட sandbox-இல் உள்ள நேரடி Preview, ஏஜெண்ட் கோப்புகளைத் திருத்தும்போது புதுப்பிக்கப்படுகிறது, Publish ஆப்பைத் build செய்து வெளியிடுகிறது — நீங்களே ஹோஸ்டிங் அமைக்க வேண்டியதில்லை. பின்னர் API அல்லது தரவுத்தளம் தேவைப்பட்டால், அரட்டையில் கேளுங்கள்; Vite frontend-உடன் ஒரு backend சேவையை Mythex சேர்க்கலாம் (பல-சேவை ஆப்கள்).

கேள்விகள்