Primeros pasos con Vite: la herramienta de compilación definitiva

A medida que las aplicaciones web se vuelven más ricas en funciones, la necesidad de herramientas de construcción rápidas y eficientes continúa creciendo en demanda.

Vite es una herramienta de compilación moderna que proporciona un servidor de desarrollo ultrarrápido y un proceso de compilación optimizado, lo que permite a los usuarios optimizar su flujo de trabajo y mejorar la experiencia del usuario final.

Explorará cómo comenzar con Vite, cubriendo su proceso de instalación, características esenciales y comandos de la interfaz de línea de comandos (CLI).

Inicializar un proyecto Vite

Antes de que puedas usar Vite, debes instalar Node.js y Node Package Manager en su sistema. Después de instalar estos dos paquetes, puede proceder a crear un proyecto con Vite.

Aquí se explica cómo inicializar un proyecto con Vite usando npm:

npm init invitar

Cuando ejecuta este comando, crea un nuevo proyecto Vite en su directorio de trabajo actual. El comando le solicita que realice elecciones de configuración fundamentales para configurar su nuevo proyecto Vite.

Aquí hay un desglose de las opciones que el comando le pide que seleccione:

1. Nombre del Proyecto. Cuando ejecuta el comando, le solicita que proporcione un nombre para su nuevo proyecto. El nombre que proporcione también aparecerá en el paquete.json y sirve como el nombre del directorio de su proyecto.
2. Elija un Marco. Este mensaje le pedirá que elija un marco para su proyecto. Actualmente, Vite es compatible con marcos front-end populares como React, Vue, Angular y una opción Vanilla para código JavaScript sin formato.
3. Elija una variante. Esto le pedirá que elija una variante para su proyecto, cubriendo alternativas como JavaScript y su lenguaje subconjunto TypeScript.

Después de proporcionar la información requerida, Vite generará una nueva estructura de proyecto en su directorio de trabajo actual. La estructura representará la configuración básica de un proyecto, incluida una paquete.json presentar un origen directorio con un índice.html y principal.js archivo, y un público directorio.

Después de crear la estructura del proyecto, puede navegar al directorio del proyecto ejecutando cd . Una vez que lo haya hecho, instale cualquier dependencia adicional que su proyecto pueda requerir usando el instalar npm dominio.

Para iniciar un servidor de desarrollo y monitorear cualquier cambio realizado en su proyecto, ejecutará el npm ejecutar dev comando dentro de la terminal de su proyecto.

Características de Vite

Las funciones de Vite se centran en agilizar el proceso de creación y mejorar la experiencia de creación web.

Servidor de desarrollo rápido

El servidor de desarrollo de Vite utiliza módulos ES nativos y carga diferida de módulos, lo que permite una velocidad increíble. Esto permite bucles de retroalimentación rápidos y tiempos de inicio ultrarrápidos.

Proceso de construcción optimizado

Vite mejoró su procedimiento de compilación para producir código minimizado, optimizado y listo para la producción. Además, crea un archivo de manifiesto que puede almacenar en caché los recursos de bust y version.

Soporte para varios marcos front-end

Vite es compatible con varios marcos front-end, incluidos Vue y marcos similares como React Js y Angular Js. Esto permite a los desarrolladores elegir su marco preferido y aprovechar las poderosas capacidades de Vite.

Reemplazo de módulo caliente (HMR)

La función de reemplazo de módulo activo (HMR) de Vite permite actualizaciones rápidas y sin problemas de la aplicación sin necesidad de actualizar la página completa. Esto hace que el proceso de desarrollo sea más rápido y eficiente.

Preprocesamiento CSS e Integración PostCSS

Vite admite el preprocesamiento de CSS, incluidos Sass, Less y Stylus. También se integra con PostCSS, lo que permite transformaciones y optimizaciones adicionales al CSS.

Vite viene con muchas otras características, incluida la compatibilidad con TypeScript, JSX y WebAssembly. Con el lanzamiento de Vite v4.0.4, la comunidad de desarrolladores de Vite ha crecido y ha estado manteniendo activamente el software, agregando nuevas funciones regularmente.

Interfaz de línea de comandos (CLI) de Vite

La interfaz de línea de comandos (CLI) de Vite es una herramienta útil para personalizar el comportamiento de Vite. Proporciona una variedad de comandos esenciales que también ayudan a agilizar el proceso de desarrollo. Estos son algunos de los comandos CLI cruciales:

construir

Este comando construirá la aplicación para un entorno de producción, optimizando y minimizando el código para que esté listo para implementar. Con este comando, puede asegurarse de que su aplicación sea lo más rápida y efectiva posible y esté lista para su distribución a sus usuarios.

vista previa

Este comando le permite obtener una vista previa del código generado antes de implementarlo en producción. Si desea asegurarse de que todo se vea y funcione como se espera y que no haya problemas aparentes o problemas que requieran atención, este es un comando útil para ejecutar.

optimizar

optimizar está disponible en Vite 2.6 y versiones posteriores que analizan el código del proyecto y generan compilaciones de producción optimizadas mediante la ejecución del árbol agitación, operaciones de división de código e incrustación de pequeños activos directamente en la compilación final para reducir las solicitudes necesarias para cargar el aplicación

optimizar se ejecuta automáticamente durante el construir comando, que genera compilaciones de producción optimizadas. También puede ejecutarlo por separado para verificar el tamaño y el rendimiento de la compilación

Archivo de configuración de Vite

En Vite, el archivo de configuración define varias opciones para el proceso de construcción. El archivo de configuración de Vite usa JavaScript y la sintaxis de los módulos ES6.

De forma predeterminada, debe nombrar su archivo de configuración vite.config.js y colóquelo en el directorio raíz del proyecto.

Estas son algunas de las opciones más utilizadas en el archivo de configuración de Vite:

• raíz. Especifica el directorio raíz del proyecto.
• servidor. Configura el servidor de desarrollo. Incluye opciones para configurar el host, el puerto y las solicitudes de proxy a un backend de API.
• complementos. Permite agregar complementos al proceso de compilación de Vite. Un complemento es una función que modifica el proceso de compilación de alguna manera, como agregar soporte para un nuevo formato de archivo o transformar el código fuente.
• resolver. Esto configura cómo Vite resuelve las importaciones en el proyecto. Incluye opciones para especificar alias, extensiones y directorios de módulos.

Aquí hay un ejemplo de un archivo de configuración de Vite:

importar { definirConfig } de'vitar';
importar camino de'camino';
exportarpor defecto defineConfig({
 servidor: {
 puerto: 3000,
 abierto: verdadero,
 },
 resolver: {
 alias: {
'@': ruta.resolve (__dirname, './origen'),
 },
 },
 complementos: [],
});

Este archivo de configuración configura un proyecto Vite básico con:

• un servidor de desarrollo local que se ejecuta en el puerto 3000
• un alias para el origen directorio
• sin complementos

Vite tiene una comunidad fuerte

Varios recursos en línea explican con gran detalle cómo usar Vite con marcos populares como React, Vue y Angular.

Además, hay una gran cantidad de información sobre el uso efectivo de Vite en su documentación oficial. Con estos recursos disponibles, es posible integrar Vite en su próximo proyecto.