저는 나중에 클라이언트 사이트를 개발하기 위해 스타터 테마로 사용할 수 있는 빌드 단계 없이 기본 WordPress 클래식 테마 작업을 시도해 왔습니다. 이 글을 쓰는 시점에서 저는 웹 에이전시에서 일하고 있고 우리가 구축하고 있는 사이트에는 모두 구축 단계가 포함되어 있기 때문에 프리랜서 작업을 하고 있지 않습니다. 그래서 WordPress 테마에서 importmap을 사용하는 방법에 대한 간단한 튜토리얼을 작성하려고 했습니다.

Career Tracker는 이미 빌드 단계 없이 importmap을 사용하는 기존 사이드 프로젝트이지만 순수한 JavaScript 앱입니다.

WordPress 세계에서 어떻게 할 수 있는지 살펴보겠습니다.

대기열에 넣기 모듈 스크립트

내 테마 function.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
├── 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와 구성 요소 폴더의 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 헤드 태그 안에 이를 추가하세요. 정적 폴더에 대한 동적 URL을 가져올 수 있도록 이 부분을 PHP로 렌더링해야 할 수도 있습니다.

내 app.js에서 사용하세요

이제 importmap 설정을 사용하면 Node 환경이 아니더라도 익숙한 구조로 파일을 가져올 수 있습니다. 파일은 .js로 끝나야 합니다.

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

utils/index.js에서 utils/index로 .js를 제거하면 브라우저가 콘솔에 이 오류를 기록합니다.

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를 확인하여 작동 방식을 확인할 수 있습니다.