Што е Vite? Едноставен водич за градители на апликации

Vite (се изговара „вит“, францускиот збор за „брзо“) е build алатка за веб сајтови и веб апликации. Додека градите, извршува development сервер што ги прикажува промените во прелистувачот речиси веднаш. Кога сте подготвени за лансирање, го пакува кодот во мали, оптимизирани датотеки што секој веб хостинг може да ги послужи. Бесплатен е, со отворен код и е стандардната алатка зад многу React, Vue и Svelte проекти.

Зошто Vite е важен кога градите со вештачка интелигенција

Можеби никогаш нема да напишете Vite команда, но ако вашата апликација е направена со AI градител, Vite најверојатно ја извршува. Mythex ги започнува новите проекти на Vite + React + TypeScript + Tailwind, освен ако не побарате нешто друго (како се избира технологијата).

Знаењето што прави Vite ви помага да:

• Го разберете Preview-то. Живиот преглед што се ажурира додека AI ги уредува датотеките најчесто е Vite development сервер.
• Го разберете објавувањето. Vite апликацијата станува папка со статични датотеки — HTML, JavaScript, CSS и слики — што е евтино и едноставно за хостирање.
• Ги читате пораките за грешки. Кога Preview-то покажува црвен слој со грешка или празна страница, често Vite јавува дека некоја датотека не се компајлирала.
• Ги знаете неговите граници. Vite го build-а frontend-от. Ако апликацијата ви треба backend — база, тајни API клучеви, плаќања — тоа работи на друго место. Видете frontend наспроти backend.

Секојдневна аналогија

Замислете ресторантска кујна.

• За време на подготовката (development), готвачот ја проба и ја прилагодува секоја јадење додека оди. Ја менува зачинот и ја проба повторно една секунда подоцна. Тоа е Vite development серверот: менувате датотека, страницата се ажурира веднаш, често без да ги изгубите внесените податоци во формулар.
• За кетеринг нарачка (production), сè се готви, пакува, означува и запечатува за да патува добро и да се послужи каде било. Тоа е vite build: вашиот код се пакува, се намалува и добива отпечатоци во имињата на датотеките, готови за секој хостинг.

Исти рецепти, два сосема различни начини на работа — а Vite ги прави и двете.

Што всушност прави Vite

Современата веб апликација е составена од многу датотеки: компоненти, стилови, слики и библиотеки од трети страни. Прелистувачите не можат сè тоа да го користат како што е напишано. TypeScript мора да стане JavaScript, JSX-от на React мора да се трансформира, а Tailwind класите мора да се претворат во CSS.

Vite ова го решава во два режима:

Постарите алатки го пакуваа целото апликација пред да прикажат било што, па стартувањето и ажурирањето на голем проект можеше да трае долго. Трикот на Vite е да го прескокне тоа при development и да му дозволи на прелистувачот да ги вчитува датотеките по потреба. За production, сè уште пакува — од Vite 8, со пакувач наречен Rolldown — затоа што многу мали датотеки се побавни за посетителите од неколку оптимизирани.

Практичен пример: што има внатре во Vite проект

Ево приближно како изгледа мала Vite + React апликација:

my-app/
  index.html          ← единствената HTML страница од која започнува апликацијата
  package.json        ← список на библиотеки и скрипти (dev, build)
  vite.config.ts      ← Vite поставки и plugins
  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-овите можат подолго да кешираат датотеки без да послужат стар код.

Environment варијабли во Vite

Vite ги изложува кон кодот во прелистувачот само варијаблите чии имиња започнуваат со VITE_, на пример VITE_PUBLIC_MAP_ID. Тоа е безбедносна мерка: сè во кодот на прелистувачот можат да го видат посетителите, па тајните клучеви никогаш не смеат да го имаат тој префикс и мора да останат на бекенд. Видете environment варијабли и тајни.

Клучни термини

Вообичаени заблуди

• „Vite е framework.“ Тој е build алатка. React, Vue или Svelte е framework-от; Vite го извршува и пакува.
• „Vite апликацијата вклучува backend.“ Стандардната Vite апликација е само frontend. Базите, најавите и тајните клучеви бараат сервер или API покрај неа.
• „Dev серверот е во ред да се стави online.“ Не е наменет за вистински сообраќај. Секогаш објавувајте го излезот од production build-от.
• „Сè во .env е тајно.“ Во Vite апликација, VITE_ варијаблите се вградуваат во датотеките што ги преземаат сите посетители.
• „Освежувањето на страница што дава 404 значи дека апликацијата е расипана.“ Во single-page апликација, хостот мора да ја врати секоја рута назад на index.html. Тоа е поставка на хостингот — видете како да поправите 404 грешки по објавувањето.

Што да побарате од вашиот AI градител

• „Дали оваа апликација е само Vite (frontend), или има и backend? Каде работи секој дел?“
• „Пушти production build и поправи ги сите грешки и предупредувања пред да објавам.“
• „Провери дека ниту една тајна не е во VITE_ варијабли или каде било во frontend кодот.“
• „Preview-то покажува празна страница — провери ги грешките на Vite и на конзолата на прелистувачот и поправи ја причината.“ Видете како да поправите празна бела страница.
• „Осигурај се дека освежувањето на која било URL адреса на страница работи после објавувањето, не само на почетната страница.“

Vite во Mythex

Секој нов проект во Mythex започнува на Vite, освен ако не побарате Next.js, статичен HTML или поинаков backend. Живиот Preview во вашата приватна sandbox средина се ажурира додека агентот ги уредува датотеките, а Publish го build-а проектот и го распоредува — нема хостинг што сами треба да го поставувате. Ако подоцна ви треба API или база, побарајте го во чат и Mythex може да додаде backend сервис покрај frontend-от на Vite (апликации со повеќе сервиси).

Прашања