Dzięki mapom importowania importowanie modułów ES znacznie usprawnia.
Moduły ES to nowoczesny sposób umieszczania i wykorzystywania kodu JavaScript w aplikacjach internetowych. Są obsługiwane przez nowoczesne przeglądarki i zapewniają kilka korzyści w porównaniu ze starszymi, niemodułowymi podejściami do programowania.
Nowoczesnym sposobem korzystania z modułów ES jest tag <script type="importmap">
. Ten tag umożliwia zdefiniowanie mapowania nazw modułów zewnętrznych na odpowiadające im adresy URL, co ułatwia uwzględnianie modułów zewnętrznych w kodzie i korzystanie z nich.
Aby użyć metody <script type="importmap">
, musisz najpierw dodać ją do sekcji <head>
dokumentu HTML. Wewnątrz tego 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 CDN unpkg. Dzięki temu możesz używać słowa kluczowego import
, aby uwzględnić w kodzie bibliotekę fs-access. 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>
Zastosowanie tagu <script type="importmap">
i słowa kluczowego import
ma kilka zalet w porównaniu z starszymi, niemodułowymi podejściami do programowania. Umożliwia jasny i jasny wybór modułów zewnętrznych, od których zależy kod, co ułatwia jego zrozumienie i obsługę. Ogólnie rzecz biorąc, korzystanie z modułów ES z tagiem <script type="importmap">
to nowoczesny i skuteczny sposób na umieszczanie i ponownie wykorzystywanie kodu JavaScript w aplikacjach internetowych. Pomoc możesz wykryć w ten sposób:
if (HTMLScriptElement.supports('importmap')) {
// The importmap feature is supported.
}
Obsługa przeglądarek
- 89
- 89
- 108
- 16.4