Cara Menggunakan Importmap dalam Laman Web WordPress

Saya telah cuba mengusahakan tema klasik WordPress asas tanpa membina langkah yang boleh saya gunakan sebagai tema permulaan untuk membangunkan tapak pelanggan pada masa hadapan. Semasa menulis artikel ini, saya tidak melakukan sebarang pertunjukan bebas kerana saya bekerja untuk agensi web dan tapak yang kami bina semuanya melibatkan langkah binaan. Jadi saya fikir saya menulis tutorial ringkas tentang cara menggunakan importmap dalam tema WordPress.

Penjejak Kerjaya ialah projek sampingan saya yang sedia ada yang sudah menggunakan importmap tanpa langkah binaan, tetapi ia adalah apl JavaScript tulen.

Mari kita lihat bagaimana kita boleh melakukannya di dunia WordPress.

Skrip Modul Enqueue

Dalam functions.php tema saya, saya memasukkan fail JavaScript app.js saya sebagai skrip modul dengan fungsi wp_enqueue_script_module daripada WordPress.

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

Ini akan menghasilkan teg skrip di bawah pada bahagian hadapan.

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

Fail JavaScript saya diletakkan ke dalam folder statik folder tema.

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

Seperti yang anda lihat dalam struktur fail ini, saya perlu mengimport index.js daripada folder utils dan menu.js daripada folder komponen ke dalam app.js saya. Sebelum kita menambah peta import, mari lihat rupanya apabila saya mengimport kedua-dua fail seperti ini dalam app.js saya.

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

Tetapi apa yang saya fikirkan ialah mengimport fail seperti ini.

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

Sebaik sahaja saya menukar import kepada format ini, penyemak imbas akan membuang ralat ini ke dalam konsol.

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

Importmap datang untuk menyelamatkan

Tambahkan ini di dalam teg kepala html templat anda. Anda mungkin perlu memaparkan bahagian ini dalam php supaya anda boleh mendapatkan url dinamik ke folder statik.

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

Gunakannya dalam app.js saya

Kini dengan persediaan importmap, walaupun ini bukan persekitaran Nod, kami masih boleh mengimport fail di bawah struktur yang biasa kami gunakan. Perlu diingat bahawa fail perlu diakhiri dengan .js.

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

Jika saya mengalih keluar .js daripada utils/index.js saya kepada utils/index, maka penyemak imbas akan melog ralat ini dalam konsol.

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

Tambahkan fail daripada CDN ke dalam peta import kami

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

Saya mengambil pautan CDN ke koleksi Komponen Web saya dan menambahkannya ke dalam peta import saya. Setelah ditambahkan, kini kita boleh mengimport Komponen Web ke dalam app.js seperti ini. Cantik kan?

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

Untuk Komponen Web, jelas saya tidak menggunakannya dalam tema WordPress saya, tetapi anda boleh menyemak projek sampingan Career Tracker yang saya nyatakan pada mulanya untuk melihat cara ia berfungsi.

Atas ialah kandungan terperinci Cara Menggunakan Importmap dalam Laman Web WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!