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

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

Thomas Steiner

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

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

브라우저 지원

  • 89
  • 89
  • 108
  • 16.4

추가 자료