Criar um frontend usando Vite e Bun

NOTE

Você pode usar Vite com Bun, mas muitos projetos obtêm builds mais rápidos e eliminam centenas de dependências ao migrar para [HTML imports](/pt/bundler/html-static).

Vite funciona perfeitamente com Bun. Comece com um dos templates do Vite.

bash

bun create vite my-app

txt

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

Em seguida, mude para o diretório do projeto e instale as dependências.

bash

cd my-app
bun install

Inicie o servidor de desenvolvimento com a CLI do Vite usando bunx.

A flag --bun diz ao Bun para executar a CLI do Vite usando bun em vez de node; por padrão, o Bun respeita a linha shebang #!/usr/bin/env node do Vite.

bash

bunx --bun vite

Para simplificar este comando, atualize o script "dev" no package.json para o seguinte.

json

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

Agora você pode iniciar o servidor de desenvolvimento com bun run dev.

bash

bun run dev

O seguinte comando fará build da sua aplicação para produção.

bunx --bun vite build

Este é um guia simplificado para você começar com Vite + Bun. Para mais informações, consulte a documentação do Vite.