JavaScript-Importkarten werden jetzt browserübergreifend unterstützt

Mit Import Maps wird das Importieren von ES-Modulen jetzt viel einfacher.

Thomas Steiner

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

Eine moderne Möglichkeit, ES-Module zu verwenden, ist das <script type="importmap">-Tag. Mit diesem Tag können Sie eine Zuordnung von externen Modulnamen zu den entsprechenden URLs definieren. So ist es einfacher, externe Module in Ihren Code einzufügen und zu 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 ihren entsprechenden URLs zuordnet, z. B.:

<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 browser-fs-access-Bibliothek zugeordnet, die im unpkg-CDN gehostet wird. Nachdem Sie diese Zuordnung eingerichtet haben, können Sie das import-Schlüsselwort verwenden, um die browser-fs-access-Bibliothek in Ihren Code einzubinden. Das Keyword import ist nur innerhalb eines script-Tags 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-Schlüsselworts bietet mehrere Vorteile gegenüber älteren, nicht modularen Ansätzen für die JavaScript-Entwicklung. So können Sie die externen Module, von denen Ihr Code abhängt, klar und explizit angeben. Das macht es einfacher, Ihren Code zu verstehen und zu warten. Insgesamt ist die Verwendung von ES-Modulen mit dem <script type="importmap">-Tag eine moderne und leistungsstarke Methode, um JavaScript-Code in Webanwendungen einzubinden und wiederzuverwenden. So erkennen Sie die Unterstützung von Funktionen:

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

Browser Support

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

Source

Weitere Informationen