JavaScript의 CJS(CommonJs)와 ESM(ESModule)의 차이

 

CJS vs ESM

 

 

JavaScript로 개발을 하게되면 CJS, ESM에 대해서 많이 들어보게된다.

CJS, EMS은 어떤거고, 둘의 차이점은 무엇인지 알아보자.

 

JavaScript에서 모둘을 다루는 방식에는 CommonJS(CJS)와 ECMAScript Module(ESM) 두 가지가 있다.

 

1. CommonJS(CJS)

CommonJS는 주로 Node.js 환경에서 사용되는 모듈 시스템으로, 초기 Javascript 환경에서는 모듈 시스템이 없었기 때문에

Nodejs가 이러한 모듈 시스템을 도입했다.

 

특징

• require 함수를 사용하여 모듈을 불러옴
• module.exports또는 exports 객체를 사용하여 모듈을 내보냄
• 동기적으로 동작 (파일을 즉시 로드함)
• 브라우저 환경에서 직접 실행할 수 없음 (번들링 필요)
• 전체 모듈을 가져오거나 특정 부분만 가져오는 것이 가능

 

예제

// math.js
module.exports.add = (a, b) => a + b;
module.exports.subtract = (a, b) => a - b;

// main.js
const math = require('./math');
console.log(math.add(2, 3)); // 5
console.log(math.subtract(5, 2)); // 3

 

장점

• Node.js에서 기본적으로 지원하여 설정이 필요 없음
• 오래된 패키지나 기존 코드와의 호환성이 좋음

단점

• 동기적으로 동작하여 성능 문제를 일으킬 수 있음
• Tree Shaking을 지원하지 않음

 

 

2. ECMAScript Modules (ESM)

ESM은 ES6에서 도입된 공식 모듈 시스템으로, 브라우저와 Node.js에서 모두 사용할 수 있다.

 

특징

• import와 export 키워드를 사용
• 비동기적으로 동작 (지연 로딩 가능)
• 브라우저에서 직접 실행 가능
• Tree Shaking(사용되지 않는 코드 제거)이 가능하여 번들 크기를 줄일 수 있음
• 엄격한 모듈 스코프를 가짐 (전역 스코프 오염 방지)

 

예제

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add, subtract } from './math.js';
console.log(add(2, 3)); // 5
console.log(subtract(5, 2)); // 3

 

장점

• 최신 JavaScript 표준을 따름
• 비동기적으로 동작하여 성능이 향상됨
• Tree Shaking을 지원하여 불필요한 코드 제거 가능

단점

• 기존 Node.js 환경에서는 기본적으로 지원되지 않으며 설정이 필요함
• 일부 패키지는 여전히 CommonJS 방식으로 작성됨

 

3. CJS와 ESM의 차이점 정리

문법	require, module.exports	import, export
실행 방식	동기적으로 로드	비동기적으로 로드
브라우저 지원	직접 실행 불가능	직접 실행 가능
Tree Shaking	지원하지 않음	지원함
성능	상대적으로 느림	비동기 처리로 최적화 가능

 

4. Node.js에서 ESM 사용하기

기본적으로 Node.js는 CJS를 사용하지만, package.json에 다음과 같이 설정하면 ESM을 사용할 수 있다.

{
  "type": "module"
}

또는 .mjs 확장자를 사용하면 ESM 모듈로 인식된다.

// math.mjs
export const multiply = (a, b) => a * b;

// main.mjs
import { multiply } from './math.mjs';
console.log(multiply(3, 4)); // 12

 

결론

esm, cjs에 대해서 알아봤다. 다음 포스팅에서는 cjs, esm을 둘 다 지원하면서 라이브러리를 운영할 수 있도록 npm 배포에 대해서 작성해볼 예정이다.