Czym jest Vite? Prosty przewodnik dla twórców aplikacji

Vite (wymawiane „wit”, po francusku „szybki”) to narzędzie do budowania stron i aplikacji internetowych. Podczas budowania uruchamia serwer deweloperski, który pokazuje twoje zmiany w przeglądarce niemal natychmiast. Gdy jesteś gotów do publikacji, pakuje twój kod w małe, zoptymalizowane pliki, które może obsłużyć dowolny hosting. Jest darmowy, open source i stanowi domyślne narzędzie w wielu projektach React, Vue i Svelte.

Dlaczego Vite ma znaczenie, gdy budujesz z AI

Możesz nigdy nie wpisać polecenia Vite, ale jeśli twoją aplikację zbudował asystent AI, Vite prawdopodobnie ją uruchamia. Mythex zaczyna nowe projekty na Vite + React + TypeScript + Tailwind, chyba że poprosisz o coś innego (jak dobierany jest stos technologiczny).

Znajomość tego, co robi Vite, pomaga w kilku sprawach:

• Zrozumieć podgląd. Podgląd na żywo, który aktualizuje się, gdy AI edytuje pliki, to zazwyczaj serwer deweloperski Vite.
• Zrozumieć publikację. Aplikacja Vite staje się folderem plików statycznych — HTML, JavaScript, CSS i obrazów — co jest tanie i proste w hostowaniu.
• Czytać komunikaty o błędach. Gdy podgląd pokazuje czerwoną nakładkę z błędem lub pustą stronę, często jest to Vite zgłaszający, że plik nie został skompilowany.
• Znać jego ograniczenia. Vite buduje frontend. Jeśli twoja aplikacja potrzebuje backendu — bazy danych, tajnych kluczy API, płatności — działa to gdzie indziej. Zobacz frontend a backend.

Codzienna analogia

Pomyśl o kuchni restauracji.

• Podczas przygotowań do serwisu (rozwój) szef kuchni próbuje i dopasowuje każde danie po drodze. Zmień przyprawę, spróbuj ponownie sekundę później. Tak działa serwer deweloperski Vite: zmieniasz plik, strona aktualizuje się od razu, często bez utraty tego, co wpisałeś w formularzu.
• Do zamówienia cateringowego (produkcja) wszystko jest ugotowane, porcjowane, zapakowane i oznaczone, żeby dobrze podróżowało i mogło być podane w dowolnym miejscu. To właśnie vite build: twój kod zostaje spakowany, zmniejszony i opatrzony unikalnymi nazwami plików, gotowy do dowolnego hostingu.

Te same przepisy, dwa bardzo różne sposoby pracy — a Vite obsługuje oba.

Co naprawdę robi Vite

Nowoczesna aplikacja składa się z wielu plików: komponentów, stylów, obrazów i bibliotek zewnętrznych. Przeglądarki nie mogą wszystkiego używać w takiej postaci. TypeScript musi zostać zamieniony na JavaScript, JSX z Reacta musi zostać przetworzony, a klasy Tailwinda muszą zostać zamienione na CSS.

Vite obsługuje to w dwóch trybach:

Starsze narzędzia łączyły całą aplikację, zanim cokolwiek pokazały, więc uruchamianie i aktualizowanie dużego projektu mogło trwać długo. Sztuczka Vite polega na pominięciu tego kroku podczas rozwoju i pozwoleniu przeglądarce na ładowanie plików w miarę potrzeby. W produkcji nadal łączy pliki — od Vite 8 z bundlerem o nazwie Rolldown — ponieważ wiele małych plików jest wolniejsze dla odwiedzających niż kilka zoptymalizowanych.

Przykład: co jest w projekcie Vite

Oto mniej więcej, jak wygląda mała aplikacja Vite + React:

my-app/
  index.html          ← jedna strona HTML, od której zaczyna się aplikacja
  package.json        ← lista bibliotek i skryptów (dev, build)
  vite.config.ts      ← ustawienia Vite i wtyczki
  src/
    main.tsx          ← uruchamia React i montuje go w index.html
    App.tsx           ← główny komponent twojej aplikacji
    index.css         ← style, np. @import "tailwindcss";
  public/             ← pliki kopiowane bez zmian (favicon, robots.txt)

I skrypty w package.json:

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

Teraz prześledź jedną zmianę:

1. Prosisz AI: „zmień nagłówek na niebieski”.
2. Edytuje klasę w App.tsx.
3. Vite zauważa zmianę pliku, przetwarza tylko ten plik i wysyła aktualizację do przeglądarki.
4. Nagłówek staje się niebieski w podglądzie, zwykle w ciągu sekundy.

Gdy publikujesz, vite build tworzy coś w rodzaju dist/index.html oraz dist/assets/index-a1b2c3.js. Losowo wyglądająca część nazwy pliku zmienia się, gdy zmienia się treść, dzięki czemu przeglądarki i CDN-y mogą przechowywać pliki przez długi czas, nie serwując nieaktualnego kodu.

Zmienne środowiskowe w Vite

Vite udostępnia kodowi przeglądarki tylko zmienne, których nazwy zaczynają się od VITE_, np. VITE_PUBLIC_MAP_ID. To środek bezpieczeństwa: wszystko w kodzie przeglądarki może zobaczyć odwiedzający, dlatego tajne klucze nigdy nie mogą mieć tego prefiksu i muszą pozostać po stronie backendu. Zobacz zmienne środowiskowe i sekrety.

Kluczowe pojęcia

Częste mylne przekonania

• „Vite to framework.” To narzędzie do budowania. Framework to React, Vue lub Svelte; Vite go uruchamia i pakuje.
• „Aplikacja Vite zawiera backend.” Standardowa aplikacja Vite to tylko frontend. Bazy danych, logowanie i tajne klucze wymagają serwera lub API obok niej.
• „Serwer deweloperski można wystawić do sieci.” Nie jest przeznaczony do prawdziwego ruchu. Zawsze wdrażaj wynik produkcyjnego builda.
• „Wszystko w .env jest tajne.” W aplikacji Vite zmienne VITE_ są wpisywane w pliki, które pobiera każdy odwiedzający.
• „Odświeżenie strony z błędem 404 oznacza, że aplikacja jest zepsuta.” W aplikacji jednostronicowej hosting musi przekierować każdą trasę z powrotem do index.html. To ustawienie hostingu — zobacz jak naprawić błędy 404 po wdrożeniu.

O co poprosić swojego asystenta AI

• „Czy ta aplikacja to tylko Vite (frontend), czy ma też backend? Gdzie działa każda część?”
• „Uruchom produkcyjny build i napraw wszystkie błędy i ostrzeżenia, zanim opublikuję.”
• „Sprawdź, czy żadne tajne klucze nie znajdują się w zmiennych VITE_ ani nigdzie w kodzie frontendu.”
• „Podgląd pokazuje pustą stronę — sprawdź błędy w konsoli Vite i przeglądarki i napraw przyczynę.” Zobacz jak naprawić pustą białą stronę.
• „Upewnij się, że odświeżenie dowolnego adresu strony działa po publikacji, a nie tylko strony głównej.”

Vite w Mythex

Każdy nowy projekt Mythex zaczyna na Vite, chyba że poprosisz o Next.js, statyczny HTML lub inny backend. Podgląd na żywo w twojej prywatnej piaskownicy aktualizuje się, gdy agent edytuje pliki, a Publish buduje aplikację i ją wdraża — nie musisz sam konfigurować hostingu. Jeśli później potrzebujesz API lub bazy danych, poproś o to na czacie, a Mythex może dodać usługę backendową obok frontendu Vite (aplikacje wieloserwisowe).

Pytania