Contáctame

Cómo optimizar tu Flujo de Trabajo en WordPress aprovechando la Recarga en Caliente de Vite

Escrito por

Hernando J Chaves

Lectura

7 minutos

category Categoría

Desarrollo, Themes WP, Vite

Inicio >> Blog >> Cómo optimizar tu Flujo de Trabajo en WordPress aprovechando la Recarga en Caliente de Vite
Compartelo

En un artículo anterior vimos cómo integrar Vite a un tema WordPress para automatizar algunos procesos y mejorar el flujo de trabajo, en este artículo complementario vamos a aprender cómo aplicar el módulo de recarga en caliente de Vite aplicado al desarrollo de temas de WordPress, es decir que la página se recarga ante cualquier cambio que hagamos cuando estamos trabajando en un ambiente de desarrollo.  Si alguna vez has trabajado sin una herramienta de recarga en caliente, sabes lo tedioso que puede ser el proceso de desarrollo. Entre los problemas más comunes se encuentran:

  • Largos tiempos de espera para ver cambios: Cada vez que se realiza una modificación en el código es necesario recargar manualmente el navegador lo que consume tiempo y corta el flujo de trabajo.
  • Errores difíciles de detectar: Sin recarga en caliente es fácil pasar por alto pequeños errores que podrían haberse solucionado rápidamente al ver los cambios instantáneamente.
  • Perdida de productividad: La necesidad de recargar constantemente el navegador no solo es frustrante, sino que también disminuye la eficiencia del desarrollo.

¿Cómo Funciona?

Cuando realizas un cambio en tu código, Vite automáticamente detecta la modificación y actualiza solo la parte afectada de la página. Esto es posible gracias a los módulos ES nativo del navegador, que permiten una integración más rápida y eficiente. En lugar de reconstruir todo el proyecto byte solo recopila el módulo específico que ha cambiado y lo inyecta en la página.

Hot Reload de Vite en el desarrollo de temas de WordPress

Configurando el archivo vite.config.js

Lo primero que vamos a hacer es configurar el archivo vite.config.js de Vite para que detecte los archivos .php y envie una señal al servidor y recargue la página, para eso debes agregar las siguientes lineas de código en la sección de plugins:


        //Archivo vite.config.js
	plugins: [ // Define un array de plugins que Vite utilizará
            {
				name: 'php', // Nombre del plugin 
				handleHotUpdate({ file, server }) { // maneja la actualización en caliente
					if (file.endsWith('.php')) { // Comprueba si el archivo que ha cambiado termina en '.php'
					server.ws.send({ type: 'full-reload' }); // Envía una señal al servidor para recargar completamente la página si es un archivo PHP
					}
				}
            }
        ]

Configurando el archivo funtions.php

En el archivo functions.php de tu tema de WordPress, vamos a definir algunas constantes, la primera nos servirá para detectar si estamos en un entorno de producción o de desarrollo:


        if ( ! defined( 'DEV' ) ) define( 'DEV', false );
        define('URL_FILE', get_template_directory_uri() . '/dist');
        const URL_ASSETS = DEV ? 'http://localhost:5173/src' : URL_FILE;

Entonces cuando DEV sea igual a true significa que estamos en un entorno de desarrollo y los archivos seran tomados de la carpeta «src/» y cuando DEV sea false, estaremos en un entorno de producción y encolaremos los archivos que estan en la carpeta «dist» así:


        const URL_ASSETS = DEV ? 'http://localhost:5173/src' : URL_FILE . '/dist';

Aquí el puerto 5173 es el que abre vite cuando ejecutamos en la consola:


        npm run dev

Ahora vamos a encolar nuestros archivos teniendo en cuenta esta estructura de archivos:


src
└── assets
    ├── js
    │   └── scripts.js
    └── css
        └── custom.js

Nuestra función de encolamiento dentro de tu archivo functions.php se veria así:


    function hch_scripts() {
        if( DEV ):
            wp_enqueue_script('vite-reload', 'http://localhost:5173/@vite/client', [], null, false);
        endif;

        wp_enqueue_script('scripts', URL_FILES . '/js/scripts.js', [], '1.0.0', true );
        wp_enqueue_style('custom', URL_FILES . '/css/custom.css', [], '1.0.0', 'all');
    }
    add_action( 'wp_enqueue_scripts', 'hch_scripts' );

Dos cosas importantes a considerar, la primera es que aquí la variable URL_FILES es dinámica en función del entorno de desarrollo en que nos encontremos, y la segunda es que hemos encolado un archivo javascript de vite que es el que hará la magia de la recarga y solo se encolará si estamos en desarrollo:


    if( DEV ):
        wp_enqueue_script('vite-reload', 'http://localhost:5173/@vite/client', [], null, false);
    endif;

En estos momentos en tu consola debe estar saliendo el siguiente error:


    Uncaught SyntaxError: Cannot use import statement outside a module

Este error ocurre cuando intentas usar la declaración «import» en un archivo javascript que no está configurado como un módulo ES. Para solucionarlo necesitas asegurarte que tu archivo JavaScript esté siendo tratado como un módulo ES, y eso lo conseguimos con estas lineas de código:


    
    function hch_script_loader_tag( $tag, $handle )
    {
        if( $handle === 'vite-reload' ):
            return str_replace(' src', ' type="module" src', $tag);
        endif;
        return $tag;
    }
    add_filter('script_loader_tag', 'hch_script_loader_tag',10, 2);

Aquí lo que hacemos es verificar que el archivo sea el que encolamos de Vite y luego reemplazamos el atributo «src» por el atributo «type» que es el que soluciona el problema.

Y listo!

Implementar la recarga en caliente con Vite revoluciona el flujo de trabajo de desarrollo web. Eliminar la necesidad de recargar manualmente el navegador cada vez que se realiza un cambio ahorra tiempo y mejora significativamente la productividad. Además, al ver los resultados de los cambios en tiempo real, los desarrolladores podemos detectar y corregir errores de manera más eficiente, lo que lleva a un producto final de mayor calidad.
Al incorporar Vite en tu desarrollo, no solo optimizas el tiempo y esfuerzo, sino que también enriqueces la experiencia de desarrollo, haciéndola más fluida y gratificante.

Compartelo