CommonJS와 ESM의 차이점

개요

과제 할 때마다 프로젝트를 세로 세팅하는게 번거로워서 react 프로젝트를 스캐폴딩해주는 cli를 만들고 있었습니다.
노드니까 모듈 시스템을 cjs를 사용해야한다고 생각하고 있었는데, 정말 그런가 의구심이 들어 조사를 하였습니다.
결론적으로는 노드에서도 ESM을 사용할 수 있는데 어떤 차이점이 있는지 요약합니다.

CommonJS와 ESM의 차이점

트리쉐이킹

요즘 현대에는 vite 등 번들러들이 기본적으로 트리쉐이킹을 지원하여 사용되지 않는 코드를 없애 번들 크기를 줄여줍니다.
하지만 CommonJs는 모듈을 사용하고 있다는 것을 런타임이 되어서야 알 수 있어서 트리쉐이킹을 어렵게합니다.

ESM 호환성

CommonJs 모듈시스템 프로젝트에서는 외부 ESM 모듈 라이브러리를 사용할 수 없지만, ESM 모듈시스템 프로젝트에서는 외부 CommonJS 모듈 라이브러리를 사용할 수 있습니다.

CJS 라이브러리 가져오기 시 주의사항: 명명된 내보내기 제약

ESM(ECMAScript Modules) 파일에서 CJS(CommonJS) 라이브러리를 가져올 때, 명명된 내보내기(Named Export) 방식에는 중요한 제약이 따르며 의도대로 작동하지 않을 수 있습니다.

1. 문제의 원인: 모듈 시스템의 근본적인 차이
   • CJS: module.exports = {...}를 통해 단일 객체를 내보냅니다. 이는 Node.js 환경에서 require()를 통해 그 객체 전체를 동적으로 가져옵니다.
   • ESM: export const func = ...를 통해 모듈의 특정 부분을 정적으로 내보내며, import { func } from 'module' 방식으로 가져옵니다.

CJS 라이브러리는 명시적으로 명명된 내보내기 (exports.func = ...)를 사용하더라도, Node.js는 최종적으로 이를 하나의 module.exports 객체로 통합하여 처리합니다.

ESM 파일에서 CJS 라이브러리의 특정 함수나 변수를 명명된 내보내기 형태로 가져오려고 시도하면(예: import { func } from 'cjs-lib';), Node.js 환경에서 기본적으로 작동하지 않습니다.

예시:

// CJS 라이브러리 코드 (cjs-lib.js)
module.exports = {
  add: (a, b) => a + b,
  version: '1.0.0'
};

// ESM 애플리케이션 코드 (app.mjs)
import cjsLib from './cjs-lib.js'; // cjsLib 변수에 { add: ..., version: ... } 객체 전체가 할당됨

console.log(cjsLib.add(1, 2));   // 3 (정상 작동)
// console.log(cjsLib.version); // '1.0.0'
// import { add } from './cjs-lib.js'; // ❌ 이렇게는 사용 불가

결과

개발을 공부하던 당시(17-18년도 즈음) 노드 서버를 만들때 모두 require를 사용하여서 노드는 지금까지 ESM을 지원하지 않는 줄 알고있엇습니다.
그래서 cli 프로젝트를 노드로 돌리기 때문에 모듈시스템을 cjs를 사용했습니다.
하지만 노드에서는 ESM은 19년도부터 지원하고 있었다는 사실을 깨닫고 새삼 고정관념이 무섭다는 것을 느끼게 되었습니다.
ai를 사용해서 빠르게 만든 프로젝트였지만 앞으로 계속 초심을 찾고 이런 포인트들을 알아보면서 성장을 느껴보려합니다.

출처

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