Создание фронтенда с использованием Vite и Bun

NOTE

Вы можете использовать Vite с Bun, но многие проекты получают более быстрые сборки и сокращают сотни зависимостей, переключившись на [HTML импорты](/ru/guides/bundler/html-static).

Vite работает из коробки с Bun. Начните с одного из шаблонов Vite.

bash

bun create vite my-app

txt

✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC
Scaffolding project in /path/to/my-app...

Затем перейдите в директорию проекта и установите зависимости.

bash

cd my-app
bun install

Запустите сервер разработки с помощью CLI vite, используя bunx.

Флаг --bun указывает Bun запускать CLI Vite с помощью bun вместо node; по умолчанию Bun соблюдает shebang строку Vite #!/usr/bin/env node.

bash

bunx --bun vite

Чтобы упростить эту команду, обновите скрипт "dev" в package.json до следующего.

json

  "scripts": {
    "dev": "vite", 
    "dev": "bunx --bun vite", 
    "build": "vite build",
    "serve": "vite preview"
  },
  // ...

Теперь вы можете запустить сервер разработки с помощью bun run dev.

bash

bun run dev

Следующая команда соберёт ваше приложение для продакшена.

bunx --bun vite build

Это сокращённое руководство для начала работы с Vite + Bun. Для получения дополнительной информации смотрите документацию Vite.