我一直在嘗試開發一個基本的 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 "../".
將其新增至範本 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>
現在有了 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)
<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中文網其他相關文章！
