CommonJS와 ES Modules은 왜 함께 할 수 없는가?

CommonJS에 대하여

NodeJS에서 기본 모듈 시스템으로 채택하고 있다.

require()와 module.exports를 사용한다.

문제점

script 파일이 global scope 처럼 사용된다.

module.exports

1. 여러 개의 객체를 내보낼 경우, exports 변수의 fields로 할당한다.

const canadianToUs = function (canadian) {
  return roundTwoDecimals(canadian * exchangeRate);
};

function usToCanadian(us) {
  return roundTwoDecimals(us / exchangeRate);
}

exports.canadianToUs = canadianToUs; // 내보내기 1
exports.usToCanadian = usToCanadian; // 내보내기 2

2. 한개의 객체를 내보낼 경우, module.exports 변수 자체에 할당한다.

const obj = {};
obj.canadianToUs = function (canadian) {
  return roundTwoDecimals(canadian * exchangeRate);
};
obj.usToCanadian = function (us) {
  return roundTwoDecimals(us / exchangeRate);
};
module.exports = obj;

ES Modules

ES6부터 들어온 모듈 시스템이다.

ESM은 import와 export를 사용한다.

function과 variable을 module scope에 넣고 각 function은 function scope를 가진다.

export

named export

export const a = 1
export function fn(){}
export class Class{}

const a = 1
function fn(){}
class Class{}

export { a, fn, Class }

default export

// 변수값은 default로 선언, 내보내기가 동시에 되지 않는다
export default const a = 1 // xx

// fn.js
export default function fn(){}

// Class.js
export default class Class{}

CommonJS와 ES Modules은 함께할 수 없다.

노드14 에서는 옛날 스타일의 CommonJS와 (이하 CJS) 새로운 스타일의 ESM Scripts (이하 MJS) 두개가 공존하고 있다.

CJS는 import, export를 사용할 수 없고 ESM은 require(), module.exports를 사용할 수 없다.

둘의 차이점에 대해선 나중에 알아보도록 하자.

---

참조

CommonJS와 ES Modules는 왜 함께할 수 없는가?