Я пытался работать над базовой классической темой WordPress без этапов сборки, которую я мог бы использовать в качестве стартовой темы для разработки клиентских сайтов в будущем. На момент написания этой статьи я не работал внештатным сотрудником, поскольку работаю в веб-агентстве, и все сайты, которые мы создаем, включают этапы сборки. Поэтому я решил написать краткое руководство о том, как использовать importmap в теме WordPress.

Career Tracker — это мой существующий побочный проект, в котором уже используется importmap без этапа сборки, но это приложение на чистом JavaScript.

Давайте посмотрим, как мы можем это сделать в мире WordPress.

Скрипт модуля постановки в очередь

В моей теме function.php я добавляю в очередь свой файл JavaScript app.js как скрипт модуля с функцией wp_enqueue_script_module из WordPress.

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

Это будет выведено в тег скрипта ниже во внешнем интерфейсе.

Мои файлы JavaScript помещаются в статическую папку папки темы.

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

Как вы можете видеть из этой структуры файлов, мне нужно импортировать index.js из папки utils и Menu.js из папки компонентов в мой app.js. Прежде чем добавлять карту импорта, давайте посмотрим, как она будет выглядеть, когда я импортирую эти два файла в свой 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 вашего шаблона. Возможно, вам придется отобразить эту часть в 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 в нашу карту импорта.

Я беру ссылку CDN на свою коллекцию веб-компонентов и добавляю ее в свою карту импорта. После добавления мы можем импортировать веб-компоненты в 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";

Что касается веб-компонентов, то я, очевидно, не использую их в своей теме WordPress, но вы можете проверить сторонний проект Career Tracker, о котором я упоминал вначале, чтобы увидеть, как они работают.