더북(TheBook)

dynamic.mjs

const a = false;
if (a) {
    import './func.mjs';
}
console.log('성공');

콘솔

$ node dynamic.mjs
file:///C:/Users/speak/WebstormProjects/nodejs-book/ch3/3.3/dynamic.mjs:3
    import './func.mjs';
           ^^^^^^^^^^^^

SyntaxError: Unexpected string

하지만 ES 모듈은 if문 안에서 import하는 것이 불가능합니다. 이럴 때 다이내믹 임포트를 사용합니다. dynamic.mjs를 다음과 같이 수정해봅시다.

dynamic.mjs

const a = true;
if (a) {
    const m1 = await import('./func.mjs');
    console.log(m1);
    const m2 = await import('./var.mjs');
    console.log(m2);
}

콘솔

$ node dynamic.mjs
[Module: null prototype] { default: [Function: checkOddOrEven] }
[Module: null prototype] { even: 'MJS 짝수입니다', odd: 'MJS 홀수입니다' }

import라는 함수를 사용해서 모듈을 동적으로 불러올 수 있습니다. importPromise를 반환하기에 await이나 then을 붙여야 합니다. 위 코드에서는 async 함수를 사용하지 않았는데, ES 모듈의 최상위 스코프에서는 async 함수 없이도 await할 수 있습니다. CommonJS 모듈에서는 안 됩니다.

결괏값도 눈여겨볼 필요가 있습니다. export default의 경우 import할 때도 default라는 속성 이름으로 import됩니다. 참고로 CommonJS 모듈에서 module.exports한 것도 default라는 이름으로 import됩니다.