JavaScriptにおけるESモジュールの動的インポート

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 リストとして表示してください。