Skip to content
En esta página

Free Online Conference

ViteConf 23 - Oct 5

Get your ticket now!

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:

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

JavaScriptTypeScript
vanillavanilla-ts
vuevue-ts
reactreact-ts
preactpreact-ts
litlit-ts
sveltesvelte-ts
solidsolid-ts
qwikqwik-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.

bash
$ npm create vite@latest
bash
$ yarn create vite
bash
$ 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:

bash
# 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.

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

bash
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:

json
{
  "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):

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

Publicado bajo licencia MIT. (c9636605)