Vite гэж юу вэ? Аппликейшн бүтээгчдэд зориулсан энгийн гарын авлага

Vite (франц хэлээр «хурдан» гэсэн утгатай, «вийт» гэж уншина) бол вэбсайт, вэб аппуудад зориулсан build хэрэгсэл. Таны бүтээж байх явцад хөгжүүлэлтийн сервер өөрчлөлтийг хөтөч дээр бараг тэр даруй харуулдаг. Нийтлэхэд бэлэн болоход таны кодыг аливаа вэб хост үйлчилж чадах жижиг, оновчтой файлуудад багцалдаг. Энэ нь үнэгүй, нээлттэй эх кодтой бөгөөд React, Vue, Svelte олон төслийн анхдагч хэрэгсэл нь юм.

AI-аар бүтээхдээ Vite яагаад чухал вэ

Vite командыг хэзээ ч бичихгүй байж магадгүй ч, хэрэв аппаа AI аппликейшн бүтээгчээр бүтээсэн бол Vite нь магадгүй түүнийг ажиллуулж байгаа. Mythex өөрөөр хүсээгүй бол шинэ төслүүдээ Vite + React + TypeScript + Tailwind дээр эхэлдэг (технологийг хэрхэн сонгодог).

Vite юу хийдгийг мэдвэл дараах зүйлд тусална:

• Preview-ээ ойлгоход. AI файл засах тусам шинэчлэгддэг шууд preview ихэвчлэн Vite-ийн хөгжүүлэлтийн сервер байдаг.
• Нийтлэлтийг ойлгоход. Vite апп нь статик файлын хавтас — HTML, JavaScript, CSS, зураг — болдог бөгөөд үүнийг хостлох нь хямд, энгийн.
• Алдааны мэдээллийг уншихад. Preview-д улаан алдааны цонх эсвэл хоосон хуудас гарвал, файл эмхэтгэж чадаагүйг Vite мэдээлж байгаа нь ихэвчлэн байдаг.
• Түүний хязгаарыг мэдэхэд. Vite нь фронтендийг build хийдэг. Таны апп backend шаардвал — өгөгдлийн сан, нууц 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. Толгой нь preview дээр ихэвчлэн нэг секундэд цэнхэр болно.

Нийтлэх үед vite build нь dist/index.html болон dist/assets/index-a1b2c3.js шиг файл гаргана. Файлын нэрний санамсаргүй мэт харагдах хэсэг нь агуулга өөрчлөгдөх бүрт солигддог тул хөтчүүд болон CDN-үүд хуучирсан код үйлчлэхгүйгээр файлыг удаан хугацаанд кэшлэж чадна.

Vite дэх орчны хувьсагчид

Vite нь VITE_-ээр эхэлсэн нэртэй хувьсагчдыг л хөтчийн кодод харуулдаг, жишээ нь VITE_PUBLIC_MAP_ID. Энэ бол аюулгүй байдлын арга хэмжээ: хөтчийн кодонд байгаа бүхнийг зочид харж чадна тул нууц түлхүүрүүд энэ угтвартай байж болохгүй бөгөөд backend дээр үлдэх ёстой. Орчны хувьсагч ба нууцууд-ийг үзнэ үү.

Гол нэр томъёо

Түгээмэл буруу ойлголт

• «Vite бол фреймворк.» Энэ бол build хэрэгсэл. React, Vue эсвэл Svelte бол фреймворк; Vite үүнийг ажиллуулж, багцалдаг.
• «Vite апп backend-тэй.» Стандарт Vite апп зөвхөн фронтенд. Өгөгдлийн сан, нэвтрэлт, нууц түлхүүрт нь зэрэгцээ сервер эсвэл API хэрэгтэй.
• «Dev сервер онлайн тавихад зохино.» Энэ нь жинхэнэ ачаалалд зориулаагүй. Үргэлж production build-ийн гаралтыг байршуул.
• «.env дэх бүх зүйл нууц.» Vite аппд VITE_ хувьсагчид зочид бүрийн татдаг файлд шууд суулгагдсан байдаг.
• «404 гарах хуудсыг дахин ачаалах нь аппыг эвдэрсэн гэсэн үг.» Single-page аппд хост бүх замыг index.html руу буцаах ёстой. Энэ бол хостингийн тохиргоо — нийтлэлийн дараах 404 алдааг хэрхэн засах вэ-ийг үзнэ үү.

AI builder-таасаа юу хүсэх вэ

• «Энэ апп зөвхөн Vite (фронтенд) юу, эсвэл backend-тэй юу? Хэсэг бүр хаана ажилладаг вэ?»
• «Production build-ийг ажиллуулж, нийтлэхээсээ өмнө бүх алдаа, анхааруулгыг засаарай.»
• «VITE_ хувьсагчид болон фронтенд кодонд нууц түлхүүр байхгүйг шалгаарай.»
• «Preview хоосон хуудас харуулж байна — Vite болон хөтчийн консолын алдааг шалгаж, шалтгааныг засаарай.» Үзэх: цагаан хоосон хуудсыг хэрхэн засах вэ.
• «Нийтлэсний дараа зөвхөн нүүр хуудас биш, ямар ч хуудасны URL-ийг шинэчлэхэд ажиллахыг шалга.»

Mythex дээрх Vite

Mythex-ийн шинэ төсөл бүр, та Next.js, статик HTML эсвэл өөр backend хүсээгүй бол Vite дээр эхэлдэг. Таны хувийн sandbox дахь шууд Preview агент файл засах тусам шинэчлэгддэг, Publish нь аппыг build хийж байршуулдаг — өөрөө хостинг тохируулах шаардлагагүй. Дараа нь API эсвэл өгөгдлийн сан хэрэгтэй болвол чатаар хүсэхэд Mythex Vite фронтендийн хажууд backend үйлчилгээ нэмж чадна (олон үйлчилгээтэй аппууд).

Асуултууд