[자바스크립트] CJS와 ESM(MJS) 차이

1. CommonJS, ES Modules는 무엇일까?

• 우리는 JS 모듈을 내보내거나 가져올 때 2가지 방식을 사용한다.
• 첫번째 방법은 module.exports로 모듈을 내보내고 require()로 접근하는 CJS(CommonJS),
• 두번째 방법은 export로 모듈을 내보내고 import로 접근하는 ESM(ES Modules)이 있다.

1. CJS 방식

• NodeJS에서 지원하는 모듈 방식으로, 초기 Node버전부터 사용되었다.
• 별도의 설정이 없다면 CJS가 기본값이다.
• 외부 모듈에 접근할 때는 require()을 사용한다.

// CJS 방법
module.exports = { ... }        // 모듈 내보낼 때

const utils = require('utils'); // 모듈 가져올 때

1-2. CJS의 특징

• require()는 즉시 스크립트를 실행하는 구조이다.
• top-level await가 불가능하므로 동기적으로 작동한다.
• 동기로 작동하므로 promise를 리턴하지 않고, module.exports에 설정된 값만을 리턴한다.
• import 순서에 따라 스크립트를 실행한다.

2. ESM 방식

import로 모듈에 접근하고 export로 모듈을 내보내는 ESM 방식

• ES Modules(MJS)는 ECMAScript에서 지원하는 방식이다.
• Node14에선 CJS, MJS이 공존하는데, 두 개를 동시에 사용하기 위해 별도의 처리가 필요하다.
• 모듈 시스템을 CJS(기본값)에서 ESM으로 변경할 시, JS 일부 동작이 변경된다. (호환성 문제)

// ESM 방법
export.default =()=> { ... }; // 모듈 내보낼 때

import utils from 'utils';    // 모듈 가져올 때

 

2-1. ESM 사용하는 법

• ESM 방식을 사용하기 위해선 package.json에 “type”: “module”을 설정해야 한다.

// package.json

{
  "type": "module",
}

2-2. ESM의 특징

• top-level await를 지원하므로 module loader가 비동기 환경에서 실행된다.
• 그러므로 CJS처럼 스크립트를 바로 실행하지 않고 import, export구문을 찾아 스크립트를 파싱한다.
• 파싱 단계에서 import, export 에러를 감지할 수 있다.
• 모듈을 병렬로 다운로드하지만, 실행은 순차적으로 한다.
• import와 export를 지원하지 않는 브라우저가 있기에, ESM 사용을 위해 번들러가 필요하다.

 

 

 

출처: https://mong-blog.tistory.com/entry/JSModule-CommonJS%EC%99%80-ES-Modules%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C