Vite v4.0.4 se lanzó el 3 de enero de 2023 y mejora las funcionalidades del entorno de desarrollo de Vite y llega solo cinco meses después de Vite 3. La nueva versión incluye nuevas funciones y actualizaciones que harán que la experiencia de desarrollo de JavaScript sea más rápida y sólida que antes.
Aquí, discutiremos qué es Vite, las características y actualizaciones significativas que se encuentran en Vite 4.
¿Qué vito?
La palabra "vite" en sí misma significa "rápido". Se trata de una herramienta de creación de front-end y un servidor de desarrollo que está diseñado para proporcionar una experiencia de desarrollo más rápida, ligera y sencilla. Sirve su código durante el desarrollo, empaqueta sus archivos para producción y permite una fácil integración con varios Marcos y bibliotecas de JavaScript, como Vue, React, Preact y Svelte.
Vite ha experimentado numerosas mejoras en los últimos dos años, y Vite 4 trae varias características nuevas y mejoradas.
1. Resumen 3
Enrollar es un paquete de módulos de JavaScript que permite a los desarrolladores agrupar diferentes Módulos JavaScript en un solo archivo. Esto, a su vez, mejora el rendimiento de la aplicación al reducir la cantidad de solicitudes que el navegador debe realizar para cargar el código.
Vite ahora usa el paquete acumulativo 3 durante el tiempo de compilación. La versión 3 de Vite usó el Rollup 2, pero luego del lanzamiento del Rollup 3 en octubre de 2022, la nueva versión de Vite vino con una actualización importante al Rollup 3.
Debe consultar la guía de migración del paquete acumulativo antes de actualizar al paquete acumulativo 3, ya que pueden surgir problemas, aunque el paquete acumulativo 3 es en su mayoría compatible con el paquete acumulativo 2.
2. Nuevo complemento React usando Speedy Web Compiler (SWC)
SWC es un compilador de JavaScript súper rápido escrito en Rust. SWC y Babel Ambos son compiladores de JavaScript que transforman su código a lo que es compatible con los navegadores, pero SWC afirma ser más rápido que Babel.
Dado que Vite v3 usó Babel, v4 viene con la introducción de SWC como reemplazo o alternativa, especialmente para proyectos React.
Si bien Vite continúa admitiendo Babel, Vite 4 presenta dos complementos (vitejs/plugin-react y vitejs/plugin-react-swc) con diferentes ventajas y desventajas para los proyectos de React.
El complemento vitejs/plugin-react
Este complemento proporciona un reemplazo rápido del módulo en caliente mientras usa un tamaño de paquete mínimo, usando esbuild y Babel. También ofrece la flexibilidad adicional de poder utilizar la canalización de transformación de Babel.
El reemplazo del módulo en caliente permite la actualización de grasa. Permite a los desarrolladores actualizar módulos en una aplicación en ejecución sin tener que actualizar toda la página. Siga la demostración a continuación para instalar el complemento en su proyecto.
npm instalar @vitejs/plugin-react
Siga el código a continuación para importar el complemento a su proyecto;
importar { definirConfig } de'vitar'
importar reaccionar de'@vitejs/complemento-reaccionar'
exportarpor defecto defineConfig({
complementos: [reaccionar()],
})
El complemento vitejs/plugin-react-swc
Este es un nuevo complemento que utiliza esbuild durante la compilación y Speed Web Compiler durante el desarrollo.
Al reemplazar Babel con SWC, el complemento tiene como objetivo acelerar significativamente el proceso de desarrollo, particularmente para proyectos que no requieren extensiones React no estándar.
Aquí se explica cómo instalar el complemento;
npm i @vitejs/plugin-react-swc
Importarlo a su proyecto de la siguiente manera;
importar { definirConfig } de"vitar";
importar reaccionar de"@vitejs/complemento-reaccionar-swc";
exportarpor defecto defineConfig({
complementos: [reaccionar()],
});
3. Importación de CSS como una cadena
Esta función brinda una solución al comportamiento de doble carga de Vite 3 CSS que ocurre al importar la exportación predeterminada de un archivo CSS, por ejemplo:
importar cssCadena de'./global.cssPara evitar este comportamiento, Vite 4 introduce el uso del modificador de sufijo de consulta en línea?. Aquí hay una demostración de la sintaxis;
importar cssCadena de'./global.css? en línea'Por lo tanto, la exportación predeterminada de CSS v3 ha quedado obsoleta.
4. Variables de entorno
Vite actualizó sus dependencias en dotenv y dotenv-expand. Las nuevas versiones que se están utilizando son dotenv 16 y dotenv-expand 9, respectivamente. Esta actualización requerirá que ajuste valores que incluyan los caracteres "#" o "`" entre comillas para garantizar una funcionalidad adecuada. Aquí hay un ejemplo;
SECRET_HASH="algo-con-a-#-picadillo"Para facilitar el proceso de actualización de archivos ENV, Vite ha recomendado el uso de la interfaz de línea de comandos dotenv. Este es un complemento opcional que puede ayudar a garantizar que los archivos ENV sean consistentes en diferentes máquinas, entornos o miembros del equipo. Puede ayudar a que el proceso de actualización de archivos ENV sea menos tedioso.
Otras actualizaciones, arreglos y migración a Vite v4.0.4
Vite ha agregado más accesos directos a la interfaz de línea de comandos. Para ver una lista de todos los atajos, presione h durante el desarrollo.
La versión moderna del navegador ahora también apunta a safari14 de forma predeterminada para una mayor compatibilidad con ES2020. Hay soporte para el paquete de parches cuando se empaquetan previamente las dependencias, hay mensajes de error mejorados durante SSR y mucho más.
