commonjs와 ESM의 차이

사내 배포용으로 라이브러리를 개발 중인데 처음 보는 이상한 오류가 떴다.

 

module exports에 관한 오류

모노레포 storybook-docs 레포에서

빌드된 tttable(임시 작명이라 가명임;;) 레포의 index.js를 required 하면 오류가 나는것 

평소에 commonjs와 esm, amd 등이 뭔지 헷갈려서 이참에 정리겸 간단하게 요약해본다.

 

CommonJS(CJS)란?

// 모듈 정의
const circle = require('./circle.js');

const radius = 5;
console.log(`반지름 ${radius}인 원의 넓이: ${circle.area(radius)}`);
console.log(`반지름 ${radius}인 원의 둘레: ${circle.circumference(radius)}`);

 

JavaScript를 위한 모듈 로딩 시스템 표준 중 하나이다.

Node.js와 같은 서버 측 JavaScript 환경에서 사용되며, 모듈을 정의하고 로드하기 위한 표준화된 방법을 제공한다. 

node.js나 프론트엔드의 config 파일에서 많이 본 require를 사용한 방식이 commonJS 방식이다.

 

초기 Javascript는 모듈 시스템이 없었기 때문에 모듈화를 위해 commonJS,  AMD 등이 개발되어 사용되었다.

commonJS는 동기적으로 모듈을 로드하기 위해 사용되고,

비동기를 따로 다루기 위해 AMD(Asynchoronous Module Definition)이 비동기적으로 모듈을 다루는 것에 대한 표준안으로 제시되었다고 한다.

 

ECMAScript Module(ESM)이란? 

// 모듈 불러오기
import circle from './circle.mjs';

// 모듈 사용
const radius = 5;
console.log(`반지름 ${radius}인 원의 넓이: ${circle.area(radius)}`);
console.log(`반지름 ${radius}인 원의 둘레: ${circle.circumference(radius)}`);

 

 ES6부터 표준화 된 모듈 시스템으로, 클라이언트에서 흔히 사용하는 import, export를 사용하는 방식이다.

브라우저에서 사용하기 위해서는 type="module"을 script 혹은 package.json에 명시해주면 된다.

 

 

토스 블로그의 CommonJS와 ESM 에 대한 글에 따르면, CJS 모듈은 동기적으로 작동하고 ESM Module은

비동기적으로 작동한다.

 

그래서 ESM에서 CJS를 import 가능하지만 그 역은 안되는데 그 이유는 CJS는 top-level await를 지원하지 않기 때문이며

그 외에도 여러가지 다른 이유가 있어서 서로 호환하기가 쉽지 않다고 한다. (자세한건 링크 참고)

 

즉, 라이브러리를 배포하려면 CJS와 ESM 버젼을 둘다 지원해야 하는것!

 

 

지원하는 방법은 위 코드처럼 package.json에 exports를 두가지 버젼으로 명시해주면 된다.

 

주의할 점은 package.json에 type:"module"가 명시되어 있으면 ESM으로 인정되며 main이 index.js(ESM)로 인식되고, module이 index.cjs(CJS)로 인식될 수 있다.

반대로 type:"module"가  없으면 main이 index.js(CJS)이고 module이 index.mjs로 인식될 수 있기 때문에

exports를 통해 버젼별로 선언해줘야 한다.

 

캡처 찍고 보니 types 설정을 빼먹은거 같은데 내일 넣어야겠다.

(type도 index.d.mts, index.d.cts로 명명된다 함) 

 

 

옛날에 types: module이 정확히 왜 필요한건지 몰랐는데 이번에 알게되어 

의미 깊은 하루였다.

 

reference 

 

https://devblog.kakaostyle.com/ko/2022-04-09-1-esm-problem/

ESM 삽질기

 

https://toss.tech/article/commonjs-esm-exports-field

CommonJS와 ESM에 모두 대응하는 라이브러리 개발하기: exports field

 

https://velog.io/@yesbb/%EB%AA%A8%EB%93%88-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%9D%98-%EC%97%AD%EC%82%AC-%EA%B7%B8%EB%A6%AC%EA%B3%A0-ESM