JavaScript-Importkarten werden jetzt browserübergreifend unterstützt

Mit Importkarten lässt sich der Import von ES-Modulen jetzt noch einfacher durchführen.

Thomas Steiner

ES-Module sind eine moderne Möglichkeit, JavaScript-Code in Webanwendungen einzubinden und wiederzuverwenden. Sie werden von modernen Browsern unterstützt und bieten gegenüber älteren, nicht modularen Ansätzen für die JavaScript-Entwicklung mehrere Vorteile.

Eine moderne Methode zur Verwendung von ES-Modulen ist das <script type="importmap">-Tag. Mit diesem Tag können Sie eine Zuordnung externer Modulnamen zu den entsprechenden URLs definieren. So lassen sich externe Module leichter in Ihren Code einbinden und verwenden.

Wenn Sie <script type="importmap"> verwenden möchten, müssen Sie es zuerst dem Abschnitt <head> Ihres HTML-Dokuments hinzufügen. Innerhalb des Tags können Sie ein JSON-Objekt definieren, das Modulnamen den entsprechenden URLs zuordnet. Beispiel:

<script type="importmap">
  {
    "imports": {
      "browser-fs-access": "https://unpkg.com/browser-fs-access@0.33.0/dist/index.modern.js"
    }
  }
</script>

Mit diesem Code wird ein einzelnes externes Modul mit dem Namen "browser-fs-access" definiert und der URL der Bibliothek browser-fs-access zugeordnet, die auf dem CDN unpkg gehostet wird. Nachdem Sie diese Zuordnung eingerichtet haben, können Sie das Schlüsselwort import verwenden, um die Bibliothek browser-fs-access in Ihren Code aufzunehmen. Das Keyword import ist nur innerhalb eines script-Tags mit dem type="module"-Attribut verfügbar.

<button>Select a text file</button>
<script type="module">
  import {fileOpen} from 'browser-fs-access';

  const button = document.querySelector('button');
  button.addEventListener('click', async () => {
    const file = await fileOpen({
      mimeTypes: ['text/plain'],
    });
    console.log(await file.text());
  });
</script>

Die Verwendung des <script type="importmap">-Tags und des import-Keywords bietet mehrere Vorteile gegenüber älteren, nicht modularen Ansätzen zur JavaScript-Entwicklung. Sie können damit die externen Module, von denen Ihr Code abhängt, klar und explizit angeben. So lässt sich Ihr Code leichter verstehen und pflegen. Insgesamt ist die Verwendung von ES-Modulen mit dem <script type="importmap">-Tag eine moderne und leistungsstarke Möglichkeit, JavaScript-Code in Webanwendungen einzubinden und wiederzuverwenden. So können Sie die Unterstützung für die Feature-Erkennung prüfen:

if (HTMLScriptElement.supports('importmap')) {
  // The importmap feature is supported.
}

Unterstützte Browser

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 108.
  • Safari: 16.4.

Weitere Informationen