CommonJS vs ES module

commonJS

• commonJS는 Node.js의 디폴트 모듈 시스템이다.
• require(), module.exports 문법을 사용한다.
• commonJS 문법은 런타임에 파싱되므로 require 는 코드 어디에서나 사용할 수 있다. if 문 안에서도, loop 안에서도 사용할 수 있다.
• commonJS는 sync하게 하나씩 순차적으로 모듈을 로드하기 때문에 큰 어플리케이션에서는 퍼포먼스 이슈가 있을 수 있다.

ES module (ESM)

• ES module은 자바스크립트 공식 모듈 시스템이고 거의 모든 모던 웹 브라우저가 ES module을 지원한다.
• 다만 Node.js에서는 commonJS가 디폴트였고, ESM은 실험적으로만 제공하다가 v13.2.0 에서부터 ESM을 stable로 제공하기 시작했다.
• ESM은 import, export 문법을 사용하여 commonJS보다 readable 하다.
• ESM의 import문은 항상 파일의 최상단에 위치해야한다.
• ESM은 모듈을 async하게 로드한다.
• ESM을 프로젝트에 적용하려면 js파일을 mjs확장자로 바꾸어 사용하거나, package.json에 "type": "module" 을 선언해주는 방법이 있다.
• React나 Vue는 ESM을 사용하는 대신 하위호환을 맞추기 위해 Babel 트랜스파일러를 사용하여 commonJS로 컴파일한다.

Ref

https://blog.logrocket.com/commonjs-vs-es-modules-node-js/