[wake up!] cjs, esm

cjs, esm?

Dan Fabulich의 Node Modules at War: Why CommonJS and ES Modules Can’t Get Along
번역글 왜 CommonJS와 ES Modules는 함께 쓸 수 없는가

Node 14에서는 현재 두 가지 종류의 스크립트가 있다. 하나는 옛날 방식인 CJS(CommonJS) 스크립트고
다른 하나는 import와 export를 사용하는 새로운 방식의 ESM(ECMAScript Modules) 스크립트이다.
ESM 스크립트에서 import와 export는 언어의 일부이다.
CJS와 마찬가지로 named exports와 default export에 대한 두 가지 구문이 있다.

---

• CommonJS에서 require()는 동기적으로 동작한다.
  • require()는 데이터를 읽어온 후, 그 자체로 I/O를 하거나 사이드 이펙트가 있을 수 있는 스크립트를 즉시 실행시킨다.
• ESM에서는 비동기적인 단계들을 거쳐 모듈 로더가 실행된다.
  • import한 스크립트를 실행시키지 않고 import와 export하는 구문이 있는지 스크립트를 파싱한다.
    • named imports에서 오타를 감지하여 import한 스크립트를 실행시키지 않고 에러를 발생시킨다.
  • import한 스크립트를 비동기적으로 다운로드하고 파싱한 후 dependency들의 "module graph"를 빌드한다.
  • ES 모듈 그래프에서 모든 "형제(siblings)" 스크립트(같은 레벨의 스크립트)는 병렬적으로 다운로드되지만, 실행은 로더 스펙에 정의된 순서대로 실행한다.

개발은 cjs? esm?

• cjs, esm은 성능 별개로 같은 js 언어의 로더, 실행방식 차이점에서 주목이 된다. ex) top-level-await

ESM은 Javascript에서 많은 것들을 바꿔놓는다. ESM 스크립트에서는 기본적으로 strict mode(use strict)를 사용하고 this는 전역 객체를 참조하지 않고, scope가 다르게 동작한다. 기본값인 CJS를 ESM으로 바꾸면 이전 버전과의 호환성에서 큰 문제가 발생할 수 있다.

• 이것을 하나로 통일하는것은 불가능함과 해당 프로젝트가 ESM이거나 CJS 일 수 있기 때문에 개발자가 모두 사용할 수 있도록 두개의 format을 제공해 주면 좋다.
  
  1. 라이브러리에 CJS 버전을 제공한다.
  2. CJS named exports를 감싸는 ESM wrapper를 제공한다.
  3. package.json에 exports map을 추가한다.