Cómo usar Vite JS en un tema de WordPress Paso a Paso

Uno de los problemas comunes que enfrentamos cuando desarrollamos temas para WordPress (Y en general para cualquier proyecto de desarrollo) 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, desde la optimización de recursos hasta la implementación de cambios en tiempo real, lo que lleva a una disminución en la productividad y calidad del código.

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.