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, pero también es altamente extensible a través de sus API de complementos y API de JavaScript con soporte completo de tipado.

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

Compatibilidad con navegadores #

La configuración de compilación predeterminada va dirigida a navegadores que admiten modulos ESM nativos, importación dinámica de ESM nativo e import.meta. Los navegadores obsoletos pueden ser soportados a través del @vitejs/plugin-legacy oficial; consulta Compilación en producción para más detalles.

Probar Vite online #

Puedes probar Vite online en StackBlitz. Éste 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:

Monta tu primer proyecto Vite #

Con NPM:

$ npm create vite@latest

Con Yarn:

$ yarn create vite

Con PNPM:

$ pnpm 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 6.x
npm create vite@latest my-vue-app --template vue

# 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

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.

Plantillas de la comunidad #

create-vite es una herramienta para crear rápidamente un proyecto a partir de una plantilla básica para marcos de trabajo populares. Consulta Awesome Vite para plantillas mantenidas por la comunidad que incluyen otras herramientas o apuntan a diferentes marcos de trabajo. Puedes usar una herramienta como degit para montar tu proyecto con una de las plantillas.

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

npm install
npm run dev

Si el proyecto usa main como la rama por defecto, agrega el sufijo #main al repositorio del proyecto.

npx degit user/project#main my-project

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.

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 --https. 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.