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

Dzięki mapom importu importowanie modułów ES stało się znacznie łatwiejsze.

Moduły ES to nowoczesny sposób na uwzględnianie i ponowne używanie kodu JavaScript w aplikacjach internetowych. Są one obsługiwane przez nowoczesne przeglądarki i zapewniają wiele korzyści w porównaniu ze starszymi, niemodułowymi podejściami do tworzenia kodu JavaScript.

Nowoczesny sposób korzystania z modułów ES to tag <script type="importmap">. Ten tag umożliwia zdefiniowanie mapowania nazw zewnętrznych modułów na odpowiadające im adresy URL, co ułatwia uwzględnianie w kodzie zewnętrznych modułów i z nich korzystanie.

Aby zastosować metodę <script type="importmap">, musisz najpierw dodać ją do sekcji <head> dokumentu HTML. W tagu możesz zdefiniować obiekt JSON, który mapuje nazwy modułów na odpowiadające im adresy URL. Na 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 związanej z unpkg. Dzięki temu możesz używać 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>

Stosowanie tagu <script type="importmap"> i słowa kluczowego import przynosi liczne korzyści w porównaniu do starszych, niemodułowych rozwiązań w zakresie programowania JavaScript. Umożliwia ona wyraźne określenie modułów zewnętrznych, od których zależy Twój kod. Dzięki temu łatwiej zrozumiesz i utrzymasz swój kod. Korzystanie z modułów ES z tagiem <script type="importmap"> to nowoczesny i skuteczny sposób na uwzględnianie i wielokrotne używanie kodu JavaScript w aplikacjach internetowych. Obsługę wykrywania funkcji możesz uzyskać w ten sposób:

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

Obsługa przeglądarek

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

Więcej informacji