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
La configuración de compilación predeterminada va dirigida a navegadores que admiten modulos ESM nativos, importación dinámica de ESM nativo e i
. 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. 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 |
Monta tu primer proyecto Vite
Nota de compatibilidad
Vite requiere Node.js version 18+. 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 create vite@latest
$ yarn create vite
$ 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
, solid
, solid-ts
, qwik
, qwik-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
. 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 --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.