• 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.

The post Cómo optimizar tu Flujo de Trabajo en WordPress aprovechando la Recarga en Caliente de Vite appeared first on HERNANDO J. CHAVES | DESARROLLADOR WORDPRESS.

Aquí es donde Vite puede ser una solución efectiva. Vite es un builder de módulos de desarrollo rápido que aprovecha la potencia de los módulos ES nativos del navegador para ofrecer una experiencia de desarrollo fluida y rápida. En este artículo, vamos a aprender una forma de utilizar empaquetadores como Vite para optimizar el flujo de trabajo en la creación de temas para WordPress.

Importancia del Uso de Empaquetadores

Los empaquetadores son herramientas esenciales en el desarrollo moderno de sitios web. Nos permiten:

• Combinar y minimizar archivos CSS y JavaScript para mejorar el rendimiento del sitio.
• Utilizar módulos ES6 y otras funcionalidades modernas del lenguaje que no son nativamente soportadas por todos los navegadores.
• Automatizar tareas repetitivas como la recarga del navegador, preprocesado de CSS (Sass, Less), y la optimización de imágenes.
• Garantizar un código más limpio y estructurado, facilitando el mantenimiento y la colaboración en equipos.

1. Instalación de Vite

Lo primero que necesitas para instalar Vite, es tener Node.js instalado en tu máquina. Luego, puedes crear un nuevo proyecto con Vite siguiendo estos pasos:

    // Inicia un nuevo proyecto
    cd my-wordpress-theme
    npm install -D vite       
    

2. Estructura del Proyecto

Organiza tu proyecto para facilitar el desarrollo. Aquí tienes una estructura básica:

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

3. Integración con WordPress

Asegúrate de que WordPress cargue los archivos generados por Vite. En el archivo functions.php de tu tema, añade el siguiente código:

    function enqueue_vite_assets() {
        wp_enqueue_script('vite-js', get_template_directory_uri() . '/dist/assets/scripts.js', array(), null, true);
        wp_enqueue_style('vite-css', get_template_directory_uri() . '/dist/assets/custom.css', array(), null);
    }
    add_action('wp_enqueue_scripts', 'enqueue_vite_assets');
    

En este caso hemos vinculado los archivos finales compilados en la carpeta «dist/», pero si aún estas en étapa de desarrollo debes reemplazar la ruta de los archivos encolados en «dist/» por «src/».

4. Configurando Vite en un tema de WordPress

1. Importación de Módulos

Para empezar, necesitas importar las herramientas básicas que utilizarás en tu configuración de Vite.

        // Importa el método "resolve" del módulo "path"
        import { resolve } from 'path';

        // Importa el método "defineConfig" de "vite"
        import { defineConfig } from 'vite';
    

2. Configuración Básica de Vite

Aquí es donde definimos la configuración principal de Vite y la exportamos. Esta configuración básica es crucial para que Vite reconozca y aplique los ajustes que queremos.

        // Exporta la configuración del proyecto Vite usando "defineConfig", lo que permite a Vite reconocer y aplicar esta configuración.
        export default defineConfig({
            // Define la base pública del proyecto.
            base: '/',
        });
    

3. Opciones de Construcción

Para optimizar y gestionar los recursos de manera eficiente, configuramos Rollup, el bundler que Vite utiliza por debajo, con opciones específicas:

      build: { // Configuración de las opciones de construcción 
        rollupOptions: { // Opciones específicas para Rollup, el bundler que utiliza Vite por debajo
          input: { // Define las entradas del bundle
            custom: resolve(__dirname, 'src/css/custom.css'), // Especifica la ruta del archivo CSS personalizado como una entrada
            scripts: resolve(__dirname, 'src/js/scripts.js') // Especifica la ruta del archivo JavaScript como una entrada
          },
          output: { // Configuración de la salida del bundle
            entryFileNames: 'js/[name].js', // Define el formato de los nombres de los archivos de entrada
            assetFileNames: infoFile => { // Función para definir los nombres de los archivos de activos (como CSS y otros)
              const name = infoFile.names && infoFile.names.length > 0 ? infoFile.names[0] : 'default'; // Obtiene el nombre del archivo, o usa 'default' si no hay nombres
              if (name.endsWith('.css')) { // Si el nombre del archivo termina en '.css'
                return `css/${name}`; // Almacena los archivos CSS en la carpeta 'css'
              }
              return name; // De lo contrario, devuelve el nombre tal cual
            }
          }
        }
      },
      
    

4. Definir la Raíz del Proyecto

Este paso es crucial para establecer la raíz del proyecto correctamente, utilizando resolve para obtener la ruta absoluta del directorio actual:

        // Define la raíz del proyecto utilizando "resolve" para obtener la ruta absoluta del directorio actual (__dirname)
        root: resolve(__dirname),

    

5. Plugins

Para una mayor flexibilidad y funcionalidad, puedes incluir plugins. Por ejemplo, podrías necesitar un plugin para manejar la recarga de archivos PHP, para el manejo de imágenes etc:

        plugins: [ // Define un array de plugins que Vite utilizará
             ]
      
    

Conclusión

Implementar Vite en el desarrollo de un tema para WordPress puede mejorar significativamente la experiencia de desarrollo. Desde la optimización de la carga de recursos hasta la gestión eficiente de dependencias y la actualización en tiempo real, Vite ofrece herramientas poderosas que pueden solucionar muchos de los problemas comunes que enfrentan los desarrolladores. Con esta configuración básica, puedes empezar a disfrutar de un entorno de desarrollo más rápido y eficiente.

The post Cómo usar Vite JS en un tema de WordPress Paso a Paso appeared first on HERNANDO J. CHAVES | DESARROLLADOR WORDPRESS.