Модули можно загружать динамически в любом месте другого модуля. В этом случае надо помнить, что модуль загружается асинхронно, а результат функции import будет представлять объект Promise, результатом которого собственно и будет загружаемый модуль.
import("путь_к_модулю").then((module) =&ggt; {
// действия с модулем
});
Также можно использовать оператор await для получения объекта модуля:
let module = await import("путь_к_модулю");
Например, пусть у нас определен следующий модуль message.js:
export const hello = "Hello Work!";
export default function sayHello() {
console.log("Hello METANIT.COM");
}
Здесь экспортируются константа hello и функция sayHello(), причем функция экспортируется по умолчанию.
Динамически подключим этот модуль в другой модуль main.js:
console.log("Main module starts");
import("./message.js").then((module) => {
module.default();
console.log(module.hello);
});
console.log("Main module ends");
Здесь функция в методе then() в качестве параметра получает загруженный модуль. Далее мы можем обращаться к компонентам модуля по имени. Например, обращение к константе hello
module.hello
Однако если какой-то компонент экспортируется по умолчанию, то для обращения к нему применяется ключевое слово default. Так, поскольку
функция sayHello() экспортируется по умолчанию, то выражение:
module.default();
фактически будет представлять вызов данной функции.
Консольный вывод программы:
Main module starts Main module ends Hello METANIT.COM Hello Work!
Также в данном случае можно было бы применить оператор await для получения загруженного модуля:
console.log("Main module starts");
const module = await import("./message.js");
module.default();
console.log(module.hello);
console.log("Main module ends");
Динамческая загрузка модулей открывает нам возможность загружать модули в различных ситуациях, в том числе и в функциях, циклических и условных конструкциях и в других частях пограммы. Например, мы могли бы загружать модуль в зависимости от условия:
const hour = new Date().getHours();
if(hour < 17){
const module = await import("./message.js");
console.log(module.hello);
}
else{
console.log("Go home");
}
В данном случае получаем текущий час. И если он меньше 17, то загружаем модуль и выводим значение константы hello из загруженного модуля. Иначе выводим некоторую строку.
