ES-moduuliskriptit: type=module
Lataa JavaScript ES-moduuleina type=module-attribuutilla
ES-moduuliskriptit: type=module on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Mitä ES-moduulit ovat?
ES-moduuli on JavaScript-tiedosto, jossa käytetään import- ja export-deklaraatioita. Moduuleilla on oma näkyvyysalueensa (globaalia nimiavaruutta ei sotketa), strict-tila on oletuksena käytössä ja riippuvuudet ilmoitetaan eksplisiittisesti – näin korjautuvat vuosikymmenten ongelmat, jotka liittyvät script-tagien järjestykseen.
Moduuliskriptin script-tagi
<script type="module" src="app.js"> kertoo selaimelle, että tiedosto on moduuli. Selain jäsentää importit, noutaa riippuvuudet rinnakkain ja suorittaa aloitusmoduulin vasta, kun koko riippuvuusgraafi on ladattu ja käännetty.
<script type="module" src="app.js"></script>Moduulit suoritetaan defer-tilassa
Moduuliskriptit toimivat kuin niissä olisi defer-määrite: ne latautuvat rinnakkain HTML:n jäsentämisen kanssa ja suoritetaan jäsentämisen jälkeen ilmoitusjärjestyksessä. Voitte sijoittaa <script type="module">-elementin minne tahansa (myös <head>-elementtiin) estämättä sivun latautumista.
Importit käyttävät määritteitä
Import-lause käyttää määritettä, joka voi olla suhteellinen URL-osoite (./utils.js), absoluuttinen URL-osoite (https://cdn.example.com/lib.js) tai paljas nimi (lodash). Paljaat nimet edellyttävät import-karttaa (käsitellään seuraavaksi), koska selain ei tiedä, mitä tiedostoa ne vastaavat.
// app.js
import { sum } from "./utils.js";
import { render } from "https://esm.sh/preact";
console.log(sum(1, 2));Tiedostopäätteet ovat pakollisia
Selaimet eivät lisää .js-päätettä automaattisesti import-määritteisiin. import "./utils" epäonnistuu, mutta import "./utils.js" toimii. Bundlerit ja Node saattavat olla sallivampia, mutta selain on tiukka, joten ilmoittakaa pääte aina erikseen.
CORS on pakollinen
Moduulit haetaan aina CORS:n avulla, myös silloin, kun ne ovat saman alkuperän sisällä. Eri alkuperästä ladattavien moduulitiedostojen on palautettava asianmukainen Access-Control-Allow-Origin-otsake, tai import epäonnistuu. Useimmat CDN:t (esm.sh, jsdelivr, unpkg) määrittävät tämän oikein heti käyttövalmiiksi.
Ylimmän tason await
Moduulit tukevat await-lauseketta ylimmällä tasolla, joten async-funktion ympärille ei tarvita käärettä: const data = await fetch("/api").then(r => r.json()). Moduulin käyttäjät odottavat, kunnes ylimmän tason await on valmistunut, ennen kuin ne suoritetaan.
// 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);Moduulit ovat singleton-instansseja
Moduuli evaluoidaan istuntoa kohden täsmälleen kerran riippumatta siitä, kuinka moni muu moduuli tuo sen. Exports-objekti jaetaan, joten jokainen käyttäjä näkee saman instanssin. Tämän ansiosta moduulit ovat selkeä tapa jakaa esimerkiksi asetusten objekti tai tilavarasto singletonina.
Upotetut moduulit
Voitte kirjoittaa moduuleja myös suoraan sivulle: <script type="module">import x from "./y.js"; ...</script>. Tämä sopii alustuskoodiin tai kokeiluihin, vaikka ulkoisia tiedostoja on helpompi debugata ja välimuistittaa.
nomodule vanhojen selainten varatoteutusta varten
Yhdistäkää <script type="module"> ja <script nomodule src="legacy.js">. Nykyaikaiset selaimet suorittavat moduulin ja ohittavat nomodule-skriptin, kun taas vanhat selaimet suorittavat nomodule-skriptin ja ohittavat moduulin. Tätä käytetään siirryttäessä kokonaan ESM-pohjaisiin sovelluksiin.
Virheet ja import-epäonnistumiset
Epäonnistunut import (404, CORS tai syntaksivirhe) aiheuttaa virheen ja estää koko moduuligraafin suorittamisen. Etsikää epäonnistuneet moduulipyynnöt Network-paneelista ja lukekaa varsinainen import-virheilmoitus Consolesta.
Tietotesti
Miksi moduuliskriptit toimivat kuin niissä olisi defer-määrite, vaikka ette määritä sitä itse?
Yhteenveto
<script type="module"> lataa ES-moduuleja – strict-tilassa toimivia tiedostoja, joiden import/export-deklaraatiot muodostavat riippuvuusgraafin. Moduulit suoritetaan oletuksena defer-tilassa, edellyttävät tiedostopäätteiden ilmoittamista, haetaan CORS:n kautta, evaluoidaan singleton-instansseina ja tukevat ylimmän tason await-lauseketta. Käyttäkää nomodule-määritettä vanhojen selainten varatoteutukseen ja tarkistakaa puuttuvat tiedostopäätteet, kun importit epäonnistuvat huomaamatta.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”ES-moduuliskriptit: type=module” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “ES-moduuliskriptit: type=module”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”ES-moduuliskriptit: type=module”?
Lataa JavaScript ES-moduuleina type=module-attribuutilla Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”ES-moduuliskriptit: type=module”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?
Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- ES-moduuliskriptit: type=module
- Import Maps: importmap
- Dynaaminen import() moduuleissa
- Module Federationin perusteet