Importations ES6 sensibles aux variables

Dans ES6, l'instruction import fournit un moyen pratique d'importer des modules dans votre code. Cependant, que se passe-t-il si vous devez importer un module basé sur un nom de variable au moment de l'exécution ? Cela peut survenir dans les scénarios où vous chargez dynamiquement des modules en fonction des paramètres de configuration.

Importations statiques

Malheureusement, l'instruction d'importation dans ES6 est analysée de manière statique. Cela signifie que les modules importés doivent être connus au moment de la compilation. Par conséquent, vous ne pouvez pas utiliser de noms de variables pour spécifier les modules à importer.

API Loader

Pour charger dynamiquement des modules, vous devez utiliser l'API Loader. Cette API fournit une fonction appelée System.import() qui accepte une chaîne spécifiant le module à charger. L'exemple suivant montre comment vous pouvez l'utiliser pour charger un module basé sur un nom de variable :

System.import('./utils/'   variableName).then(function(module) {
  console.log(module);
});

La fonction System.import() renvoie une promesse qui résout le module chargé. Vous pouvez ensuite accéder aux membres exportés du module à l'aide de l'objet module.

Considérations de compatibilité

L'API Loader est prise en charge dans les navigateurs modernes et Node.js. Cependant, vous devrez peut-être utiliser un polyfill pour obtenir la compatibilité avec les anciens navigateurs.