WordPress 웹사이트에서 Importmap을 사용하는 방법

저는 나중에 클라이언트 사이트를 개발하기 위해 스타터 테마로 사용할 수 있는 빌드 단계 없이 기본적인 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 );

프론트엔드에서 아래 스크립트 태그로 출력됩니다.

<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를, 구성 요소 폴더에서 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로 렌더링해야 할 수도 있습니다.

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

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의 파일을 가져오기 맵에 추가

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

웹 구성 요소 컬렉션에 대한 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를 확인하면 어떻게 작동하는지 확인할 수 있습니다.

위 내용은 WordPress 웹사이트에서 Importmap을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!