So verwenden Sie Importmap in einer WordPress-Website

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 meinem Theme „functions.php“ stelle ich meine JavaScript-Datei app.js als Modulskript mit der Funktion „wp_enqueue_script_module“ von WordPress ein.

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.

<script type="module" src="http://test.local/wp-content/themes/GearUp/static/js/app.js?ver=0.1.0" id="frontend-scripts-js-module"></script>

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.

<script type="importmap">
    {
      "imports": {
        "utils/": "/wp-content/themes/GearUp/static/js/utils/",
        "components/": "/wp-content/themes/GearUp/static/js/components/"
      }
    }
</script>

Benutze es in meiner app.js

Mit der Importmap-Einrichtung können wir jetzt, auch wenn es sich nicht um eine Node-Umgebung handelt, 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

<script type="importmap">
    {
      "imports": {
        "utils/": "/wp-content/themes/GearUp/static/js/utils/",
        "components/": "/wp-content/themes/GearUp/static/js/components/",
        "ccw/": "https://unpkg.com/cucumber-web-components@0.5.2/dist/"
      }
    }
</script>

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

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

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Importmap in einer WordPress-Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!