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은 함께할 수 없다.

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

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

---

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