Bedingter Import von ES6-Modulen

In ES6 können die Schlüsselwörter „import“ und „export“ nur auf der obersten Ebene von a erscheinen Modul. Dies verhindert den bedingten Import, eine häufige Anforderung in vielen Anwendungen. In dieser Frage wird eine Lösung für dieses Problem untersucht.

Zunächst versuchte der Benutzer, bedingte Anweisungen zum Importieren eines Moduls zu verwenden, was jedoch zu einem SyntaxError führte. Der Benutzer untersuchte dann mithilfe von System.import, stieß jedoch auf Schwierigkeiten, die erforderlichen Ressourcen zu finden.

Die Lösung für den bedingten Import wird durch die Einführung dynamischer Importe in ECMAScript 2020 bereitgestellt. Dynamische Importe verwenden die Funktion import(), die eine benötigt String-Argument, das den Modulnamen darstellt. Die Funktion gibt ein Versprechen zurück, das in das importierte Modul aufgelöst wird.

So können Sie ein Modul mithilfe dynamischer Importe bedingt importieren:

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

In diesem Beispiel erscheint das Schlüsselwort „import“ in einer bedingten Anweisung. Die Funktion import() gibt ein Promise zurück, das dann aufgelöst wird und das Modul der Variablen „something“ zugewiesen wird. Dies ermöglicht den bedingten Import des Moduls ohne Syntaxfehler.