Comment utiliser Importmap dans un site Web WordPress

J'ai essayé de travailler sur un thème WordPress classique de base sans étapes de construction que je peux utiliser comme thème de démarrage pour peut-être développer des sites clients à l'avenir. Au moment d'écrire cet article, je ne fais aucun travail en freelance car je travaille pour une agence web et les sites que nous construisons impliquent tous des étapes de construction. J'ai donc pensé écrire un court tutoriel sur la façon d'utiliser importmap dans un thème WordPress.

Career Tracker est un de mes projets parallèles existants qui utilise déjà importmap sans étape de construction, mais c'est une application purement JavaScript.

Voyons comment nous pouvons le faire dans le monde WordPress.

Script du module de mise en file d'attente

Dans mon thème function.php, je mets mon fichier JavaScript app.js en file d'attente en tant que script de module avec la fonction wp_enqueue_script_module de WordPress.

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

Cela affichera la balise de script ci-dessous sur le frontend.

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

Mes fichiers JavaScript sont placés dans le dossier statique du dossier du thème.

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

Comme vous pouvez le voir dans cette structure de fichiers, je dois importer index.js du dossier utils et menu.js du dossier composants dans mon app.js. Avant d'ajouter l'importmap, voyons à quoi cela ressemble lorsque j'importe ces deux fichiers comme celui-ci dans mon app.js.

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

Mais ce que j'ai en tête, c'est d'importer des fichiers comme celui-ci.

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

Une fois que j'ai modifié les importations dans ce format, le navigateur affichera cette erreur dans la console.

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

Importmap vient à la rescousse

Ajoutez ceci dans la balise d'en-tête HTML de votre modèle. Vous devrez peut-être restituer cette partie en php afin de pouvoir obtenir l'URL dynamique du dossier statique.

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

Utilisez-le dans mon app.js

Maintenant, avec la configuration d'importmap, même s'il ne s'agit pas d'un environnement Node, nous pouvons toujours importer des fichiers sous la structure que nous connaissons. Gardez à l'esprit que les fichiers doivent se terminer par .js.

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

Si je supprime le .js de mon utils/index.js vers utils/index, le navigateur enregistrera cette erreur dans la console.

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

Ajouter des fichiers de CDN dans notre importmap

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

Je récupère un lien CDN vers ma collection de composants Web et l'ajoute à mon importmap. Une fois ajoutés, nous pouvons maintenant importer des composants Web dans app.js comme ceci. N'est-ce pas beau ?

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

Pour les composants Web, je ne l'utilise clairement pas dans mon thème WordPress, mais vous pouvez consulter le projet parallèle Career Tracker que j'ai mentionné au début pour voir comment ils fonctionnent.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!