Como usar Vite JS en WordPress – Desarrollo de temas de WordPress

En la creación de temas para WordPress, uno de los problemas comunes que enfrentan los desarrolladores es la gestión del código y los recursos de manera eficiente. Sin las herramientas adecuadas, el flujo de trabajo puede volverse engorroso y propenso a errores, lo que lleva a una disminución en la productividad y calidad del código.

Para resolver este problema, es crucial adoptar configuraciones iniciales y optimizaciones que faciliten el desarrollo, mantenimiento y escalabilidad de nuestros temas. En este artículo, vamos a explorar cómo 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.

Uso de Vite en la Creación de Temas para WordPress

Vite es una herramienta de construcción rápida y ligera que ofrece una excelente experiencia de desarrollo. A continuación, te mostraré cómo integrarla en la creación de un tema de WordPress.

1. Instalación de Vite

Primero, necesitas 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 vite@latest        
    

Instala las dependencias

    
       npm install
    

2. Configuración del Proyecto

Configura el archivo vite.config.js para asegurarte de que los archivos se compilen y se guarden en el directorio correcto de tu tema de WordPress:

    
    // Importa la función `resolve` del módulo 'path' para resolver rutas de archivos y directorios.
    import { resolve } from 'path'

    // Importa la función `defineConfig` del módulo 'vite' para definir la configuración de Vite.
    import { defineConfig } from 'vite'

    // Exporta la configuración de Vite usando `defineConfig`.
    export default defineConfig({
        // Define la base URL para el proyecto.
        base: '/',
        build: {
            // Especifica el directorio de salida para los archivos construidos.
            outDir: resolve(__dirname, 'dist'),
            rollupOptions: {
                // Define los puntos de entrada para la construcción.
                input: {
                    // Archivo SCSS personalizado como punto de entrada.
                    custom: resolve(__dirname, 'src/css/custom.scss'),
                    // Archivo JavaScript como punto de entrada.
                    scripts: resolve(__dirname, 'src/js/scripts.js')
                },
                
                // Configura las opciones de salida para los archivos construidos.
                output: {
                    // Define el formato de los nombres de archivos de entrada.
                    entryFileNames: 'js/[name].js',
                    // Define el formato de los nombres de archivos de activos (por ejemplo, CSS).
                    assetFileNames: fileInfo => {
                        // Si el archivo es CSS, coloca el archivo en el directorio 'css'.
                        if( fileInfo.name.endsWith('.css') ){
                            return `css/${fileInfo.name}`
                        }
                        // Para otros archivos, usa el nombre original.
                        return fileInfo.name
                    }
                }
            }
        },
        // Define el directorio raíz del proyecto.
        root: resolve(__dirname),
        plugins: [
            {
                // Define un plugin personalizado llamado 'php'.
                name: 'php',
                // Maneja las actualizaciones en caliente para archivos PHP.
                handleHotUpdate({ file, server }){
                    // Si el archivo actualizado termina en '.php', recarga completamente la página.
                    if( file.endsWith('.php') ){
                        server.ws.send({ type:'full-reload' })
                    }
                }
            }
        ],
        server: {
            // Define el host del servidor de desarrollo.
            host:'localhost',
            // Define el puerto del servidor de desarrollo.
            port:5173,        
        }
    })

    

3. Estructura del Proyecto

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

	
		src/ //Archivos CSS y preprocesadores.
		css/ 
		js/ 
		main.js
	

4. 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/main.js', array(), null, true);
        wp_enqueue_style('vite-css', get_template_directory_uri() . '/dist/assets/main.css', array(), null);
    }
    add_action('wp_enqueue_scripts', 'enqueue_vite_assets');
    

Conclusión

Adoptar herramientas como Vite no solo mejora el flujo de trabajo, sino que también garantiza que nuestro tema de WordPress sea más eficiente y mantenible. En el siguiente capítulo, profundizaremos en las configuraciones iniciales necesarias para optimizar aún más nuestro flujo de trabajo, incluyendo la configuración de herramientas adicionales y mejores prácticas para el desarrollo de temas.