ES-modulscripts: type=module
Indlæs JavaScript som ES-moduler med type=module
ES-modulscripts: type=module er en gratis HTML Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i HTML Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML Academy-kurset indeholder 4 lektioner i alt.
Hvad er ES-moduler?
Et ES-modul er en JavaScript-fil, der bruger erklæringerne import og export. Moduler har deres eget gyldighedsområde (ingen forurening af det globale gyldighedsområde), strict-tilstand som standard og eksplicitte afhængigheder – hvilket løser årtiers problemer med rækkefølgen af script-elementer.
Modulscript-tagget
<script type="module" src="app.js"> fortæller browseren, at filen er et modul. Browseren analyserer importer, henter afhængigheder parallelt og kører først startmodulet, når hele afhængighedsgrafen er hentet og kompileret.
<script type="module" src="app.js"></script>Moduler udskydes
Modulscript opfører sig, som om det havde defer: det downloades parallelt med HTML-fortolkningen og køres efter fortolkningen i erklæringsrækkefølge. Du kan placere <script type="module"> hvor som helst (selv i <head>) uden at blokere siden.
Importer bruger specifikatorer
En import-erklæring bruger en specifikator – enten en relativ URL (./utils.js), en absolut URL (https://cdn.example.com/lib.js) eller et ubundet navn (lodash). Ubundne navne kræver et importkort (som gennemgås i næste afsnit), fordi browseren ikke ved, hvilken fil de henviser til.
// app.js
import { sum } from "./utils.js";
import { render } from "https://esm.sh/preact";
console.log(sum(1, 2));Filendelser er påkrævede
Browsere tilføjer ikke automatisk .js til importspecifikatorer. import "./utils" mislykkes; import "./utils.js" virker. Bundlere og Node kan være mere lempelige; browseren er streng, så skriv filendelsen eksplicit.
CORS er påkrævet
Moduler hentes altid med CORS, også når de har samme oprindelse. Modulfiler fra andre oprindelser skal sende den passende Access-Control-Allow-Origin-header, ellers mislykkes importen. De fleste CDN'er (esm.sh, jsdelivr, unpkg) konfigurerer dette korrekt fra start.
Await på øverste niveau
Moduler understøtter await på øverste niveau – der kræves ingen wrapper omkring en async-funktion: const data = await fetch("/api").then(r => r.json()). Modulets brugere venter, indtil await på øverste niveau er færdig, før de køres.
// 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);Moduler er singletons
Et modul evalueres præcis én gang pr. session, uanset hvor mange andre moduler der importerer det. Eksportobjektet deles – alle brugere ser den samme instans, hvilket gør moduler til en enkel måde at dele singletons som et konfigurationsobjekt eller et tilstandsregister.
Inline-moduler
Du kan også skrive moduler direkte i HTML'en: <script type="module">import x from "./y.js"; ...</script>. Det er nyttigt til opstartskode eller eksperimenter, selvom eksterne filer er nemmere at fejlfinde og cachelagre.
nomodule til understøttelse af ældre browsere
Sæt et <script type="module"> sammen med <script nomodule src="legacy.js">. Moderne browsere kører modulet og ignorerer nomodule-scriptet; ældre browsere kører nomodule-scriptet og ignorerer modulet. Det bruges under overgangen til apps, der udelukkende bruger ESM.
Fejl og mislykkede importer
En import, der mislykkes (404, CORS, syntaksfejl), udløser en fejl og forhindrer hele modulgrafen i at blive kørt. Brug Netværk-panelet til at finde mislykkede modulanmodninger og konsollen til at læse den faktiske fejlmeddelelse fra importen.
Test din viden
Hvorfor opfører modulscript sig, som om defer var angivet, uden at du selv angiver det?
Opsummering
<script type="module"> indlæser ES-moduler – filer i strict-tilstand med import- og export-erklæringer, der opløser en afhængighedsgraf. Moduler udskydes som standard, kræver eksplicitte filendelser, hentes med CORS, evalueres som singletons og understøtter await på øverste niveau. Brug nomodule til understøttelse af ældre browsere, og hold øje med manglende filendelser, når importer mislykkes uden en tydelig fejl.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “ES-modulscripts: type=module” gratis?
Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “ES-modulscripts: type=module”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. HTML Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “ES-modulscripts: type=module”?
Indlæs JavaScript som ES-moduler med type=module Du øver dig i HTML Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på HTML Academy?
Der kræves ingen tidligere erfaring. HTML Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “ES-modulscripts: type=module”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne HTML Academy-lektion?
Ja. Alle HTML Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- ES-modulscripts: type=module
- Import maps: importmap
- Dynamisk import() i moduler
- Grundlæggende om Module Federation