如何在 WordPress 網站中使用 Importmap

我一直在嘗試開發一個基本的 WordPress 經典主題，無需構建步驟，我可以將其用作入門主題，以便將來開發客戶端網站。在撰寫本文時，我沒有做任何自由工作，因為我正在為網路機構工作，而我們正在建立的網站都涉及建立步驟。所以我想寫一個關於如何在 WordPress 主題中使用 importmap 的簡短教學。

Career Tracker 是我現有的副項目，它已經使用了 importmap，無需建置步驟，但它是一個純 JavaScript 應用程式。

讓我們看看如何在 WordPress 世界中做到這一點。

入隊模組腳本

在我的主題functions.php中，我使用WordPress中的wp_enqueue_script_module函數將我的JavaScript檔案app.js作為模組腳本排入佇列。

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

這將輸出到前端的以下腳本標籤。

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

我的 JavaScript 檔案被放置在主題資料夾的 static 資料夾中。

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

如您在此檔案結構中所看到的，我需要將 utils 資料夾中的 index.js 和 Components 資料夾中的 menu.js 匯入到我的 app.js 中。在新增 importmap 之前，讓我們看看當我在 app.js 中匯入這兩個檔案時它的樣子。

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

但是我想要的是像這樣導入文件。

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

一旦我將匯入更改為這種格式，瀏覽器將在控制台中拋出此錯誤。

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

Importmap 來救援

將其新增至範本 html head 標籤。您可能需要在 php 中渲染此部分，以便獲得靜態資料夾的動態 url。

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

在我的 app.js 中使用它

現在有了 importmap 設置，即使這不是 Node 環境，我們仍然可以在我們熟悉的結構下導入文件。請記住，檔案需要以 .js 結尾。

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

如果我將 .js 從 utils/index.js 刪除到 utils/index，那麼瀏覽器將在控制台中記錄此錯誤。

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

將 CDN 中的檔案加入我們的匯入映射中

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

我獲取了指向我的 Web 組件集合的 CDN 鏈接，並將其添加到我的導入映射中。新增後，現在我們可以像這樣將 Web 元件匯入到 app.js 中。這不是很漂亮嗎？

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

對於 Web 元件，顯然我沒有在我的 WordPress 主題中使用它，但你可以檢查我在開頭提到的副項目 Career Tracker，看看它們是如何運作的。

以上是如何在 WordPress 網站中使用 Importmap的詳細內容。更多資訊請關注PHP中文網其他相關文章！