자바스크립트 모듈 개념정리 (AMD, CJS, ESM, UMD)

AMD

Ansynchronous Module Deifinition

• 모듈을 비동기적으로 불러옴
• Front-End 용으로 개발되었음

CJS

Common JS

• Node.js의 모듈 시스템에 사용됨
• 모듈을 동기적으로 불러옴
• Back-End 용으로 개발되었음

ESM

ES Modules

• 표준 자바스크립트 모듈 시스템으로 기획되었음
• 최신 브라우저에서 대부분 지원
• 이전의 모듈 시스템들의 장점들을 채택; CJS의 문법을 차용, AMD의 비동기 로드를 가져옴.
• Tree-shaking 이 가능하다 (크기최적화 가능)

UMD

Universal Module Definition

• AMD, CJS 같은 개념과는 다르게, 여러 모듈 시스템을 동작 가능하게 하는 패턴에 가깝다.
• Front-End, Back-End 양쪽에서 사용가능.
• Webpack이나 rollup 같은 Bundler의 fallback으로 많이 사용된다.