JavaScript-Importkarten werden jetzt browserübergreifend unterstützt

Durch das Importieren von Karten wird das Importieren von ES-Modulen jetzt wesentlich besser.

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 der JavaScript-Entwicklung mehrere Vorteile.

Eine moderne Möglichkeit 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. Dadurch wird es einfacher, externe Module in Ihren Code aufzunehmen und zu verwenden.

Wenn Sie den <script type="importmap">-Ansatz verwenden möchten, müssen Sie ihn zuerst dem <head>-Abschnitt 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>

Dieser Code definiert ein einzelnes externes Modul mit dem Namen "browser-fs-access" und ordnet es der URL der Bibliothek browser-fs-access zu, die im unpkg-CDN gehostet wird. Nachdem diese Zuordnung eingerichtet ist, können Sie jetzt das Schlüsselwort import verwenden, um die Bibliothek „browser-fs-access“ in Ihren Code aufzunehmen. Das Keyword import ist nur in einem script-Tag mit dem Attribut type="module" 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 gegenüber älteren, nicht modularen Ansätzen der JavaScript-Entwicklung mehrere Vorteile. Damit können Sie die externen Module, von denen Ihr Code abhängt, klar und explizit angeben, was das Verständnis und die Pflege Ihres Codes erleichtert. 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 Featureerkennung unterstützen:

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

Unterstützte Browser

  • 89
  • 89
  • 108
  • 16.4

Weitere Informationen