Variablenfähige ES6-Importe

In ES6 bietet die Importanweisung eine praktische Möglichkeit, Module in Ihren Code zu importieren. Was aber, wenn Sie zur Laufzeit ein Modul basierend auf einem Variablennamen importieren müssen? Dies kann in Szenarien auftreten, in denen Sie Module basierend auf Konfigurationseinstellungen dynamisch laden.

Statische Importe

Leider wird die Importanweisung in ES6 statisch analysiert. Das bedeutet, dass die zu importierenden Module zur Kompilierungszeit bekannt sein müssen. Daher können Sie keine Variablennamen verwenden, um zu importierende Module anzugeben.

Loader-API

Um Module dynamisch zu laden, müssen Sie die Loader-API verwenden. Diese API stellt eine Funktion namens System.import() bereit, die eine Zeichenfolge akzeptiert, die das zu ladende Modul angibt. Das folgende Beispiel zeigt, wie Sie damit ein Modul basierend auf einem Variablennamen laden können:

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

Die Funktion System.import() gibt ein Versprechen zurück, das in das geladene Modul aufgelöst wird. Anschließend können Sie über das Modulobjekt auf die exportierten Mitglieder des Moduls zugreifen.

Kompatibilitätsüberlegungen

Die Loader-API wird in modernen Browsern und Node.js unterstützt. Möglicherweise müssen Sie jedoch eine Polyfüllung verwenden, um Kompatibilität mit älteren Browsern zu erreichen.