Tutorial de Vite

Vite es una herramienta de construcción de frontend moderna que tiene como objetivo proporcionar una experiencia de desarrollo rápida aprovechando el soporte nativo de módulos ES de los navegadores modernos.

Vite se compone de dos partes:

• Servidor de desarrollo:Basado en módulos ES nativos, proporciona una actualización en caliente (HMR) extremadamente rápida.

• Comando de compilación:Utiliza Rollup para empaquetar el código y generar recursos estáticos optimizados para entornos de producción.

Vite requiere Node.js versión 18+ o 20+. Sin embargo, algunas plantillas dependen de versiones más recientes de Node para funcionar correctamente. Cuando tu gestor de paquetes emita una advertencia, presta atención y actualiza tu versión de Node.

Los problemas de las herramientas de construcción tradicionales

Antes de la aparición de Vite, el desarrollo frontend solía utilizar herramientas de construcción como Webpack. Aunque estas herramientas son potentes, también presentan algunos inconvenientes:

• Inicio lento:Cuanto más grande es el proyecto, más tarda el inicio, lo que afecta la eficiencia del desarrollo.

• Actualización en caliente lenta:Cada vez que se modifica el código, es necesario reconstruir todo el proyecto, lo que ralentiza la actualización en caliente.

• Configuración compleja:Herramientas como Webpack tienen una configuración compleja y un alto costo de aprendizaje.

La aparición de Vite resuelve los problemas de las herramientas de construcción tradicionales y ofrece las siguientes ventajas:

• Inicio ultrarrápido:Al aprovechar el soporte nativo de módulos ES del navegador, no es necesario empaquetar, por lo que el inicio es extremadamente rápido.

• Actualización en caliente rápida:Solo actualiza los módulos modificados, mantiene el estado de la aplicación y mejora la eficiencia del desarrollo.

• Funciones ricas:Admite TypeScript, JSX, CSS, etc., listo para usar.

• Altamente extensible:Gracias a su sistema de plugins, es fácil integrar otras herramientas y marcos de trabajo.

Cómo funciona Vite

El funcionamiento de Vite se puede dividir en modo de desarrollo y modo de producción:

• Modo de desarrollo:

  • Vite inicia un servidor de desarrollo y aprovecha la compatibilidad nativa del navegador con los módulos ES para cargar directamente el código fuente.

  • Cuando el código cambia, Vite solo actualiza los módulos modificados y notifica al navegador para realizar la actualización en caliente, manteniendo el estado de la aplicación.

• Modo de producción:

  • Vite utiliza Rollup para empaquetar el código y generar archivos de recursos estáticos optimizados.

  • Estos archivos se pueden implementar en cualquier servidor de archivos estáticos.

Casos de uso de Vite

Vite es adecuado para todo tipo de proyectos, especialmente para:

• Aplicaciones de una sola página (SPA):Como proyectos de Vue, React.

• Sitios web estáticos:Para construir rápidamente blogs, documentación, etc.

• Desarrollo de bibliotecas:Aprovecha las funciones de compilación de Vite para desarrollar y empaquetar bibliotecas de manera eficiente.

Crear un proyecto Vite

Vite ofrece varias formas de crear un nuevo proyecto; la más sencilla es usar la herramienta de línea de comandos.

Abre una terminal o herramienta de línea de comandos y ejecuta el siguiente comando para crear un nuevo proyecto Vite:

npm create vite@latest

Sigue las indicaciones para ingresar el nombre del proyecto y elegir la plantilla.

Vite ofrece varias plantillas, entre ellas:

• vanilla:Proyecto de JavaScript puro

• vue:Proyecto de Vue.js

• react:Proyecto de React

• preact:Proyecto de Preact

• lit:Proyecto de Lit

• svelte:Proyecto de Svelte

Después de elegir la plantilla, Vite crea automáticamente el directorio del proyecto e instala las dependencias. En esta sección hemos elegido el marco Vue.

Si no sabes qué elegir por ahora, también puedes pulsar Enter en todo; la información que se muestra en la ventana será similar a la siguiente:

Un proyecto creado con Vite normalmente incluye los siguientes archivos y carpetas:

• node_modules:Carpeta que almacena las dependencias del proyecto.

• public:Carpeta que almacena recursos estáticos, como imágenes, fuentes, etc.

• src:Carpeta que almacena el código fuente del proyecto.

  • main.js:Archivo de entrada del proyecto.

  • App.vue:Componente raíz del proyecto Vue.

• index.html:Página principal del proyecto.

• package.json:Archivo de configuración del proyecto, que contiene información del proyecto, dependencias y comandos de scripts.

• vite.config.js:Archivo de configuración de Vite, que se utiliza para configurar varias opciones de Vite.

Iniciar el servidor de desarrollo

Entra en el directorio del proyecto:

cd ejemplo-vite-test

Instala las dependencias:

npm install

npm run dev

Después de ejecutarlo, aparece la siguiente información:

VITE v6.2.0  ready in 684 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help

Vite iniciará un servidor de desarrollo local y mostrará la dirección de acceso, por ejemplohttp://localhost:5173, el puerto se puede configurar y modificar en vite.config.js.

Abre el navegador y visita esa dirección para ver tu proyecto Vite.

Modificar el código y ver los cambios

Abre el archivo src/App.vue, modifica el código y guarda el archivo.

Verás que el navegador se actualiza automáticamente y muestra el resultado modificado.

Proceso de inicio de Vite

Definido en package.json:

"scripts": {
  "dev": "vite"
}

Ejecutarnpm run devDespués del comando, npm busca el archivo ejecutable local node_modules/.bin/vite, lo invoca e inicia el servidor de desarrollo.

Pasos principales del proceso de inicio de Vite:

1. Leer la configuración

   • Por defecto, lee el archivo en el directorio raízvite.config.jsovite.config.ts。
   • La configuración incluyeroot、alias, plugins, puerto, etc.

2. Resolución de dependencias

   • Escaneasrc/main.js(osrc/main.ts) como archivo de entrada.
   • Realiza un análisis de dependencias de los módulos ES.
   • Para las rutas de importación (por ejemplo,@/components/Hello.vue) se realiza la resolución de alias.

3. Iniciar el servidor de desarrollo

   • Crea un servidor HTTP, puerto predeterminado5173。
   • Proporciona la capacidad de actualización en caliente (HMR, por sus siglas en inglés, Hot Module Replacement).
   • Convierte archivos Vue, JS/TS, CSS, etc., en código reconocible por el navegador mediante los plugins integrados de Vite.

Orden de invocación de archivos (con un proyecto típico de Vue 3 como ejemplo)

npm run dev
    ↓
vite 命令执行
    ↓
读取 vite.config.js
    ↓
扫描入口文件 src/main.js / src/main.ts
    ↓
main.js 导入 App.vue 和 router/store 等
    ↓
App.vue -> template + script + style 分别由 Vite Vue 插件处理
    ↓
浏览器请求资源时，Vite 进行按需编译和模块缓存
    ↓
页面呈现，支持 HMR 热更新

Puntos clave

• Archivo de entrada：main.jsomain.ts, el punto de partida de la aplicación Vue.
• Resolución de módulos: Vite utilizaesbuildpara procesar rápidamente JS/TS y manejar los componentes de un solo archivo de Vue.
• Resolución de alias：@Corresponde asrc/, envite.config.jsse configura medianteresolve.aliasconfiguración.
• Actualización en caliente: Al modificar.vuearchivos o archivos JS/TS, Vite actualiza los módulos localmente sin recargar toda la página.

Funciones comunes de Vite

Vite ofrece una gran cantidad de funciones que te ayudan a desarrollar aplicaciones frontend de manera más eficiente.

1. Usar preprocesadores de CSS

Vite admite el uso de preprocesadores de CSS como Sass, Less, Stylus, etc.

Para usar estos preprocesadores, primero debes instalar las dependencias correspondientes:

Sass:

npm install -D sass

Less:

npm install -D less

Stylus:

npm install -D stylus

Una vez instaladas, puedes usar el preprocesador de CSS correspondiente en tu proyecto.

Por ejemplo, en un proyecto Vue, puedes usar<style lang="scss">para escribir código Sass.

2. Usar TypeScript

Vite admite escribir código con TypeScript.

Para usar TypeScript, primero debes instalarlo:

npm install -D typescript

Una vez instalado, puedes renombrar archivos .js a .ts y escribir código con sintaxis de TypeScript.

Vite compilará automáticamente el código TypeScript.

3. Usar recursos estáticos

Vite admite el uso de recursos estáticos como imágenes, fuentes, etc.

Podemos colocar estos recursos en el directorio `public`, o usar una declaración `import` para importarlos.

¿Cómo utilizar el directorio `public`?

Coloca la imagen `logo.png` en el directorio `public` y luego usa `/logo.png` en el código para hacer referencia a la imagen.

4. Usar declaraciones import

5. Usar variables de entorno

Vite admite el uso de variables de entorno para configurar diferentes entornos.

Puedes usar.envun archivo para definir variables de entorno.

Crea un archivo `.env`:

VITE_API_URL=https://api.example.com

Usa las variables de entorno en el código:

const apiUrl = import.meta.env.VITE_API_URL

6. Usar plugins

Vite cuenta con un rico ecosistema de plugins que puede ayudarte a ampliar las funciones de Vite.

Podemos usar plugins de Vite para implementar la minificación de código, la optimización de imágenes, el análisis de código, etc.

Instalar el plugin:

npm install -D vite-plugin-xxx

Configurar el plugin:

Configura el plugin en el archivo `vite.config.js`:

import xxx from 'vite-plugin-xxx'

export default {
  plugins: [
    xxx()
  ]
}

`vite.config.js` es el archivo de configuración principal de los proyectos Vite. Al configurar `vite.config.js`, puedes personalizar varios comportamientos de Vite, como el servidor de desarrollo, las opciones de compilación, los plugins, etc.

A continuación se muestra un ejemplo de configuración de `vite.config.js`:

1. root
   Especifica el directorio raíz del proyecto; por defecto es el directorio de trabajo actual. Aquí se establece en./src, lo que indica que el código fuente del proyecto se coloca en elsrcdirectorio.

2. base
   Especifica la ruta base del proyecto, adecuada para cuando el proyecto se despliega en una subruta. Por ejemplo, si el proyecto se despliega enhttps://example.com/my-app/, entonces se establece en/my-app/。

3. server
   Configuración del servidor de desarrollo:

   • portEspecifica el número de puerto del servidor de desarrollo.

   • openSi se abre automáticamente el navegador al iniciar el servidor de desarrollo.

   • proxyConfigura el servidor proxy para resolver problemas de dominio cruzado. Por ejemplo, las/apisolicitudes que comiencen con se redirigen mediante proxy ahttp://localhost:8080。

4. build
   Configuración de compilación:

   • outDirEspecifica el directorio de salida de la compilación.

   • assetsDirEspecifica el directorio de almacenamiento de recursos estáticos (como imágenes, fuentes).

   • sourcemapSi se generan archivos sourcemap para facilitar la depuración.

   • minifySi se minifica el código,terseres la herramienta de minificación predeterminada.

   • rollupOptionsConfigura las opciones de empaquetado de Rollup, como dependencias externas y división de código.

5. plugins
   Configura los plugins de Vite. Aquí se utiliza@vitejs/plugin-vueel plugin para soportar proyectos Vue.

6. resolve.alias
   Configura alias de rutas. Por ejemplo, mapea@alsrcdirectorio, para facilitar su referencia en el código.

7. css.preprocessorOptions
   Configura las opciones del preprocesador CSS. Por ejemplo, inyecta globalmente el archivo de variables SCSS.

8. envPrefix
   Configura el prefijo de las variables de entorno. De forma predeterminada, Vite solo carga lasVITE_variables de entorno que comiencen con el prefijo.