我一直在尝试开发一个基本的 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 );

这将输出到前端的以下脚本标记。

我的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。

在我的 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 中的文件添加到我们的导入映射中

我获取了指向我的 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，了解它们是如何工作的。