ESM vs CommonJS

ES Modules와 CommonJS 비교

브라우저의 <script type="module">과 현대 번들러는 import/export 기반 ESM을 쓰고, Node의 기존 패키지는 require/module.exports 기반 CommonJS를 만날 수 있습니다.

module graph
01export surface 02static import 03dependency graph 04bundle split
Export

named export는 여러 API를 공개하고 default export는 대표값 하나를 내보냅니다. 내부 함수는 export하지 않아 의존면을 줄입니다.

Import

브라우저 ESM은 상대 경로와 파일 확장자, 올바른 MIME이 중요하며 named/default import 형태가 틀리면 로딩 오류가 납니다.

ESM

ESM은 정적 구조, live binding, strict mode, 지연 실행 특성을 가져 tree shaking과 top-level await 분석에 유리합니다.

CommonJS

CommonJS는 require가 실행 시점에 평가되고 module.exports를 갱신하므로 ESM과 섞을 때 default interop을 확인합니다.