Ta strona została przetłumaczona przez Cloud Translation API.

Mapy importu JavaScript są teraz obsługiwane w różnych przeglądarkach

Dzięki mapom importu importowanie modułów ES jest teraz znacznie łatwiejsze.

Thomas Steiner

Moduły ES to nowoczesny sposób na dołączanie i ponowne wykorzystywanie kodu JavaScript w aplikacjach internetowych. Są one obsługiwane przez nowoczesne przeglądarki i mają wiele zalet w porównaniu ze starszymi, niemodularnymi metodami tworzenia kodu JavaScript.

Nowoczesnym sposobem korzystania z modułów ES jest użycie tagu <script type="importmap">. Ten tag umożliwia zdefiniowanie mapowania nazw modułów zewnętrznych na odpowiadające im adresy URL, co ułatwia włączanie i używanie modułów zewnętrznych w kodzie.

Aby użyć podejścia <script type="importmap">, musisz najpierw dodać je do sekcji <head> dokumentu HTML. W tagu możesz zdefiniować obiekt JSON, który mapuje nazwy modułów na odpowiadające im adresy URL. Przykład:

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

Ten kod definiuje jeden moduł zewnętrzny o nazwie "browser-fs-access" i mapuje go na adres URL biblioteki browser-fs-access hostowanej w sieci CDN unpkg. Po skonfigurowaniu tego mapowania możesz użyć słowa kluczowego import, aby uwzględnić w kodzie bibliotekę browser-fs-access. Pamiętaj, że słowo kluczowe import jest dostępne tylko w tagu script z atrybutem type="module".

<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>

Używanie tagu <script type="importmap"> i słowa kluczowego import ma wiele zalet w porównaniu ze starszymi, niemodularnymi metodami tworzenia kodu JavaScript. Pozwala to jasno i wyraźnie określić zewnętrzne moduły, od których zależy Twój kod, co ułatwia jego zrozumienie i utrzymanie. Ogólnie rzecz biorąc, używanie modułów ES z tagiem <script type="importmap"> to nowoczesny i skuteczny sposób na dołączanie i ponowne wykorzystywanie kodu JavaScript w aplikacjach internetowych. Obsługę wykrywania funkcji możesz sprawdzić w ten sposób:

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

Browser Support

Source

Mapy importu JavaScript są teraz obsługiwane w różnych przeglądarkach Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Więcej informacji

Mapy importu JavaScript są teraz obsługiwane w różnych przeglądarkach