Construir un frontend usando Vite y Bun

NOTE

Puedes usar Vite con Bun, pero muchos proyectos obtienen compilaciones más rápidas y eliminan cientos de dependencias al cambiar a [importaciones HTML](/es/bundler/html-static).

Vite funciona fuera de la caja con Bun. Comienza con una de las plantillas de Vite.

bash

bun create vite my-app

txt

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

Luego cambia al directorio del proyecto e instala las dependencias.

bash

cd my-app
bun install

Inicia el servidor de desarrollo con el CLI de Vite usando bunx.

El flag --bun le indica a Bun que ejecute el CLI de Vite usando bun en lugar de node; por defecto Bun respeta la línea shebang #!/usr/bin/env node de Vite.

bash

bunx --bun vite

Para simplificar este comando, actualiza el script "dev" en package.json a lo siguiente.

json

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

Ahora puedes iniciar el servidor de desarrollo con bun run dev.

bash

bun run dev

El siguiente comando compilará tu aplicación para producción.

bunx --bun vite build

Esta es una guía simplificada para comenzar con Vite + Bun. Para más información, consulta la documentación de Vite.