Conoce la actualización de Laravel con Vite

¿Estás interesado en seguir llevando cursos de Laravel desde cero hasta el más avanzado? Entonces, esta información es de vital importancia para ti: la nueva actualización de Laravel con Vite. Pero, ¿qué es Vite y cómo puede ayudar a mejorar este framework? En el siguiente artículo, te explicaremos todo sobre Laravel Vite y por qué debes aprender a usarlo.

¿Qué es Vite en Laravel?

Vite es una herramienta moderna de construcción frontend que proporciona un entorno de desarrollo extremadamente rápido y agrupa el código para la producción. Cuando se construyen aplicaciones con Laravel, por lo general se utiliza Vite para empaquetar los archivos CSS y JavaScript de la aplicación en activos listos para producción.

Laravel se integra perfectamente con Vite proporcionando un plugin oficial y una directiva Blade para cargar los activos para desarrollo y producción. Por tanto, a partir de la actualización de Laravel, Vite es la herramienta por defecto de este framework.

Características de Vite

A un nivel muy básico, desarrollar utilizando Vite no es muy diferente de utilizar un servidor de archivos estático. Sin embargo, Vite proporciona muchas mejoras para soportar varias estructuras que se ven típicamente en configuraciones basadas en el empaquetado de aplicaciones. Estas son las principales características de Vite:

• Arranque instantáneo del servidor
• Reemplazo de Módulos en Caliente (HMR, por sus siglas en inglés) ultrarrápido
• Construcción optimizada
• Plugins universales
• API totalmente tipificadas

Te puede interesar: Blade Laravel: 5 razones por las que deberías usarlo

¿Por qué Vite?

Antes de cambiar a una nueva herramienta, es una buena idea pensar por qué quieres hacerlo. Para algunos ya es suficiente ser el nuevo frontend por defecto de Laravel, pero hablemos también de algunos detalles.

El principal beneficio es la mejora general del rendimiento. Vite es más rápido en el inicio de un nuevo servidor de desarrollo, la agrupación de activos y su actualización que otras herramientas como webpack.

Vite está aprovechando los nuevos avances en el ecosistema, como la disponibilidad de módulos nativos en el navegador y el aumento de herramientas JavaScript escritas en lenguajes de compilación nativos.

Laravel Vite vs. Laravel Mix

Antes de la transición a Vite, las nuevas aplicaciones Laravel utilizaban Mix, que es impulsado por webpack, al agrupar los activos. Vite se centra en proporcionar una experiencia más rápida y productiva en la creación de aplicaciones ricas en JavaScript. Por tanto, si estás desarrollando una aplicación de página única (SPA), Vite será el ajuste perfecto.

Vite también funciona bien con las tradicionales aplicaciones renderizadas del lado del servidor con JavaScript, incluyendo aquellas que utilizan Livewire. Sin embargo, carece de algunas características que Laravel Mix soporta, como la capacidad de copiar activos arbitrarios en la compilación que no están referenciados directamente en la aplicación JavaScript.

Te puede interesar: Descubre los 7 tipos de sitios web más populares

Configuración de Laravel Vite

Vite se configura a través de un archivo vite.config.js en la raíz de tu proyecto. Eres libre de personalizar este archivo en función de tus necesidades, y también puedes instalar cualquier otro plugin que requiera tu aplicación, como @vitejs/plugin-vue o @vitejs/plugin-react.

El plugin Laravel Vite requiere que especifiques los puntos de entrada para tu aplicación. Estos pueden ser archivos JavaScript o CSS, e incluyen lenguajes preprocesados como TypeScript, JSX, TSX y Sass.

Si estás construyendo una SPA, incluyendo aplicaciones construidas usando Inertia, Vite funciona mejor sin puntos de entrada CSS. En su lugar, debes importar tu CSS a través de JavaScript. Normalmente, esto se haría en el archivo resources/js/app.js de tu aplicación. El plugin de Laravel también soporta múltiples puntos de entrada y opciones de configuración avanzadas como puntos de entrada SSR.

Vamos a configurar una aplicación Laravel demo para demostrar la recarga en caliente. En primer lugar, vamos a crear un nuevo proyecto de demostración:

laravel new blade-hot-reload --git
cd blade-hot-reload

Una vez instalado el proyecto, añadimos lo siguiente en algún lugar del <head/> del archivo welcome.blade.php que se encuentra en resources/views/:

@vite('recursos/js/app.js')

A continuación, deberás instalar las dependencias de NPM y ejecutar el comando dev:

npm install
npm run dev

¡Y ya está! Si realizas un cambio en un archivo blade o en una ruta, debería reflejarse de forma inmediata, dependiendo de la configuración de tu entorno de desarrollo local. De esta forma, podrás ejecutar Laravel Vite.

¡Ahora ya sabes qué es Laravel Vite! Como ves, esta actualización utiliza convenciones sensatas que deberían funcionar para la mayoría de las aplicaciones; sin embargo, a veces puede que necesites personalizar el comportamiento de Vite.

¿Te gustaría aprender a programar? En Coders Free contamos con diversos cursos online con todos los niveles de programación, así como servicios de diseño gráfico para hacer crecer tu negocio. ¡Contáctanos para obtener más información!