Compilando CSS y Javascript con wp-scripts

Desde la aparición de Gutenberg, o probablemente antes, se han estado implementando varios paquetes oficiales de WordPress para hacer nuestras vidas como desarrolladores más sencillas, por así decirlo.

Uno de ellos, y probablemente uno de los más utilizados por nosotros como Frontend Developers es @wordpress/wp-scripts que nos sirve para compilar Javascript y CSS dentro de nuestro proyecto, y en este pequeño tutorial cubriré las bases para poder utilizarlo de manera rápida.

#¿Qué es wp-scripts?

En palabras básicas, no es más que una colección de recursos pensados específicamente para el desarrollo de frontend, cada uno con su configuración recomendada, contiene entre otras cosas:

• Compilador
• Linter
• Formato
• Empaquetador
• Tests
• Ambiante local

#Instalación

Para comenzar, requerimos de un simple paquete tipo ppm en el que definiremos nuestra aplicación, para propósitos de este tutorial no necesitamos la gran cosa, simplemente podemos correr npm init y seguir las indicaciones de la terminal.

package.json

1`{
2    "name": "scripts",
3    "version": "1.0.0",
4    "description": "Simple @wordpress/scripts tutorial",
5    "main": "index.js",
6    "scripts": {
7        "test": "echo 'Error: no test specified' && exit 1"
8    },
9    "author": "Mario Aguiar",
10    "license": "ISC",
11    "devDependencies": {
12        "@wordpress/scripts": "^18.0.1"
13    }
14}
15

#Hola Mundo

Antes de comenzar a crear y compilar nuestros archivos es necesario que tengamos un ambiente desde donde poder ejecutar nuestra aplicación, por fortuna, el paquete scripts ya viene con uno, para poder utilizarlo no basta otra cosa más que agregarlo a nuestra lista de scripts en nuestro package.json, así:

package.json

1`{
2    "name": "scripts",
3    "version": "1.0.0",
4    "description": "Simple @wordpress/scripts tutorial",
5    "main": "index.js",
6    "scripts": {
7        "test": "echo 'Error: no test specified' && exit 1",
8        "start": "wp-scripts start"
9    },
10    "author": "Mario Aguiar",
11    "license": "ISC",
12    "devDependencies": {
13        "@wordpress/scripts": "^18.0.1"
14    }
15}
16

Ahora sólo debemos ejecutarlo con npm run start o npm start

Esto creará un observador en nuestra terminal, que actualizará y recopilará todos nuestros archivos en el momento en que se detecte un cambio, ahora sí, podemos comenzar con nuestra aplicación.

La configuración por defecto buscará nuestros archivos dentro de src/index.js, así que podemos comenzar por ahí.

index.js

1import { __ } from '@wordpress/i18n';
2const init = () => {
3  console.log(__('Hello World'));
4};
5init();
6

Ahora al ver dentro de nuestro directorio build podemos ver los archivos compilados, junto con su sourcemap. El archivo index.asset.php es un archivo muy útil que se crea cada vez que alguna de las dependencias cambia, son listadas en él para que nuestra aplicación pueda fácilmente listarlas dentro de nuestro plugin, por ejemplo:

plugin.php

1/**
2 * Include scripts and dependencies in our plugin
3 *
4 * @return void
5 */
6function enqueue_scripts() {
7    $asset = include get_stylesheet_directory() . '/build/index.asset.php';
8    wp_enqueue_script(
9        'mah-scripts',
10        get_stylesheet_directory_uri() . '/build/index.js',
11        $asset['dependencies'],
12        $asset['version'],
13        true
14    );
15}
16

#Conclusión

En un momento en el que la configuración del proyecto es probablemente una de las cosas más complicadas y la más importante al mismo tiempo, es bueno saber que contamos con herramientas que nos hacen la vida un poco más sencilla, al menos por ahora.

#Recursos

• Documentación Oficial