Pouvez-vous importer dynamiquement des modules ES6 basés sur des variables ?

Comment importer des modules de manière dynamique avec l'importation ES6

Dans les applications JavaScript modernes, l'importation de modules à l'aide de la syntaxe d'importation ES6 est une pratique courante. Cependant, que se passe-t-il si vous souhaitez importer un module de manière dynamique en fonction d'un nom de variable ?

Les limites de l'importation ES6

Malheureusement, l'instruction d'importation dans ES6 est analysable de manière statique , ce qui signifie qu'il ne peut pas dépendre des informations d'exécution. Cela signifie que vous ne pouvez pas importer directement un module basé sur un nom de variable.

Solution alternative : API Loader

Pour réaliser une importation dynamique de module, vous pouvez utiliser l'API Loader ( un polyfill). Cette API vous permet de charger des modules dynamiquement à l'aide de la méthode System.import. Voici comment cela fonctionne :

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

Ce code importera dynamiquement le module à partir du chemin construit à l'aide du nom de variable, puis exécutera le rappel fourni avec le module importé.

Considérez la compatibilité

Lors de l'utilisation de l'API Loader, il est important de prendre en compte la compatibilité avec différents environnements JavaScript. Certains navigateurs et versions de nœuds peuvent ne pas prendre en charge l'API Loader par défaut. Il est recommandé d'utiliser un polyfill pour garantir la compatibilité.

Conclusion

Bien que l'instruction d'importation dans ES6 soit analysable de manière statique, vous pouvez utiliser l'API Loader (polyfill) pour obtenir importation de module dynamique basée sur les noms de variables. Cette approche offre de la flexibilité et vous permet de créer un code plus dynamique et réutilisable.

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!