[매일메일] CommonJS와 ES Module(ESM) 차이점이란? (FE.250103)

CommonJS, ES Module(ESM) 자바스크립트에서 모듈을 관리하고 불러오는 방식

 

	CommonJS	ES Module
사용 환경	Node.js 환경	브라우저, Node.js 환경
모듈 로드	동기적 SSR 환경에서 유리함(모든 모듈 로드 후 실행)	비동기적 (브라우저에서 모듈 로드 , 페이지 로딩 속도 저하 X)
모듈 키워드 (가져옴/내보냄)	require / module.exports	import / export
트리 셰이킹	어려움 (사용되지 않는 코드 제거하기 어려움)	유리함 (사용되지 않는 코드 제거하고 번들 크기 줄임)
예시	const moduleA = require('./moduleA'); moduleA.sayHello(); module.exports = {     sayHello: function() {         console.log('Hello from CommonJS');     } };	import { sayHello } from './moduleA'; sayHello(); export function sayHello() {     console.log('Hello from ES Module'); }

 

최근 Node.js에 ESM을 적용하는 비율이 증가하는 추세임

- Node.js 버전 12부터 네이티브로 ESM을 지원하기 시작함

- 브라우저와 서버 간 모듈 호환성을 위해 풀스택 어플리케이션 개발에서 ESM 사용 비율이 높아짐

- 비동기적 로딩과 트리 쉐이킹 같은 호환성 작업에서 유리하다는 점이 장점으로 작용함
   (이 블로그 관련 글: React의 트리 쉐이킹이란? https://developer-dreamer.tistory.com/143)

 

최근 CommonJS와 ES Module 모두 지원하는 라이브러리 많이 등장

- Webpack과 같은 번들러를 사용해 CommonJS, ES Module을 모두 지원하는 번들 생성할 수 있음

- libraryTarget을 umd로 설정해 UMD(Universal Moduel Definition) 형식으로 번들 생성함

- 프로젝트 호환성을 높이고, 다양한 환경에서 사용할 수 있음

---

 

출처

[1] 매일메일. 250126. CommonJS와 ES Module의 차이점에 대해서 설명해주세요 38번. https://maeil-mail.kr 

[2] CommonJS와 ES Module의 차이점과 선택 기준 

https://f-lab.kr/insight/commonjs-vs-esmodule-20240523?gad_source=1&gclid=Cj0KCQiAs5i8BhDmARIsAGE4xHw456mxRuIRHB_nInt-AwSkh_kP1qQULB2miyZ8AqenmZQQr8IwcmIaAnrIEALw_wcB

---

실제 예시와 함께 잘 정리된 글

1부) commonjs란 무엇인가? https://yceffort.kr/2023/05/what-is-commonjs