2023년 3월 이후 새로 개설된 JavaScript importmap

improtmap

JavaScript에서 모듈을 로드할 때, 브라우저가 모듈 경로를 어떻게 해석해야 하는지 지정할 수 있게 해주는 기능

 = 대규모 웹 프로젝트에서 모듈을 관리할 때 매우 유용하며, 의존성 관리 및 모듈 로딩 방식을 더 세밀하게 제어해준다.

 

importmap의 개념

기본적으로 모듈을 'import'로 불러온다. 모듈을 불러올 때는 상대 경로 OR 절대 경로를 직접 지정해서 불러와야 한다.

허나 이런 방식은 모듈 경로가 복잡하거나 여러 모듈을 관리해야 할 때 번거로울 수 있다.

 

이에 importmap을 사용하면 각 모듈의 경로를 미리 정의하고,

JavaScript 코드에서 간단한 이름으로 모듈을 불러올 수 있다.

예시를 확인해보자.

<script type="importmap">
{
  "imports": {
    "lodash": "https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/lodash.js",
    "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.js"
  }
}
//GPT에서 예제를 받아옴
</script>

 

위 예시를 보면 importmap 에 두개의 모듈 'lodash', 'moment'의 경로를 정의해주었다.

이제 JavaScript에서는 두 모듈을 불러올때 URL을 불러오는 것이 아닌 정의된 이름으로 바로 사용이 가능하다.

<script type="text/javascript">
import _ from 'lodash';
import moment from 'moment';

console.log(_.isEmpty([]));
console.log(moment().format());
</script>

 

 

GPT에서 정리해준 주요 개념

주요 개념

1. 모듈 맵핑: importmap의 기본 역할은 모듈 이름을 URL 또는 다른 모듈 경로에 매핑하는 것입니다. 이로써 개발자는 모듈 경로를 더 간단하고 관리하기 쉽게 만들 수 있습니다.
2. 전역 설정: importmap은 HTML 파일 내에서 전역적으로 설정되며, 이후 해당 HTML에서 실행되는 모든 자바스크립트 코드에서 사용됩니다.
3. 브라우저 지원: 현재 importmap은 최신 버전의 Chrome, Edge, Safari에서 지원되며, 일부 브라우저에서는 실험적으로 지원될 수 있습니다. 오래된 브라우저에서는 importmap이 작동하지 않을 수 있으므로 폴리필이나 대체 방법을 고려해야 합니다.
4. 서드파티 모듈: 외부 CDN에서 제공하는 서드파티 라이브러리들도 쉽게 가져올 수 있습니다. 이 방법을 사용하면 빌드 시스템 없이도 필요한 라이브러리를 사용할 수 있습니다.
5. 상대 경로와 절대 경로: 모듈을 상대 경로나 절대 경로로 매핑할 수 있어 로컬 파일이나 원격 리소스를 모두 다룰 수 있습니다.