Какво е Vite? Ръководство на разбираем език за строители на приложения

Vite (произнася се „вит“, френската дума за „бърз“) е инструмент за изграждане на уебсайтове и уеб приложения. Докато строите, той пуска сървър за разработка, който показва промените ви в браузъра почти мигновено. Когато сте готови за публикуване, пакетира кода ви във файлове с малък размер и оптимизация, които всеки уеб хостинг може да сервира. Той е безплатен, с отворен код и е инструментът по подразбиране зад много React, Vue и Svelte проекти.

Защо Vite е важен, когато строите с AI

Може никога да не напишете команда на 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, JSX на React трябва да се трансформира, а класовете на 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. Това е мярка за безопасност: всичко в кода на браузъра може да бъде видяно от посетителите, затова тайните ключове никога не трябва да имат този префикс и трябва да останат на бекенда. Вижте променливи на средата и тайни.

Ключови термини

Чести заблуди

• „Vite е фреймуърк.“ Той е инструмент за изграждане. React, Vue или Svelte е фреймуъркът; Vite го пуска и пакетира.
• „Vite приложението включва бекенд.“ Стандартното Vite приложение е само фронтенд. Базите данни, входовете и тайните ключове изискват сървър или API до него.
• „Сървърът за разработка е добре да е онлайн.“ Той не е предназначен за реален трафик. Винаги публикувайте резултата от продукционното изграждане.
• „Всичко в .env е тайна.“ В Vite приложение променливите VITE_ се вграждат във файловете, които всеки посетител изтегля.
• „Опресняването на страница с 404 означава, че приложението е счупено.“ В single-page приложение хостингът трябва да изпраща всеки маршрут обратно към index.html. Това е настройка на хостинга – вижте как да поправите грешките 404 след публикуване.

Какво да поискате от AI билдъра

• „Това приложение само Vite (фронтенд) ли е, или има и бекенд? Къде работи всяка част?“
• „Пусни продукционното изграждане и поправи всички грешки и предупреждения, преди да публикувам.“
• „Провери дали в променливи VITE_ или навсякъде в кода на фронтенда няма тайни ключове.“
• „Preview-то показва празна страница – провери грешките в Vite и в конзолата на браузъра и поправи причината.“ Вижте как да поправите празна бяла страница.
• „Увери се, че опресняването на всяка URL страница работи след публикуване, не само на началната.“

Vite в Mythex

Всеки нов проект в Mythex стартира на Vite, освен ако не поискате Next.js, статичен HTML или друг бекенд. Живият Preview във вашата частна среда се обновява, докато агентът редактира файловете, а Publish изгражда приложението и го публикува – няма хостинг, който да настройвате сами. Ако по-късно имате нужда от API или база данни, поискайте го в чата и Mythex може да добави бекенд услуга до Vite фронтенда (приложения с много услуги).

Въпроси