# Динамический импорт ES модулей в JavaScript

ES модули можно импортировать динамически. Эта возможность иногда бывает полезной. Давайте посмотрим, как это делается. Пусть у нас есть следующий модуль:

`export function func1() { return '1' } export function func2() { return '2' } export default function() { return 'text'; };`

Пусть мы хотим импортировать этот модуль не сразу, а по некоторому событию, например, по клику на кнопку:

`btn.addEventListener('click', function() { });`

Импортируем модуль с помощью команды `import`:

`btn.addEventListener('click', function() { import('./test.js'); });`

Команда `import` своим результатом возвращает промис:

`btn.addEventListener('click', function() { import('./test.js').then(mod => { }); });`

В переменную коллбэка попадет объект с экспортированными функциями:

`btn.addEventListener('click', function() { import('./test.js').then(mod => { let res1 = mod.func1(); let res2 = mod.func2(); console.log(res1, res2); }); });`

То, что экспортируется по умолчанию, будет лежать в ключе `default`:

`btn.addEventListener('click', function() { import('./test.js').then(mod => { let dfn = mod.default; console.log(dfn); }); });`

Можно выполнять деструктуризацию при импорте:

`btn.addEventListener('click', function() { import('./test.js').then(({func1, func2}) => { let res1 = func1(); let res2 = func2(); console.log(res1, res2); }); });`

Сделайте модуль, экспортирующий массив названий дней недели. По нажатию на кнопку импортируйте этот модуль и выведите дни недели в виде списка `ul`.

← →
↑
en ru