Vite - La Herramienta de Desarrollo Frontend de Próxima Generación

El servidor de desarrollo proporciona mejoras de funciones avanzadas sobre los módulos ES nativos, una colocación modular extremadamente rápida, por ejemplo, mientras que el comandante agrupa tu código en ES build durante el desarrollo y lo agrupa en producción. ¿Y qué más puedo decir sobre ES build? Mientras hace la preagrupación de dependencias, mientras que roll up hace alguna preconfiguración para generar activos estáticos altamente optimizados para producción.

El problema que estamos tratando de resolver es la velocidad del ciclo de retroalimentación durante el desarrollo. Si usas React, especialmente en un proyecto grande, probablemente hayas notado que la colocación de módulos en caliente lleva a veces dos, tres, cuatro, cinco, dependiendo de tu máquina, y tienes que cambiar tu configuración de Webpack, JS o habilitar el almacenamiento en caché, etc., solo editando un archivo. Es posible que tengas que esperar unos segundos para que se actualicen cuatro cosas en la pantalla. Este problema se debe a la necesidad de agrupar. No hay forma de que el navegador admita realmente el código modularizado. Esa es la razón por la que tenemos browserify, Webpack, Parcel, etc., para que el código modularizado pueda convertirse en un solo archivo que se pueda ejecutar en el navegador. Todos sabemos que la mayoría de los navegadores modernos admiten nativamente los módulos ES. Esto significa que durante el desarrollo hay una gran cantidad de trabajo que ya no necesitamos hacer porque el navegador ahora puede manejarlos de forma nativa. En VIT, vas a escribir tu código como módulos ES nativos. Y VIT tomará estos módulos ES y luego analizará el archivo y buscará tus declaraciones de importación y luego enviará solicitudes HTTP para cada módulo al servidor de desarrollo. Entonces, el servidor de desarrollo simplemente sirve estos módulos ya que es un análisis muy rápido. Sí. ¿Qué más? Entonces, el archivo index HTML aquí es el punto de entrada en los proyectos de VIT, no main.js que a menudo se ve en proyectos de Webpack. Así que piénsalo de nuevo como un servidor de desarrollo. De acuerdo. Poniendo todo esto junto, VIT te proporciona una experiencia de desarrollo extremadamente rápida y eficiente. Hablando de complementos, VIT se puede ampliar mediante complementos, que se basan en la interfaz de complementos de Rollout. Verás más sobre los complementos en un momento. Para iniciar VIT, puedes enviar PM yarn, PM PM. Aquí tienes los comandos que puedes usar.

Y puedes elegir React, Vue, Preact o vanilla VIT. Desafortunadamente, aún no tenemos Angular aquí. Probablemente el próximo año, porque Angular tiene esta configuración muy única, su canal de construcción, herramienta de construcción.

Sí, hagamos una demostración aquí. Vamos a probar vanilla VIT, luego vanilla VIT-to-React. Y si tenemos más tiempo, podemos migrar de CRI a React-Vite. Sí, podemos probarlo aquí, digamos, VIT-demo.

De acuerdo, cierra esto. Ahora, tal vez podamos ejecutar npm init y comenzar a agregar el paquete VIT. Sí, aquí, npm install DashDev-save-vit. Mientras esperamos, podemos crear un archivo de índice aquí. Ese es el punto de entrada. Y revisa, digamos, aquí. Sí, mira aquí, VIT 2.6.2. Eliminemos el script de ejemplo aquí. Cambiémoslo, digamos, a dev. Esto es GitHub Copilot ayudándome. Y build o construyendo el proyecto VIT. Probablemente aquí, preview o bit preview. ¿Entonces, qué son estos? Dev 2. Ejecuta tu proyecto VIT en un entorno de desarrollo aquí. VIT build para construir. Eso creará esto. Entonces, dev, por cierto, ejecutará la aplicación en el puerto 3000. Luego podemos previsualizar la construcción usando este comando de previsualización aquí, que se ejecutará en el puerto 5000. Básicamente, esto te permite previsualizar tu proyecto en producción. Así puedes comparar el entorno de desarrollo y producción de tu aplicación o versión de tu aplicación. Y sí, echemos un vistazo a los módulos de Node aquí. Mira aquí, tenemos CS build, roll-up, un poco de post-CSS. Así que aquí, post-CSS.

Entonces puedes ver, post-CSS funcionará aquí en el cuadro. De acuerdo, tal vez podamos crear un archivo JavaScript aquí que simplemente diga console.log, diga frase de moda. No tengo nada en mente. Entonces tal vez podamos decir hola fit, y luego podemos importar aquí el archivo JavaScript. Entonces, esto es un módulo IS y ESM nativo. Entonces necesitamos declarar aquí qué tipo. Hagamos el tipo módulo. Podemos importar aquí el JavaScript, o podemos usar un import en línea aquí. Luego podemos ejecutar esto ahora. Es tan rápido. De acuerdo. Conectando. Este es el cliente de reemplazo de módulo en caliente. Este bit se conectó y luego vemos que nuestro JavaScript está funcionando. De acuerdo. ¿Y qué hay de CSS? Agreguemos estilo CSS. Estilo. CSS. Y tal vez puedas decir, no sé. Digamos, sí, ese. Y, por supuesto, necesitamos importarlo aquí. Y digamos enlace estilos. Ahí lo tienes. Editemos aquí el color, carmesí, y digamos azul, lo cual actualizará el archivo aquí. Estilo. CSS. Muy rápido, ¿verdad? ¿Y si probamos SAS? Podemos convertir esto a SAS. Pero también tenemos que convertir esto. Editemos el nombre, instalemos solo el SAS sin instalar el nodo SAS. Esto debería funcionar. Ejecutemos dev. Tal vez podamos hacer algo de SAS aquí.

Primero, o podríamos simplemente cortar esto aquí. Y ahí lo tienes, funcionó. Sí, SAS funciona, funciona fácilmente.

¿Y si intentamos convertir esto a React? Sí, ahora necesitamos nuestro React y ReactDOM, ¿verdad? Entonces aquí necesitaríamos importar react-react, y también ReactDOM. Aquí está, archivo JSX. Aquí, dice, OK, solo devuelve la parte de React. Exportémoslo. Y probablemente ahora podamos eliminar esto. O convirtámoslo en un HTML adecuado. Luego peguemos esto. Debería estar aquí. Y necesitaríamos un div aquí. Y podemos poner un ID, así que le daré el nombre root. Entonces es root. Solo regresa aquí, conviértelo a JSX. Y React DOM, root. Solo necesitamos importar esto. Ahí lo tienes. Eso debería hacerlo. ¿Verdad? Y asegurémonos de que esto sea JSX. Rendev. Veamos. Y funcionó con React Fit. Así que también funciona. JSX de forma nativa.

Entonces, sí, el requisito aquí es que debe ser JSX. Puedes forzarte a usar solo JS, pero creo que necesitas agregar un complemento porque JSX porque es el texto JSX y, sabes, en el fondo, esto es más performance que solo forzarte a usar JS. Tiene algo que ver con su AST. OK, ¿y qué hay de TypeScript? Convirtámoslo a TypeScript. TSX.

TSX y luego asegurémonos de que esto también sea TSX. Ahí lo tienes. TypeScript funciona de forma nativa, ¿verdad? Y podemos decir, agregar props aquí. Ahora solo testing, probablemente, aquí en la lista de edición. Sí, debería funcionar. Entonces, ahí lo tienes, un poco básico, un poco, y luego logramos convertirlo a react y react TypeScript.

Entonces, tal vez pueda mostrarte algo sobre un proyecto, un proyecto grande, que se está utilizando aquí. Oh, sí, ya está. Es un gran proyecto de CLA y se convirtió a bit, pero fue solo una copia. Entonces, tuve que hacer algunas ediciones porque no quiero ver toda la aplicación. Entonces, solo hice aquí, lo que llamo esto, posición absoluta, izquierda 8000. Entonces, técnicamente, o básicamente, la interfaz de usuario se movió unos metros a la izquierda y ahora veo un poco, hola, React.js. Entonces, antes, tardaba de 3 a 4 segundos en ver los cambios en CRA. Y luego, una vez que lo mueves, después de moverlo, es como instantáneo, menos de un segundo.

Ok, requisito. Um, por supuesto, necesitas instalar el paquete VIP y luego agregar el complemento necesario. Quiero decir, no necesario, lo siento. Um, solo tengo que agregar TSConfigPath porque estoy usando la URL base o la fuente base aquí. Entonces puedes ver, TSConfig.json a la URL base aquí. Entonces necesito ese complemento para que funcione aquí. Uh, puedes, ya sabes, si encuentras algún error, simplemente puedes buscarlo en Google y verás, terminarás en una documentation o, ya sabes, te enseña cómo solucionarlo usando el complemento y ReactJS X aquí para que no necesites, um, escribir explícitamente import React. Um, qué más para esto es, uh, técnicamente esto es un React TypeScript. Entonces estoy agregando global.js aquí, tipo de referencia a un cliente de Viet, o no tienes que hacer esto si tienes este tipo de cliente de Viet aquí. Entonces sí.

Um, ahí lo tienes. Entonces, una cosa aquí que me gustaría compartir es que si tienes un React grande, um, sí, proyecto y archivos. Los archivos están en JavaScript, no en JSX. No tienes que convertirlos manualmente uno por uno. Puedes escribir un script de Python, puedes ejecutar un script de Python y luego este script simplemente convertirá todos los archivos JS a JSX en unos segundos, uno, dos, listo. Um, sí.

Así que eso es todo. Una migración rápida, rápida de, de CRA a, a VIT. Así que volvamos a nuestras diapositivas.

Entonces sí, PostCSS, no necesitas instalar PostCSS en sí. Viene con soporte de PostCSS de serie. ¿Qué pasa con los CSS módulos? Todo lo que necesitas hacer es asegurarte de que este archivo tenga la extensión .module.css.

Renderizado en el servidor. Entonces, el soporte de SSR aún está en fase experimental. Entonces, en SSR, la idea es que quieres que tu código se ejecute en Node.JS pero estás escribiendo código que utiliza ESM, ¿verdad? Si no estás utilizando la última versión de Node.js con soporte nativo de módulos ES, tu código no se ejecutará, porque las versiones anteriores de Node.js esperan archivos .js comunes. Entonces, sí, la idea en SSR es que puedes usar VIT como middleware dentro de un servidor Node.js existente, ¿verdad? Entonces, si estás haciendo renderizado en el servidor, necesitas controlar tu servidor, digamos un servidor express, luego ejecutar VIT como middleware dentro de él, y luego invocar un método llamado VIT, como puedes ver aquí, SSRLoadModule, y pasar la ruta de tu archivo de entrada del servidor. Ahora, tu entrada del servidor se ejecuta en Node.js, y puede utilizar la misma sintaxis de importación ES para cargar el resto de tu aplicación. ¿En qué se diferencia VIT de X, en comparación con otras soluciones de Bundler de Node? Por ejemplo, aquí está Snowpack. Snowpack también es un servidor de desarrollo nativo de VSM de Node Bundler, que es muy similar en alcance a VIT. Snowpack no maneja la parte de empaquetado, por lo que una de las ventajas de no empaquetar... Primero, puedes utilizar diferentes N-Bundlers para manejar esos archivos, pero la desventaja es que no puedes ser tan dogmático en ciertas áreas como VIT. Entonces, VIT se adhiere a un solo bundler, para que sepas el papel de cómo VIT pudo hacer algo muy específico, pero obtener el máximo rendimiento posible. Por ejemplo, mejora del tiempo de desarrollo. ¿Qué pasa con la comunidad? Increíble. Sí, aquí puedes encontrar un montón de complementos de VIT diferentes. Solo ve a Awesome VIT, verás muchos, la mayoría de ellos son integraciones. Muy útil. ¿Y qué más? Vittland en Discord. Aquí hay muchos desarrolladores inteligentes y serviciales. Puedes hacer preguntas, iniciar canales para obtener ayuda, discusiones, contribuciones, traducciones, TypeScript, CSS, SSR, complementos, Preact, React, Svelte, Vue, integraciones, Fastify, etc. De acuerdo, si quieres saber más sobre VIT.js o ver la documentación, aquí está el sitio web. Así que sí, eso es todo lo que tengo. Muchas gracias por escuchar. Adiós.