Comment puis-je importer des modules dynamiquement dans ES6 en fonction de variables ?

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 statiquement. 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 en fonction d'un nom de variable :

<code class="javascript">System.import('./utils/' + variableName).then(function(module) {
  console.log(module);
});</code>

La fonction System.import() renvoie une promesse qui se résout au 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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!