동적으로 모듈 가져오기

동적으로 모듈 가져오기

모듈 경로로는 문자열만 가능하기 때문에 함수에 매개변수를 넘겨 줘서 결과값을 갖는 것은 할 수 없다. 또한, 런타임이나 조건부로 모듈을 불러올 수 없다.
그럼에도 불구하고 모듈을 동적으로 불러와야 한다면 어떻게 해야 할까?

import() 표현식

import(module) 표현식은 모듈을 읽고 이 모듈이 내보내는 것들을 모두 포함하는 객체를 담은 이행된 프로미스를 반환한다.

1
2
3
4
5
let modulePath = prompt("어떤 모듈을 불러오고 싶으세요?");

import(modulePath)
.then(obj => //<모듈 객체>)
.catch(err => //<로딩 엘, e.g 해당하는 모듈이 없는 경우>)
1
2
3
4
5
6
7
8
// say.js
export function hi() {
alert("안녕하세요.");
}

export function bye() {
alert("안녕히 가세요.");
}

let module = await import(modulePath) 와 같이 가져올 수 도 있음.

1
2
3
4
let { hi, bye } = await import(modulePath);

hi();
bye();

say.js 에 export default 추가

1
2
3
4
// say.js
export default function () {
alert("export default한 모듈을 불러왔습니다!");
}

export defaul로 내보냈으면 default 프로퍼티를 사용하여 가져올수 있다.

1
2
3
4
let obj = await import("./say.js");
let say = obj.default;

say();

import() 는 함수가 아니다. super()처럼 괄호를 쓰는 특별한 문법이다.