이 페이지는 Cloud Translation API를 통해 번역되었습니다.

이제 브라우저 간 자바스크립트 가져오기 맵이 지원됩니다.

이제 가져오기 맵을 사용하면 ES 모듈을 더 효과적으로 가져올 수 있습니다.

Thomas Steiner

ES 모듈은 웹 애플리케이션에 JavaScript 코드를 포함하고 재사용하는 최신 방법입니다. 모듈식 JavaScript는 최신 브라우저에서 지원되며 이전의 비모듈식 JavaScript 개발 접근 방식에 비해 여러 가지 이점을 제공합니다.

ES 모듈을 사용하는 최신 방법은 <script type="importmap"> 태그를 사용하는 것입니다. 이 태그를 사용하면 외부 모듈 이름과 해당 URL 간의 매핑을 정의할 수 있으므로 코드에서 외부 모듈을 더 쉽게 포함하고 사용할 수 있습니다.

<script type="importmap"> 접근 방식을 사용하려면 먼저 HTML 문서의 <head> 섹션에 추가해야 합니다. 태그 내에서 모듈 이름을 해당 URL에 매핑하는 JSON 객체를 정의할 수 있습니다. 예를 들면 다음과 같습니다.

<script type="importmap">
  {
    "imports": {
      "browser-fs-access": "https://unpkg.com/browser-fs-access@0.33.0/dist/index.modern.js"
    }
  }
</script>

이 코드는 "browser-fs-access"이라는 단일 외부 모듈을 정의하고 unpkg CDN에 호스팅된 browser-fs-access 라이브러리의 URL에 매핑합니다. 이 매핑이 적용되었으므로 이제 import 키워드를 사용하여 코드에 browser-fs-access 라이브러리를 포함할 수 있습니다. import 키워드는 type="module" 속성이 있는 script 태그 내에서만 사용할 수 있습니다.

<button>Select a text file</button>
<script type="module">
  import {fileOpen} from 'browser-fs-access';

  const button = document.querySelector('button');
  button.addEventListener('click', async () => {
    const file = await fileOpen({
      mimeTypes: ['text/plain'],
    });
    console.log(await file.text());
  });
</script>

<script type="importmap"> 태그와 import 키워드를 사용하면 JavaScript 개발에 대한 이전의 비모듈식 접근 방식에 비해 여러 이점이 있습니다. 이를 통해 코드가 종속되는 외부 모듈을 명확하고 명시적으로 지정할 수 있으므로 코드를 더 쉽게 이해하고 유지할 수 있습니다. 전반적으로 <script type="importmap"> 태그와 함께 ES 모듈을 사용하는 것은 웹 애플리케이션에 JavaScript 코드를 포함하고 재사용할 수 있는 현대적이고 강력한 방법입니다. 다음과 같이 지원을 기능 감지할 수 있습니다.

if (HTMLScriptElement.supports('importmap')) {
  // The importmap feature is supported.
}

브라우저 지원

이제 브라우저 간 자바스크립트 가져오기 맵이 지원됩니다.

추가 자료