[Node.js] CommonJS와 ESM

Node.js 환경에 한정되는 내용이다.

Node.js는 CommonJS와 ESM이라는 2가지 상이한 모듈시스템 구조를 가지고 있다.
과거에는 CommonJS만을 사용하다가 현재는 ESM 방식으로 옮겨오고 있는 추세이나, 아직도 CommonJS를 쓰는 지점이 꽤 존재한다.

모듈시스템을 어떤걸 쓸지는 파일 확장자로 명시할 수도 있지만, package.json에서 지정할 수도 있다.

type 필드에는 commonjs, 혹은 module을 넣을 수 있다.

CommonJS 모듈시스템 구조

Node.js 초기에 주로 사용했던 모듈시스템이다.
module.exports를 통해 export를 하고, require라는 특수한 모듈 로드 함수를 통해 import를 한다.

만약 함수를 외부에서 사용하게 하고 싶다면 이런 식으로 내보내고

저걸 쓴다면, 이런 식으로 require를 써서 가져와서 쓰는 것이다.

기본적인 구조는 딱히 특별한게 없다.

CommonJS 소스코드의 파일 확장자는 .js가 될 수도 있고, .cjs가 될 수도 있다.
package.json의 "type"을 "module"로 지정할 경우에는 .js로 사용할 수 없다.

ESM (ECMAScript Module)

ESM은 Node.js 12부터 지원되기 시작한 Javascript 표준 스타일의 모듈시스템이다.

이제 여기서는 import와 export 키워드를 통해서 명시적으로 모듈의 import/export를 처리한다.

위의 CommonJS 코드를 다시 ESM으로 치환하면, 이렇게 된다.

그리고 ESM을 쓸 경우 파일 확장자는 .mjs로 명시해야 한다.
package.json의 "type"을 "module"로 지정할 경우에는 .js로 사용할 수 있다.

CommonJS vs ESM ?

요즘에는 특별한 이유가 없다면 ESM 시스템을 쓰는 것이 권장되는 분위기다.
이렇게 된 것은 성능적인 이유가 가장 크다.

ESM을 사용해야 import/export 경로를 컴파일타임에 분석할 수 있고, 그래야 실제로 사용되지 않는 코드를 파악해서 최종 번들 코드에서 제거해버릴 수 있기 때문이다. 이를 Tree-Shaking이라고 부른다.
https://blog.naver.com/sssang97/223873640521

하지만 그럼에도 commonjs를 사용해야할 일은 종종 있다. import/export를 사용할 수 없는 환경이 간혹 있기 때문이다.

CommonJS와 ESM을 동시에 지원하게 만들기

범용 모듈을 npm에 배포한다면, CommonJS와 ESM을 둘 다 지원하게 할 수도 있다.
방법은 그리 복잡하진 않다. 다음과 같이 CommonJS와 ESM에 대한 진입점을 둘다 정의해주면 된다.

타입스크립트를 쓰든, 자바스크립트를 쓰든, 2가지 모듈 버전으로 dist 경로에 최종 결과물을 각각 빌드한 다음에 그걸 배포하는 것이 일반적인 방법이다.

그리고 여기서 조금 미묘한 부분이 있는데, 위처럼 패키지가 ESM을 쓸 경우에는 import를 .js로 해줘야 하고, 패키지가 CommonJS일 경우에는 반대로 지정해야 한다. 이렇게.

이걸 지키지 않으면 실제 모듈을 가져다 쓸때 꼬일 수가 있다.

참조
https://toss.tech/article/commonjs-esm-exports-field
https://tech.kakao.com/posts/605
https://nodejs.org/api/packages.html#determining-module-system