ES 모듈(ECMAScript Modules, ESM)은 import/export로 파일 간 의존을 정적으로 선언하는 JavaScript 표준 모듈 시스템이다. Node.js가 먼저 쓰던 CommonJS는 require()/module.exports로 의존을 런타임에 불러온다.
| ESM | CommonJS | |
|---|---|---|
| 문법 | import/export | require/module.exports |
| 결정 시점 | 실행 전(정적) | 실행 중(동적, 조건문 안 가능) |
| 브라우저 | <script type="module"> 지원 | 번들러 필요 |
- ESM은 의존 그래프를 미리 알 수 있어서 트리 셰이킹과 동적
import()(코드 스플리팅과 동적 임포트)의 기반이 된다 - 번들러 없이 브라우저에서 ESM을 쓰면 파일마다 요청이 생기고, import 경로에 확장자(
.js)까지 적어야 한다. 이런 이유로 번들러가 남아 있다 - TypeScript의
namespace와/// <reference>는 ESM이 자리 잡기 전에 파일을 나누던 방식이다. 참조가 빠져도 컴파일 에러가 안 나는 단점이 있어서 지금은 ESM이 권장된다 - 타입만 가져오는 import를 어떻게 처리할지는 verbatimModuleSyntax와 import type에서 다룬다
- 재수출로 진입점을 모으는 방법은 배럴 파일과 re-export에 정리했다
파이썬 쪽의 같은 개념은 파이썬 모듈과 패키지에 있다.