Import dynamique de modules ES en JavaScript

Les modules ES peuvent être importés dynamiquement. Cette fonctionnalité est parfois utile. Voyons comment cela se fait. Supposons que nous ayons le module suivant :

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

Supposons que nous voulions importer ce module non pas immédiatement, mais lors d'un certain événement, par exemple, un clic sur un bouton :

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

Importons le module à l'aide de la commande import :

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

La commande import renvoie une promesse comme résultat :

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

Dans la variable du callback se trouvera un objet avec les fonctions exportées :

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

Ce qui est exporté par défaut se trouvera dans la clé default :

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

On peut effectuer une déstructuration lors de l'import :

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

Créez un module exportant un tableau de noms de jours de la semaine. Au clic sur un bouton, importez ce module et affichez les jours de la semaine sous forme de liste ul.