He estado intentando trabajar en un tema clásico básico de WordPress sin pasos de compilación que puedo usar como tema inicial para tal vez desarrollar sitios de clientes en el futuro. Al momento de escribir este artículo, no estoy realizando ningún trabajo independiente ya que trabajo para una agencia web y todos los sitios que estamos creando implican pasos de construcción. Así que pensé en escribir un breve tutorial sobre cómo usar importmap en un tema de WordPress.

Career Tracker es un proyecto paralelo mío existente que ya usa importmap sin un paso de compilación, pero es una aplicación puramente JavaScript.

Veamos cómo podemos hacerlo en el mundo de WordPress.

Script del módulo de puesta en cola

En mi tema funciones.php, pongo en cola mi archivo JavaScript app.js como un script de módulo con la función wp_enqueue_script_module de WordPress.

wp_enqueue_script_module( 'frontend-scripts', GEARUP_THEME_URL . '/static/js/app.js', [], GEARUP_THEME_VERSION, true );

Esto generará la siguiente etiqueta de script en la interfaz.

Mis archivos JavaScript se colocan en la carpeta estática de la carpeta del tema.

static
├── css
│   ├── app.css
│   ├── global.css
│   ├── reset.css
│   ├── utils.css
│   └── variables.css
└── js
    ├── admin.js
    ├── app.js
    ├── components
    │   └── menu.js
    └── utils
        └── index.js

Como puede ver en esta estructura de archivos, necesito importar index.js desde la carpeta utils y menu.js desde la carpeta componentes a mi app.js. Antes de agregar el mapa de importación, veamos cómo se ve cuando importo esos dos archivos como este en mi app.js.

// Utils
import { onDocumentReady } from './utils/index.js';
// Components
import Menu from './components/menu.js';

Pero lo que tengo en mente es importar archivos como este.

// Utils
import { onDocumentReady } from 'utils/index.js';
// Components
import Menu from 'components/menu.js';

Una vez que cambie las importaciones a este formato, el navegador arrojará este error en la consola.

Uncaught TypeError: Failed to resolve module specifier "utils/index.js". Relative references must start with either "/", "./", or "../".

Importmap viene al rescate

Agregue esto dentro de la etiqueta principal html de su plantilla. Es posible que necesites renderizar esta parte en php para poder obtener la URL dinámica de la carpeta estática.

Úselo en mi app.js

Ahora, con la configuración de importmap, aunque este no es un entorno de Nodo, aún podemos importar archivos bajo la estructura con la que estamos familiarizados. Tenga en cuenta que los archivos deben terminar en .js.

// Utils
import { onDocumentReady } from 'utils/index.js';
// Components
import Menu from 'components/menu.js';

Si elimino el .js de mi utils/index.js a utils/index, el navegador registrará este error en la consola.

GET http://test.local/wp-content/themes/GearUp/static/js/utils/index net::ERR_ABORTED 404 (Not Found)

Agregue archivos de CDN a nuestro mapa de importación

Tomo un enlace CDN a mi colección de componentes web y lo agrego a mi mapa de importación. Una vez agregados, ahora podemos importar componentes web a app.js de esta manera. ¿No es esto hermoso?

import "ccw/side-nav/index.js";
import "ccw/side-nav-item/index.js";
import "ccw/icon/index.js";
import "ccw/form-layout/index.js";
import "ccw/text-field/index.js";
import "ccw/email-field/index.js";
import "ccw/date-picker/index.js";
import "ccw/option/index.js";
import "ccw/select/index.js";

Para los componentes web, claramente no los estoy usando en mi tema de WordPress, pero puedes consultar el proyecto paralelo Career Tracker que mencioné al principio para ver cómo funcionan.