Динамическая загрузка модулей

Модули можно загружать динамически в любом месте другого модуля. В этом случае надо помнить, что модуль загружается асинхронно, а результат функции 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 из загруженного модуля. Иначе выводим некоторую строку.