എന്താണ് Vite? ആപ്പ് ബിൽഡർമാർക്കുള്ള ലളിതമായ വഴികാട്ടി

Vite ("veet" എന്ന് ഉച്ചരിക്കുന്നു, ഫ്രഞ്ചിൽ "വേഗത്തിലുള്ളത്" എന്നർത്ഥം) വെബ്സൈറ്റുകൾക്കും വെബ് ആപ്പുകൾക്കുമുള്ള ഒരു ബിൽഡ് ടൂളാണ്. നിങ്ങൾ നിർമ്മിക്കുമ്പോൾ, മാറ്റങ്ങൾ ബ്രൗസറിൽ തൽക്ഷണം കാണിക്കുന്ന ഒരു ഡെവലപ്‌മെന്റ് സെർവർ ഇത് പ്രവർത്തിപ്പിക്കുന്നു. ലോഞ്ചിന് തയ്യാറാകുമ്പോൾ, നിങ്ങളുടെ കോഡ് ഏത് വെബ് ഹോസ്റ്റിനും നൽകാവുന്ന ചെറുതും ഒപ്റ്റിമൈസ് ചെയ്തതുമായ ഫയലുകളായി പാക്ക് ചെയ്യുന്നു. ഇത് സൗജന്യവും ഓപ്പൺ സോഴ്സുമാണ്, കൂടാതെ പല React, Vue, Svelte പ്രോജക്റ്റുകൾക്ക് പിന്നിലെ സ്ഥിരസ്ഥിതി ടൂളുമാണ്.

AI ഉപയോഗിച്ച് നിർമ്മിക്കുമ്പോൾ Vite പ്രധാനമാകുന്നത് എന്തുകൊണ്ട്

നിങ്ങൾ ഒരിക്കലും ഒരു Vite കമാൻഡ് ടൈപ്പ് ചെയ്യണമെന്നില്ല, പക്ഷേ നിങ്ങളുടെ ആപ്പ് ഒരു AI ആപ്പ് ബിൽഡർ ഉപയോഗിച്ചാണ് നിർമ്മിച്ചതെങ്കിൽ, അത് പ്രവർത്തിപ്പിക്കുന്നത് Vite ആയിരിക്കാൻ സാധ്യതയുണ്ട്. Mythex നിങ്ങൾ മറ്റെന്തെങ്കിലും ആവശ്യപ്പെട്ടില്ലെങ്കിൽ പുതിയ പ്രോജക്റ്റുകൾ Vite + React + TypeScript + Tailwind എന്ന സ്റ്റാക്കിലാണ് തുടങ്ങുന്നത് (സാങ്കേതികവിദ്യ എങ്ങനെ തിരഞ്ഞെടുക്കുന്നു).

Vite എന്ത് ചെയ്യുന്നു എന്ന് അറിയുന്നത് നിങ്ങളെ ഇവയിൽ സഹായിക്കും:

• Preview മനസ്സിലാക്കാൻ. AI ഫയലുകൾ എഡിറ്റ് ചെയ്യുമ്പോൾ അപ്‌ഡേറ്റ് ആകുന്ന തത്സമയ പ്രിവ്യൂ സാധാരണയായി ഒരു Vite ഡെവലപ്‌മെന്റ് സെർവറാണ്.
• ഡിപ്ലോയ്മെന്റ് മനസ്സിലാക്കാൻ. Vite ആപ്പ് HTML, JavaScript, CSS, ചിത്രങ്ങൾ എന്നിവയുടെ ഒരു സ്റ്റാറ്റിക് ഫയൽ ഫോൾഡറായി മാറുന്നു — ഇത് വിലകുറഞ്ഞതും ഹോസ്റ്റ് ചെയ്യാൻ ലളിതവുമാണ്.
• പിശക് സന്ദേശങ്ങൾ വായിക്കാൻ. പ്രിവ്യൂവിൽ ചുവന്ന പിശക് ഓവർലേ അല്ലെങ്കിൽ ശൂന്യ പേജ് കാണുമ്പോൾ, പലപ്പോഴും ഒരു ഫയൽ കംപൈൽ ചെയ്യാനാകാത്തതായി Vite റിപ്പോർട്ട് ചെയ്യുന്നതാണ്.
• അതിന്റെ പരിധികൾ അറിയാൻ. Vite ഫ്രണ്ടെൻഡാണ് നിർമ്മിക്കുന്നത്. നിങ്ങളുടെ ആപ്പിന് ബാക്കെൻഡ് വേണമെങ്കിൽ — ഡാറ്റാബേസ്, രഹസ്യ API കീകൾ, പേയ്മെന്റുകൾ — അത് മറ്റെവിടെയോ പ്രവർത്തിക്കുന്നു. ഫ്രണ്ടെൻഡും ബാക്കെൻഡും കാണുക.

ദൈനംദിന ഉദാഹരണം

ഒരു റെസ്റ്റോറന്റ് അടുക്കള ഓർക്കുക.

• സേവനത്തിന് മുമ്പുള്ള തയ്യാറെടുപ്പ് (ഡെവലപ്‌മെന്റ്) സമയത്ത്, ഷെഫ് ഓരോ വിഭവവും രുചിച്ച് ക്രമീകരിക്കുന്നു. താളിക്കൽ മാറ്റി, ഒരു സെക്കൻഡിനകം വീണ്ടും രുചിക്കുന്നു. അതാണ് Vite-ന്റെ ഡെവ് സെർവർ: ഒരു ഫയൽ മാറ്റുന്നു, പേജ് ഉടൻ അപ്‌ഡേറ്റ് ചെയ്യുന്നു, പലപ്പോഴും ഒരു ഫോമിൽ നിങ്ങൾ ടൈപ്പ് ചെയ്തത് നഷ്ടപ്പെടാതെ തന്നെ.
• കാറ്ററിംഗ് ഓർഡറിന് (പ്രൊഡക്ഷൻ), എല്ലാം പാകം ചെയ്ത്, ഭാഗങ്ങളാക്കി, പായ്ക്ക് ചെയ്ത്, ലേബൽ ചെയ്ത് യാത്രയ്ക്ക് പാകമാക്കി എവിടെയും വിളമ്പാവുന്ന രീതിയിൽ ഒരുക്കുന്നു. അതാണ് vite build: നിങ്ങളുടെ കോഡ് ബണ്ടിൽ ചെയ്ത്, ചുരുക്കി, ഏത് ഹോസ്റ്റിനും തയ്യാറായ ഫയലുകളായി വിരലടയാളം ചേർക്കുന്നു.

ഒരേ പാചകക്കുറിപ്പുകൾ, രണ്ട് വ്യത്യസ്ത രീതികൾ — Vite രണ്ടും ചെയ്യുന്നു.

Vite യഥാർത്ഥത്തിൽ ചെയ്യുന്നത്

ആധുനിക വെബ് ആപ്പ് പല ഫയലുകൾ ചേർന്നതാണ്: കമ്പോണന്റുകൾ, സ്റ്റൈലുകൾ, ചിത്രങ്ങൾ, മൂന്നാം കക്ഷി ലൈബ്രറികൾ. ബ്രൗസറുകൾക്ക് അതെല്ലാം എഴുതിയിരിക്കുന്ന പോലെ ഉപയോഗിക്കാനാകില്ല. TypeScript JavaScript ആകണം, React-ന്റെ JSX മാറ്റണം, Tailwind ക്ലാസുകൾ CSS ആക്കണം.

Vite ഇത് രണ്ട് മോഡുകളിലായി കൈകാര്യം ചെയ്യുന്നു:

പഴയ ടൂളുകൾ എന്തെങ്കിലും കാണിക്കുന്നതിന് മുമ്പ് മുഴുവൻ ആപ്പും ബണ്ടിൽ ചെയ്തിരുന്നു, അതിനാൽ വലിയ പ്രോജക്റ്റ് തുടങ്ങാനും അപ്‌ഡേറ്റ് ചെയ്യാനും സമയമെടുത്തിരുന്നു. ഡെവലപ്‌മെന്റിൽ ഇത് ഒഴിവാക്കി ബ്രൗസറിനെ ആവശ്യാനുസരണം ഫയലുകൾ ലോഡ് ചെയ്യാൻ അനുവദിക്കുകയാണ് Vite-ന്റെ തന്ത്രം. പ്രൊഡക്ഷനായി ഇത് ഇപ്പോഴും ബണ്ടിൽ ചെയ്യുന്നു — Vite 8 മുതൽ Rolldown എന്ന ബണ്ട്‌ലർ ഉപയോഗിച്ച് — കാരണം ഒരുപാട് ചെറിയ ഫയലുകൾ സന്ദർശകർക്ക് കുറച്ച് ഒപ്റ്റിമൈസ് ചെയ്ത ഫയലുകളേക്കാൾ വേഗത കുറഞ്ഞതാണ്.

ഒരു ഉദാഹരണം: ഒരു Vite പ്രോജക്റ്റിനുള്ളിൽ എന്താണ്

ഒരു ചെറിയ Vite + React ആപ്പ് ഏകദേശം ഇങ്ങനെയിരിക്കും:

my-app/
  index.html          ← ആപ്പ് ആരംഭിക്കുന്ന ഒരൊറ്റ HTML പേജ്
  package.json        ← ലൈബ്രറികളുടെയും സ്ക്രിപ്റ്റുകളുടെയും (dev, build) പട്ടിക
  vite.config.ts      ← Vite ക്രമീകരണങ്ങളും പ്ലഗിനുകളും
  src/
    main.tsx          ← React ആരംഭിച്ച് index.html-ൽ ഘടിപ്പിക്കുന്നു
    App.tsx           ← നിങ്ങളുടെ ആപ്പിന്റെ ഏറ്റവും മുകളിലെ കമ്പോണന്റ്
    index.css         ← സ്റ്റൈലുകൾ, ഉദാ. @import "tailwindcss";
  public/             ← മാറ്റമില്ലാതെ പകർത്തുന്ന ഫയലുകൾ (favicon, robots.txt)

കൂടാതെ package.json-ലെ സ്ക്രിപ്റ്റുകൾ:

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

ഇനി ഒരൊറ്റ മാറ്റം പിന്തുടരുക:

1. "തലക്കെട്ട് നീലയാക്കൂ" എന്ന് നിങ്ങൾ AI-യോട് ആവശ്യപ്പെടുന്നു.
2. അത് App.tsx-ലെ ഒരു ക്ലാസ് എഡിറ്റ് ചെയ്യുന്നു.
3. ഫയൽ മാറിയെന്ന് Vite ശ്രദ്ധിക്കുന്നു, ആ ഫയൽ മാത്രം മാറ്റി അപ്‌ഡേറ്റ് ബ്രൗസറിലേക്ക് തള്ളുന്നു.
4. പ്രിവ്യൂവിൽ തലക്കെട്ട് നീലയാകുന്നു, സാധാരണയായി ഒരു സെക്കൻഡിനുള്ളിൽ.

പ്രസിദ്ധീകരിക്കുമ്പോൾ, vite build dist/index.html, dist/assets/index-a1b2c3.js പോലുള്ള ഫയലുകൾ സൃഷ്ടിക്കുന്നു. ക്രമരഹിതമെന്ന് തോന്നുന്ന ആ ഫയൽ പേരിന്റെ ഭാഗം ഉള്ളടക്കം മാറുമ്പോഴെല്ലാം മാറുന്നു; അതിനാൽ പഴയ കോഡ് നൽകാതെ തന്നെ ബ്രൗസറുകൾക്കും CDN-കൾക്കും ഫയലുകൾ വളരെക്കാലം കാഷെ ചെയ്യാനാകും.

Vite-ലെ എൻവയോൺമെന്റ് വേരിയബിളുകൾ

പേര് VITE_ എന്ന് തുടങ്ങുന്ന വേരിയബിളുകൾ മാത്രമേ ബ്രൗസർ കോഡിന് Vite വെളിപ്പെടുത്തൂ, ഉദാഹരണത്തിന് VITE_PUBLIC_MAP_ID. ഇതൊരു സുരക്ഷാ നടപടിയാണ്: ബ്രൗസർ കോഡിലുള്ളത് ഏത് സന്ദർശകനും കാണാനാകും, അതിനാൽ രഹസ്യ കീകൾക്ക് ആ പ്രിഫിക്സ് ഉണ്ടാകരുത് കൂടാതെ ബാക്കെൻഡിൽ തന്നെ നിൽക്കണം. എൻവയോൺമെന്റ് വേരിയബിളുകളും രഹസ്യങ്ങളും കാണുക.

പ്രധാന പദങ്ങൾ

സാധാരണ തെറ്റിദ്ധാരണകൾ

• "Vite ഒരു ഫ്രെയിംവർക്ക് ആണ്." അത് ഒരു ബിൽഡ് ടൂളാണ്. React, Vue അല്ലെങ്കിൽ Svelte ആണ് ഫ്രെയിംവർക്ക്; Vite അതിനെ പ്രവർത്തിപ്പിച്ച് പാക്ക് ചെയ്യുന്നു.
• "ഒരു Vite ആപ്പിൽ ബാക്കെൻഡ് ഉൾപ്പെടുന്നു." സാധാരണ Vite ആപ്പ് ഫ്രണ്ടെൻഡ് മാത്രമാണ്. ഡാറ്റാബേസുകൾ, ലോഗിനുകൾ, രഹസ്യ കീകൾ എന്നിവയ്ക്ക് അതിനൊപ്പം ഒരു സെർവറോ API-യോ വേണം.
• "ഡെവ് സെർവർ ഓൺലൈനിൽ ഇടുന്നത് ശരിയാണ്." അത് യഥാർത്ഥ ട്രാഫിക്കിനുള്ളതല്ല. എപ്പോഴും പ്രൊഡക്ഷൻ ബിൽഡിന്റെ ഔട്ട്പുട്ടാണ് ഡിപ്ലോയ് ചെയ്യേണ്ടത്.
• ".env-ലുള്ളതെല്ലാം രഹസ്യമാണ്." Vite ആപ്പിൽ VITE_ വേരിയബിളുകൾ ഓരോ സന്ദർശകനും ഡൗൺലോഡ് ചെയ്യുന്ന ഫയലുകളിൽ ഉൾച്ചേർക്കപ്പെടുന്നു.
• "404 നൽകുന്ന പേജ് റീഫ്രഷ് ചെയ്താൽ ആപ്പ് തകരാറിലാണ്." സിംഗിൾ-പേജ് ആപ്പിൽ, ഹോസ്റ്റ് എല്ലാ റൂട്ടുകളും index.html-ലേക്ക് തിരികെ അയക്കണം. ഇത് ഹോസ്റ്റിംഗ് ക്രമീകരണമാണ് — ഡിപ്ലോയ് ചെയ്ത ശേഷമുള്ള 404 പിശകുകൾ എങ്ങനെ പരിഹരിക്കാം കാണുക.

AI ബിൽഡറോട് എന്ത് ചോദിക്കണം

• "ഈ ആപ്പ് Vite മാത്രമുള്ള ഫ്രണ്ടെൻഡാണോ, അതോ ബാക്കെൻഡും ഉണ്ടോ? ഓരോ ഭാഗവും എവിടെയാണ് പ്രവർത്തിക്കുന്നത്?"
• "പ്രൊഡക്ഷൻ ബിൽഡ് പ്രവർത്തിപ്പിച്ച്, പ്രസിദ്ധീകരിക്കുന്നതിന് മുമ്പ് എല്ലാ പിശകുകളും മുന്നറിയിപ്പുകളും ശരിയാക്കുക."
• "രഹസ്യ കീകൾ VITE_ വേരിയബിളുകളിലോ ഫ്രണ്ടെൻഡ് കോഡിലെവിടെയെങ്കിലുമോ ഇല്ലെന്ന് ഉറപ്പാക്കുക."
• "പ്രിവ്യൂ ശൂന്യ പേജ് കാണിക്കുന്നു — Vite, ബ്രൗസർ കൺസോൾ പിശകുകൾ പരിശോധിച്ച് കാരണം ശരിയാക്കുക." ശൂന്യമായ വെളുത്ത പേജ് എങ്ങനെ പരിഹരിക്കാം കാണുക.
• "പ്രസിദ്ധീകരിച്ച ശേഷം ഹോം പേജ് മാത്രമല്ല, ഏത് പേജ് URL റീഫ്രഷ് ചെയ്താലും പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കുക."

Mythex-ലെ Vite

നിങ്ങൾ Next.js, സ്റ്റാറ്റിക് HTML, അല്ലെങ്കിൽ മറ്റൊരു ബാക്കെൻഡ് ആവശ്യപ്പെടാത്തപക്ഷം, ഓരോ പുതിയ Mythex പ്രോജക്റ്റും Vite-ൽ തുടങ്ങുന്നു. നിങ്ങളുടെ സ്വകാര്യ സാൻഡ്‌ബോക്സിലെ തത്സമയ Preview ഏജന്റ് ഫയലുകൾ എഡിറ്റ് ചെയ്യുമ്പോൾ അപ്‌ഡേറ്റ് ചെയ്യുന്നു, Publish ആപ്പ് ബിൽഡ് ചെയ്ത് ഡിപ്ലോയ് ചെയ്യുന്നു — ഹോസ്റ്റിംഗ് സ്വയം സജ്ജമാക്കേണ്ടതില്ല. പിന്നീട് ഒരു API-യോ ഡാറ്റാബേസോ വേണമെങ്കിൽ, ചാറ്റിൽ ആവശ്യപ്പെടുക; Vite ഫ്രണ്ട് എൻഡിനൊപ്പം Mythex ഒരു ബാക്കെൻഡ് സേവനം ചേർക്കാം (മൾട്ടി-സർവീസ് ആപ്പുകൾ).

ചോദ്യങ്ങൾ