Introducción

Descripción General

Vite (palabra en francés para "rápido", pronunciado como /vit/, como "veet") es una herramienta de compilación que tiene como objetivo proporcionar una experiencia de desarrollo más rápida y ágil para proyectos web modernos. Consta de dos partes principales:

• Un servidor de desarrollo que proporciona mejoras enriquecidas de funcionalidades sobre módulos ES nativos, por ejemplo Hot Module Replacement (HMR) extremadamente rápido.

• Un comando de compilación que empaqueta tu código con Rollup, preconfigurado para generar recursos estáticos altamente optimizados para producción.

Vite es dogmático y viene con configuraciones predeterminadas listas para usar. Lee sobre lo que es posible en la Guía de funcionalidades. El soporte para frameworks o la integración con otras herramientas es posible a través de Plugins. La Sección de Configuración explica cómo adaptar Vite a tu proyecto si es necesario.

Vite también es altamente extensible a través de su API de Plugin y API de JavaScript con soporte completo de tipos.

Puedes obtener más información sobre la razón de ser del proyecto en la sección ¿Por qué Vite?.

Compatibilidad con navegadores

Durante el desarrollo, Vite configura esnext como el objetivo de transformación, porque asumimos que se está utilizando un navegador moderno que admite todas las características más recientes de JavaScript y CSS. Esto evita la reducción de sintaxis, permitiendo que Vite sirva módulos lo más cercanos posible al código fuente original.

Para la compilación de producción, de forma predeterminada Vite apunta a navegadores que admiten Módulos ES nativos, importación dinámica ESM nativa y import.meta. Los navegadores legacy pueden ser compatibles a través del complemento oficial @vitejs/plugin-legacy. Consulta la sección Compilación en Producción para obtener más detalles.

Probar Vite online

Puedes probar Vite online en StackBlitz. Este ejecuta la configuración de compilación basada en Vite directamente en el navegador, por lo que es casi idéntica a la configuración local pero con la diferencia que no requiere que instales nada en tu máquina. Puedes navegar a vite.new/{template} para seleccionar qué marco de trabajo utilizar.

Los ajustes preestablecidos de plantilla admitidos son:

JavaScript	TypeScript
vanilla	vanilla-ts
vue	vue-ts
react	react-ts
preact	preact-ts
lit	lit-ts
svelte	svelte-ts
solid	solid-ts
qwik	qwik-ts

Inicia tu primer proyecto Vite

Nota de compatibilidad

Vite requiere Node.js version 18+ o 20+. Sin embargo, algunas plantillas requieren una versión superior de Node.js para funcionar, por favor actualiza si tu gestor de paquetes te advierte sobre ello.

NPM

$ npm create vite@latest

Yarn

$ yarn create vite

PNPM

$ pnpm create vite

Bun

$ bun create vite

¡Entonces sigue las instrucciones!

También puedes especificar directamente el nombre del proyecto y la plantilla que deseas usar a través de las opciones de línea de comandos adicionales. Por ejemplo, para montar un proyecto de Vite + Vue, ejecuta:

NPM

# npm 7+, se requiere guión doble extra:
npm create vite@latest my-vue-app -- --template vue

Yarn

$ yarn create vite my-vue-app --template vue

PNPM

$ pnpm create vite my-vue-app --template vue

Bun

$ bun create vite my-vue-app --template vue

Consulta create-vite para más detalles sobre cada plantilla admitida: vanilla, vanilla-ts, vue, vue-ts, react, react-ts, react-swc, react-swc-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts, solid, solid-ts, qwik, qwik-ts.

Puedes usar . como nombre del proyecto para generar la estructura en el directorio actual.

Plantillas de la comunidad

create-vite es una herramienta para iniciar rápidamente un proyecto desde una plantilla básica para frameworks populares. Echa un vistazo a Awesome Vite para plantillas soportadas por la comunidad que incluyen otras herramientas o se dirigen a diferentes frameworks.

Para una plantilla en https://github.com/user/project, puedes probarla en línea usando https://github.stackblitz.com/user/project (agregando .stackblitz después de github en la URL del proyecto).

También puedes usar una herramienta como degit para estructurar tu proyecto con una de las plantillas. Suponiendo que el proyecto está en GitHub y usa main como rama predeterminada, puedes crear una copia local usando:

npx degit user/project#main my-project
cd my-project

npm install
npm run dev

Instalación Manual

En tu proyecto, puedes instalar la CLI de vite utilizando:

NPM

$ npm install -D vite

Yarn

$ yarn add -D vite

PNPM

$ pnpm add -D vite

Bun

$ bun add -D vite

Y crea un archivo index.html como este:

<p>Hello Vite!</p>

Luego ejecuta la CLI de vite en tu terminal:

vite

El archivo index.html se servirá en http://localhost:5173.

index.html y raíz del proyecto

Una cosa que puedes haber notado es que en un proyecto de Vite, index.html es frontal y central en lugar de estar escondido dentro de public. Esto es intencional: durante el desarrollo, Vite es un servidor e index.html es el punto de entrada a tu aplicación.

Vite trata a index.html como código fuente y como parte del grafo de módulos. Esto resuelve a <script type="module" src="..."> que hace referencia a tu código JavaScript. Incluso <script type="module"> inline y el CSS referenciado a través de <link href> también disfrutan de características específicas de Vite. Además, las URLs dentro de index.html se reorganizan automáticamente, por lo que no se necesitan marcadores de posición especiales para %PUBLIC_URL%.

Similar a los servidores http estáticos, Vite tiene el concepto de un "directorio raíz" desde el cual se sirven tus archivos. Lo verás referenciado como <root> en el resto de la documentación. Las URL absolutas en el código se resolverán utilizando la raíz del proyecto como base, por lo que puedes escribir código como si estuvieras trabajando con un servidor de archivos estático normal (¡excepto que es mucho más poderoso!). Vite también es capaz de manejar dependencias que se resuelven en ubicaciones del sistema de archivos fuera de la raíz, lo que lo hace utilizable incluso en una configuración basada en monorepos.

Vite también admite aplicaciones de múltiples páginas con múltiples puntos de entrada .html.

Especificar una raíz alternativa

Ejecutar vite inicia el servidor de desarrollo utilizando el directorio de trabajo actual como raíz. Puedes especificar una raíz alternativa con vite serve some/sub/dir. Ten en cuenta que Vite también resolverá su archivo de configuración (vite.config.js) dentro de la raíz del proyecto, por lo que tendrás que moverlo si se cambia la raíz.

Interfaz de línea de comandos

En un proyecto donde está instalado Vite, puedes usar el binario vite en tus scripts npm, o ejecutarlo directamente con npx vite. Estos son los scripts npm predeterminados en un proyecto de Vite ya montado:

{
  "scripts": {
    "dev": "vite", // inicia el servidor de desarrollo, alias: `vite dev`, `vite serve`
    "build": "vite build", // compila para producción
    "preview": "vite preview" // vista previa local de compilación para producción
  }
}

Puedes especificar opciones CLI adicionales como --port o --open. Para obtener una lista completa de las opciones de la CLI, ejecuta npx vite --help en tu proyecto.

Aprende más sobre la interfaz de línea de comnando

Uso de confirmaciones no publicadas

Si no puedes esperar a una nueva versión para probar las funciones más recientes, deberás clonar el repo de vite en tu máquina local y luego compilarlo y vincularlo tu mismo. (pnpm es obligatorio):

git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link --global # utiliza el gestor de paquetes de tu preferencia para este paso

Luego ve a tu proyecto basado en Vite y ejecuta pnpm link --global vite (o el gestor de paquetes que usaste para vincular vite globalmente). ¡Ahora reinicia el servidor de desarrollo para hacerlo funcionar!

Comunidad

Si tienes preguntas o necesitas ayuda, comunícate con la comunidad en Discord y en Discusiones de Github.