Import Map

• 복잡한 빌드 시스템에 의존하지 않고, Bare Import 사용 할 수 있다.
• 하지만 많은 브라우저에서 지원을 안하니 주의하여 사용해야한다.
• script tag 의 type 어트리뷰트에 들어가는 속성
• body element에 import map 을 포함시켜준다.
• 브라우저에서 es module 사용 시, 아래와 같이 JS 파일 전체 경로를 입력해야한다.

import { name as squareName, draw } from "./modules/shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";

• 해당 방식은 가독성/유지보수에 좋지 못하므로 import map 은 라이브러리 이름을 특정 URL 에 맵핑 시켜준다.

<script type="importmap">
  {
    "imports": {
      "square": "./module/shapes/square.js",
      "circle": "https://example.com/shapes/circle.js"
    }
  }
</script>

• 타입스크립트 경로 맵핑과 유사하지만, 브라우저에서 직접 사용 가능.
• 모듈을 로컬이나 브라우저에서 로드하면 동일 구문 사용 가능
• json 파일로 분리하여 지정도 가능.
• import map을 사용하면, import 지정자를 절대/상대경로에 맵핑 가능하여 빌드 과정을 거치지 않고도 모듈 해석을 제어 할 수 있다.
• <script type="module">태그 앞에 위치해야한다.
  • 모듈 해석을 수행하기 전, 구문 분석 될 수 있도록.

동적으로 Import Map 구성하기 - lazyload

• lazyload 지정자를 사용하면 매핑은 임의의 조건에 따라 동적으로 구성된다.

<script>
  const importMap = {
    imports: {
      lazyload: 'IntersectionObserver' in window ? './lazyload.js' : './lazyload-fallback.js',
    },
  };

  const im = document.createElement('script');
  im.type = 'importmap';
  im.textContent = JSON.stringify(importMap);
  document.currentScript.after(im);
</script>

마이크로프론트엔드 아키텍쳐 (MicroFrontend Architecture)와의 연관성

• 마이크로프론트엔드 아키텍쳐는 브라우저에서 번들을 동적으로 로드하고, 이를 실제 앱에 통합하기 위한 방법
• 이때 통합 조율은 호스트 앱의 역할. 그러나 호스트가 ES 모듈을 로드해야하는 경우, JS Import 시스템을 간단히 활용하고 import map 을 사용하여 모듈을 해당 위치에 매핑할 수 있다.
• 즉, 브라우저에서 직접 번들 로딩을 재정의 할 수 있다.

활용 방안 - 로컬 개발 시

https://velog.io/@tap_kim/talk-about-import-map-micro-frontend-and-nx-monorepo?utm_source=substack&utm_medium=email

• 로컬에서 특정 리모트앱 개발 시, 복잡한 로컬 어플리케이션 전부를 실행하는게 아니라,
• 배포된 환경을 띄우고 로컬의 리모트앱을 연결만 해준다!?
• 어떻게?
  • import map 의 오버라이드 가능한 특징을 활용해서