Що таке Vite? Простий посібник для творців застосунків

Vite (вимовляється «віт», від французького «quick», тобто «швидкий») — це інструмент збирання для сайтів і вебзастосунків. Поки ви створюєте проєкт, він запускає сервер розробки, який показує ваші зміни в браузері майже миттєво. Коли ви готові до запуску, він пакує ваш код у невеликі оптимізовані файли, які може віддавати будь-який веб-хостинг. Він безкоштовний, має відкритий код і є інструментом за замовчуванням для багатьох проєктів на React, Vue і Svelte.

Чому Vite важливий, коли ви створюєте з ШІ

Можливо, ви ніколи не введете команду Vite, але якщо ваш застосунок створено за допомогою ШІ-конструктора, найімовірніше, його запускає Vite. Mythex запускає нові проєкти на Vite + React + TypeScript + Tailwind, якщо ви не просите іншого (як обирається технологія).

Розуміння того, що робить Vite, допомагає вам:

• Розуміти Preview. Живий попередній перегляд, який оновлюється, коли ШІ редагує файли, зазвичай є сервером розробки 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. Ви просите ШІ «зроби заголовок синім».
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 після розгортання.

Що попросити у вашого ШІ-конструктора

• «Це застосунок лише на Vite (фронтенд) чи в нього є і бекенд? Де працює кожна частина?»
• «Запусти продакшен-збирання і виправ усі помилки та попередження, перш ніж я опублікую.»
• «Переконайся, що жодні секретні ключі не лежать у змінних VITE_ чи будь-де у фронтенд-коді.»
• «Попередній перегляд показує порожню сторінку — перевір помилки в консолі Vite і браузера та виправ причину.» Див. як виправити порожню білу сторінку.
• «Переконайся, що оновлення будь-якої адреси сторінки працює після публікації, а не лише головної сторінки.»

Vite у Mythex

Кожен новий проєкт Mythex запускається на Vite, якщо ви не просите Next.js, статичний HTML або інший бекенд. Живий Preview у вашій приватній пісочниці оновлюється, коли агент редагує файли, а Publish збирає застосунок і розгортає його — налаштовувати хостинг самостійно не потрібно. Якщо згодом вам знадобиться API або база даних, просто попросіть у чаті, і Mythex може додати бекенд-сервіс поруч із фронтендом на Vite (застосунки з кількома сервісами).

Запитання