JavaScript 모듈 시스템 | CJS, AMD, UMD, ESM

모듈화 방식

• CommonJS : exports 키워드로 모듈을 생성, require() 함수로 임포트하는 방식
  • 장점 : 모든 파일을 로컬에 저장하고 동기적으로 동작하여 전역변수와 지역변수를 분리할 수 있게 되었다.
  • 단점 : 필요한 모듈을 가져오는데 대기하게 됨.
• AMD(Asynchronous Module Definition): CommonJS를 비동기적으로 사용할 수있는 도구
• ESM : import, 와 export 로 임포트하는 방식(ES6가 도입 이후)
  • 장점 : 키워드 만으로 모듈화 가능
  • 단점 : 모듈별로 을 네트워크 통신을 통해 가져오면서 비용과 시간 소요

 

 

https://beomy.github.io/tech/javascript/cjs-amd-umd-esm/#%ED%8A%B9%EC%A7%95-%EB%B9%84%EB%8F%99%EA%B8%B0

 

 

https://medium.com/@sojjung3/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%AA%A8%EB%93%88-cjs%EC%99%80-esm%EC%9D%98-%EC%B0%A8%EC%9D%B4-d133660d01a8

자바스크립트 모듈 | CJS와 ESM의 차이

 

 

특징

 

ES6 모듈

 

CommonJS

 

	ESM	CommonJS
로딩 방식	정적 로딩 (컴파일 타임)	동적 로딩 (런타임)
문법	import, export	require, module.exports
모듈 범위	파일 단위	파일 단위
트리 셰이킹	지원 (최적화 가능)	지원하지 않음
사용 환경	브라우저, 서버 (트랜스파일러)	주로 서버 (Node.js)
엄격 모드	자동 적용	선택적 적용