Ich habe versucht, an einem einfachen WordPress-Klassiker-Theme ohne Build-Schritte zu arbeiten, das ich als Starter-Theme verwenden kann, um vielleicht in Zukunft Kundenseiten zu entwickeln. Zum Zeitpunkt des Schreibens dieses Artikels bin ich nicht freiberuflich tätig, da ich für eine Webagentur arbeite und die Websites, die wir erstellen, alle Erstellungsschritte erfordern. Deshalb dachte ich, ich schreibe ein kurzes Tutorial zur Verwendung von Importmap in einem WordPress-Theme.

Career Tracker ist ein bestehendes Nebenprojekt von mir, das bereits importmap ohne Build-Schritt verwendet, aber es ist eine reine JavaScript-App.

Mal sehen, wie wir es in der WordPress-Welt machen können.

Enqueue-Modulskript

In meiner Theme-Funktionen.php stelle ich meine JavaScript-Datei app.js als Modulskript mit der Funktion wp_enqueue_script_module von WordPress in die Warteschlange.

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

Dies wird an das folgende Skript-Tag im Frontend ausgegeben.

Meine JavaScript-Dateien werden im statischen Ordner des Theme-Ordners abgelegt.

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

Wie Sie in dieser Dateistruktur sehen können, muss ich index.js aus dem Ordner „utils“ und menu.js aus dem Ordner „components“ in meine app.js importieren. Bevor wir die Importmap hinzufügen, sehen wir uns an, wie sie aussieht, wenn ich diese beiden Dateien wie folgt in meine app.js importiere.

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

Aber ich habe vor, Dateien wie diese zu importieren.

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

Sobald ich Importe in dieses Format ändere, gibt der Browser diesen Fehler in der Konsole aus.

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

Importmap kommt zur Rettung

Fügen Sie dies in den HTML-Head-Tag Ihrer Vorlage ein. Möglicherweise müssen Sie diesen Teil in PHP rendern, damit Sie die dynamische URL zum statischen Ordner erhalten.

Benutze es in meiner app.js

Jetzt können wir mit der Importmap-Einrichtung, auch wenn es sich nicht um eine Node-Umgebung handelt, weiterhin Dateien unter der Struktur importieren, mit der wir vertraut sind. Beachten Sie, dass die Dateien mit .js enden müssen.

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

Wenn ich die .js von meinen utils/index.js nach utils/index entferne, protokolliert der Browser diesen Fehler in der Konsole.

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

Fügen Sie Dateien vom CDN zu unserer Importmap hinzu

Ich schnappe mir einen CDN-Link zu meiner Web Components-Sammlung und füge ihn meiner Importmap hinzu. Nach dem Hinzufügen können wir nun Webkomponenten wie folgt in app.js importieren. Ist das nicht schön?

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";

Was Webkomponenten betrifft, verwende ich sie offensichtlich nicht in meinem WordPress-Theme, aber Sie können sich das eingangs erwähnte Nebenprojekt Career Tracker ansehen, um zu sehen, wie sie funktionieren.