Tenho tentado trabalhar em um tema clássico básico do WordPress sem etapas de construção que posso usar como tema inicial para talvez desenvolver sites de clientes no futuro. No momento em que escrevo este artigo, não estou fazendo nenhum trabalho freelance, pois estou trabalhando para uma agência web e todos os sites que estamos construindo envolvem etapas de construção. Então pensei em escrever um breve tutorial sobre como usar o importmap em um tema WordPress.

Career Tracker é um projeto paralelo meu que já usa importmap sem uma etapa de construção, mas é um aplicativo JavaScript puro.

Vamos ver como podemos fazer isso no mundo WordPress.

Script do módulo de enfileiramento

Em meu tema functions.php, enfileiro meu arquivo JavaScript app.js como um script de módulo com a função wp_enqueue_script_module do WordPress.

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

Isso resultará na tag de script abaixo no frontend.

Meus arquivos JavaScript são colocados na pasta estática da pasta do 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 você pode ver nesta estrutura de arquivos, preciso importar index.js da pasta utils e menu.js da pasta componentes para meu app.js. Antes de adicionarmos o importmap, vamos ver como fica quando importo esses dois arquivos como este em meu app.js.

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

Mas o que tenho em mente é importar arquivos como este.

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

Depois que eu alterar as importações para este formato, o navegador gerará este erro no console.

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

Importmap vem para o resgate

Adicione isto dentro da tag head html do seu modelo. Pode ser necessário renderizar esta parte em php para que você possa obter o URL dinâmico para a pasta estática.

Use-o em meu app.js

Agora, com a configuração do importmap, mesmo que este não seja um ambiente Node, ainda podemos importar arquivos na estrutura com a qual estamos familiarizados. Lembre-se de que os arquivos precisam terminar com .js.

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

Se eu remover o .js de meu utils/index.js para utils/index, o navegador registrará esse erro no console.

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

Adicione arquivos do CDN ao nosso importmap

Pego um link CDN para minha coleção de componentes da Web e o adiciono ao meu mapa de importação. Uma vez adicionados, agora podemos importar componentes da Web para app.js assim. Não é lindo?

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 componentes da Web, claramente não estou usando-os no meu tema WordPress, mas você pode verificar o projeto paralelo Career Tracker que mencionei no início para ver como eles funcionam.