Importation conditionnelle des modules ES6

Dans ES6, les mots-clés « importer » et « exporter » ne peuvent apparaître qu'au niveau supérieur d'un module. Cela empêche l’importation conditionnelle, une exigence courante dans de nombreuses applications. Cette question explore une solution à ce problème.

Au départ, l'utilisateur a tenté d'utiliser des instructions conditionnelles pour importer un module, mais cela a entraîné une SyntaxError. L'utilisateur a ensuite étudié à l'aide de System.import, mais a rencontré des difficultés pour localiser les ressources nécessaires.

La solution à l'importation conditionnelle est fournie en introduisant les importations dynamiques dans ECMAScript 2020. Les importations dynamiques utilisent la fonction import(), qui prend un argument de chaîne représentant le nom du module. La fonction renvoie une promesse qui résout le module importé.

Voici comment importer conditionnellement un module à l'aide d'importations dynamiques :

if (condition) {
  import('something')
  .then((something) => {
    console.log(something.something);
  });
}

Dans cet exemple, le mot-clé 'import' apparaît dans une instruction conditionnelle. La fonction import() renvoie une promesse qui est ensuite résolue et le module est affecté à la variable « quelque chose ». Cela permet l'importation conditionnelle du module sans erreurs de syntaxe.