Probablemente realizaste muchos proyectos con React, muchos de ellos los creaste utilizando create-react-app. Es normal, esta manera de crear tus proyectos es una práctica muy usual entre los desarrolladores. Pero te preguntaste ¿si hay otras formas de crear proyectos? Por su puesto que sí, hay varias y una de ellas es utilizando Vite.
Tabla de Contenidos
¿Por qué deberías usar Vite?
Si bien con el tiempo, hemos visto herramientas como Webpack, Rollup y Parcel , que mejoraron enormemente la experiencia de desarrollo para los desarrolladores frontend. Hoy en día no es raro que los proyectos a gran escala contengan miles de módulos. Estamos empezando a encontrar un cuello de botella en el rendimiento de las herramientas basadas en JavaScript: a menudo puede llevar una espera excesivamente larga (¡algunas veces hasta minutos!) Para activar un servidor de desarrollo, e incluso con HMR, las ediciones de archivos pueden tardar un par de segundos en reflejarse en el navegador. El ciclo de retroalimentación lento puede afectar en gran medida la productividad y la felicidad de los desarrolladores.
Vite tiene como objetivo abordar estos problemas aprovechando los nuevos avances en el ecosistema: la disponibilidad de módulos ES nativos en el navegador y el surgimiento de herramientas JavaScript escritas en lenguajes de compilación a nativos.
Y ¿De dónde viene toda esta iniciativa para optimizar y resolver estos problemas? Pues del creador de Vue Js, Evan You. Para todos aquellos que no conocen la trayectoria de Evan es bueno mencionar que trabajo para Meteor Development Group y posteriormente paso un par de años en Google Creative Lab donde también formo parte de los inicios de Angular. Fue allí, en Mountain View que decidió ser un rebelde e ir en contra corriente para crear su propia librería de JavaScript, en donde las cosas se mantengan simples y el rendimiento sea el mejor. Es así como nació Vue Js, por eso no me sorprende en nada los objetivos propuestos por Vite Js. También es obvio que existe una coincidencia, ambos proyectos son nombrados con palabras en francés.
Vamos a la acción.
Evan en su cuenta de Twitter nos indica las diferentes maneras de como podemos iniciar un proyecto con Vite.
Ambas nos ayudarían a lograr nuestro objetivo, pero esta vez yo utilizare:
npm init vite@latest
Ejecutamos el comando y a continuación nos pregunta el nombre del proyecto. Esta vez lo nombraré como vite-project.
Luego debemos indicar el framework a utilizar, elegimos react.
¡Y eso es todo! Ya creamos nuestro primer proyecto con Vite en cuestión de segundos. Para finalizar nos indica 3 sencillos pasos para hacerlo correr.
Ahora es cuando a más de uno les habrá saltado un error y comenzaran a sentirse frustrados. Esperen un segundo respiren profundo que acá les traigo la solución. El error más común y por el cual no llega a funcionar es porque la versión de NodeJs no es la adecuada. Para que ViteJs comience a andar necesitamos la versión 12 o posterior. Vamos a solucionarlo.
Resolviendo problemas de versión.
La manera más sencilla y eficiente de resolver los problemas de versión de NodeJs es utilizando una maravillosa herramienta de gestión de versiones para NodeJs llamada nvm. Para instalarla ejecutamos el siguiente comando.
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
Una vez instalado, reinicia tu terminal y ya podemos ver las versiones de NodeJs que tenemos en nuestro sistema con nvm list.
Luego procedemos a verificar que versiones están disponibles en los repositorios para realizar la instalación de la versión correcta para la tarea que deseamos realizar. Para ello utilizo el comando nvm ls-remote --lts. A continuación nos mostrará una larga lista con las versiones de NodeJs.
Una vez identificada la versión que requerimos procedemos a instalar. Para esta tarea en específico instalamos la versión 12.2.
Ahora verificamos con nvm list la versión de NodeJs con la cual está trabajando el sistema. También es bueno mencionar que con nvm podremos cambiar las diferentes versiones de NodeJs de acuerdo a la necesidad que tengamos, sin tener que instalar o desinstalar. Todas las versiones coexistirán, solo tendremos que activarlas o desactivarlas.
¡Ahora si a iniciar el proyecto!
Lo logramos ViteJs ya está funcionando.
¡Felicidades! Acabas de crear tu primer proyecto con ViteJs.
