HTML Academy · Lekcja

Skrypty modułów ES — type=module

Ładowanie JavaScript jako modułów ES za pomocą type=module

Skrypty modułów ES — type=module to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Czym są moduły ES?

Moduł ES to plik JavaScript, który korzysta z deklaracji import i export. Moduły mają własny zakres (nie zanieczyszczają zakresu globalnego), domyślnie działają w trybie ścisłym i mają jawnie określone zależności — rozwiązując problemy z kolejnością tagów skryptów, które trwają od dziesięcioleci.

Znacznik skryptu modułu

<script type="module" src="app.js"> informuje przeglądarkę, że plik jest modułem. Przeglądarka analizuje importy, pobiera zależności równolegle i wykonuje punkt wejścia dopiero po pobraniu i skompilowaniu całego grafu zależności.

<script type="module" src="app.js"></script>

Moduły są wykonywane z odroczeniem

Skrypty modułów zachowują się tak, jakby miały ustawiony atrybut defer: są pobierane równolegle z analizowaniem kodu HTML i wykonywane po zakończeniu analizowania, w kolejności deklaracji. Element <script type="module"> można umieścić w dowolnym miejscu (nawet w <head>), nie blokując strony.

Importy używają specyfikatorów

Deklaracja importu używa specyfikatora — względnego adresu URL (./utils.js), bezwzględnego adresu URL (https://cdn.example.com/lib.js) albo nazwy bezpośredniej (lodash). Nazwy bezpośrednie wymagają mapy importów (omówionej w następnej części), ponieważ przeglądarka nie wie, do którego pliku się odnoszą.

// app.js
import { sum } from "./utils.js";
import { render } from "https://esm.sh/preact";
console.log(sum(1, 2));

Rozszerzenia plików są wymagane

Przeglądarki nie dodają automatycznie .js do specyfikatorów importu. import "./utils" kończy się niepowodzeniem, natomiast import "./utils.js" działa. Bundlery i Node mogą być bardziej wyrozumiałe, ale przeglądarka jest rygorystyczna, dlatego należy jawnie zapisywać rozszerzenie.

Wymagany jest CORS

Moduły są zawsze pobierane z użyciem CORS, nawet jeśli pochodzą z tego samego źródła. Pliki modułów z innych źródeł muszą zwracać odpowiedni nagłówek Access-Control-Allow-Origin, w przeciwnym razie import kończy się niepowodzeniem. Większość CDN-ów (esm.sh, jsdelivr, unpkg) jest poprawnie skonfigurowana od razu.

await na najwyższym poziomie

Moduły obsługują await na najwyższym poziomie — nie trzeba umieszczać go w funkcji asynchronicznej: const data = await fetch("/api").then(r => r.json()). Konsumenci modułu czekają z wykonaniem do momentu rozstrzygnięcia wyrażenia await na najwyższym poziomie.

// data.js
export const config = await fetch("/config.json").then(r => r.json());
// app.js (waits for data.js)
import { config } from "./data.js";
console.log(config);

Moduły są singletonami

Moduł jest ewaluowany dokładnie raz w ramach sesji, niezależnie od liczby innych modułów, które go importują. Obiekt eksportów jest współdzielony — każdy konsument widzi tę samą instancję, dzięki czemu moduły są wygodnym sposobem udostępniania singletonów, takich jak obiekt konfiguracji czy magazyn stanu.

Moduły osadzone

Moduły można również zapisywać bezpośrednio w dokumencie: <script type="module">import x from "./y.js"; ...</script>. Jest to przydatne w kodzie inicjalizującym lub eksperymentach, choć zewnętrzne pliki łatwiej debugować i buforować.

nomodule jako rozwiązanie awaryjne dla starszych przeglądarek

Połącz <script type="module"> z elementem <script nomodule src="legacy.js">. Nowoczesne przeglądarki uruchamiają moduł i ignorują skrypt nomodule, a starsze przeglądarki uruchamiają skrypt nomodule i ignorują moduł. Stosuje się to podczas migracji do aplikacji opartych wyłącznie na ESM.

Błędy i niepowodzenia importu

Nieudany import (błąd 404, CORS lub błąd składni) zgłasza wyjątek i uniemożliwia wykonanie całego grafu modułów. Panel Sieć pozwala znaleźć nieudane żądania modułów, a w Konsoli można odczytać dokładny komunikat o błędzie importu.

Sprawdzenie wiedzy

Dlaczego skrypty modułów zachowują się tak, jakby ustawiono dla nich defer, mimo że nie określono tego atrybutu?

Podsumowanie

Często zadawane pytania

Czy lekcja „Skrypty modułów ES — type=module” jest bezpłatna?

Tak — pełny tekst „Skrypty modułów ES — type=module” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Skrypty modułów ES — type=module”?

Ładowanie JavaScript jako modułów ES za pomocą type=module Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Skrypty modułów ES — type=module”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do HTML Academy