ES-modulskript type=module
Last inn JavaScript som ES-moduler med type=module
ES-modulskript type=module er en gratis leksjon i HTML Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i HTML Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i HTML Academy inneholder totalt 4 leksjoner.
Hva er ES-moduler?
En ES-modul er en JavaScript-fil som bruker deklarasjonene import og export. Moduler har sitt eget omfang (ingen forurensing av det globale omfanget), strict mode som standard og eksplisitte avhengigheter – noe som løser flere tiår med problemer knyttet til rekkefølgen på script-tagger.
Modulskript-taggen
<script type="module" src="app.js"> forteller nettleseren at filen er en modul. Nettleseren analyserer importer, henter avhengigheter parallelt og kjører først entry-modulen når hele avhengighetsgrafen er lastet ned og kompilert.
<script type="module" src="app.js"></script>Moduler kjøres utsatt
Modulskript oppfører seg som om de hadde defer: de lastes ned parallelt med HTML-analyseringen og kjøres etter analyseringen, i deklarasjonsrekkefølge. De kan plassere <script type="module"> hvor som helst (også i <head>) uten å blokkere siden.
Importer bruker spesifikatorer
En import-setning bruker en spesifikator – enten en relativ URL (./utils.js), en absolutt URL (https://cdn.example.com/lib.js) eller et bare navn (lodash). Bare navn krever et import map (som omtales i neste del), fordi nettleseren ikke vet hvilken fil de peker på.
// app.js
import { sum } from "./utils.js";
import { render } from "https://esm.sh/preact";
console.log(sum(1, 2));Filendelser er påkrevd
Nettlesere legger ikke automatisk til .js i importspesifikatorer. import "./utils" mislykkes; import "./utils.js" fungerer. Bundlere og Node kan være mer tilgivende, men nettleseren er streng, så skriv filendelsen eksplisitt.
CORS er påkrevd
Moduler hentes alltid med CORS, også når de kommer fra samme origin. Modul-filer fra andre origins må sende den riktige Access-Control-Allow-Origin-headeren, ellers mislykkes importen. De fleste CDN-er (esm.sh, jsdelivr, unpkg) konfigurerer dette riktig med én gang.
await på toppnivå
Moduler støtter await på toppnivå – det kreves ingen innpakking i en async-funksjon: const data = await fetch("/api").then(r => r.json()). Modulens brukere venter til await-uttrykket på toppnivå er ferdig, før de kjører.
// 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 singletoner
En modul evalueres nøyaktig én gang per økt, uavhengig av hvor mange andre moduler som importerer den. Eksportobjektet deles – alle brukere ser den samme instansen, noe som gjør moduler til en ryddig måte å dele singletoner på, for eksempel et konfigurasjonsobjekt eller et tilstandsregister.
Inline-moduler
De kan også skrive moduler direkte i HTML: <script type="module">import x from "./y.js"; ...</script>. Dette er nyttig for oppstartskode eller eksperimenter, men eksterne filer er enklere å feilsøke og mellomlagre.
nomodule for eldre nettlesere
Kombiner en <script type="module"> med en <script nomodule src="legacy.js">. Moderne nettlesere kjører modulen og ignorerer nomodule-skriptet; eldre nettlesere kjører nomodule-skriptet og ignorerer modulen. Dette brukes under overgangen til apper som bruker ESM overalt.
Feil og importfeil
En import som mislykkes (404, CORS, syntaksfeil), utløser en feil og hindrer hele modulgrafen i å kjøre. Bruk Network-panelet til å finne mislykkede modulforespørsler, og Console-panelet til å lese den faktiske feilmeldingen for importen.
Kunnskapssjekk
Hvorfor oppfører modulskript seg som om defer var angitt, uten at De angir det?
Sammendrag
<script type="module"> laster inn ES-moduler – filer i strict mode med deklarasjonene import/export som løser en avhengighetsgraf. Moduler kjøres utsatt som standard, krever eksplisitte filendelser, hentes med CORS, evalueres som singletoner og støtter await på toppnivå. Bruk nomodule som reserve for eldre nettlesere, og vær oppmerksom på manglende filendelser når importer mislykkes uten tydelige feilmeldinger.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «ES-modulskript type=module» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien HTML Academy, inkludert «ES-modulskript type=module», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i HTML Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «ES-modulskript type=module»?
Last inn JavaScript som ES-moduler med type=module Du øver på HTML Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med HTML Academy?
Ingen tidligere erfaring er nødvendig. HTML Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «ES-modulskript type=module»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne HTML Academy-leksjonen?
Ja. Alle HTML Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- ES-modulskript type=module
- Import maps importmap
- Dynamisk import() i moduler
- Grunnleggende om Module Federation