HTML Academy · Lezione

Script di moduli ES: type=module

Caricare JavaScript come moduli ES con type=module

Script di moduli ES: type=module è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

Che cosa sono i moduli ES?

Un modulo ES è un file JavaScript che utilizza dichiarazioni import ed export. I moduli hanno un proprio scope (senza inquinare lo scope globale), usano strict mode per impostazione predefinita e dichiarano esplicitamente le dipendenze, risolvendo decenni di problemi legati all’ordine dei tag script.

Il tag script del modulo

<script type="module" src="app.js"> comunica al browser che il file è un modulo. Il browser analizza gli import, recupera le dipendenze in parallelo ed esegue l’entry point solo dopo aver scaricato e compilato l’intero grafo delle dipendenze.

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

I moduli vengono caricati in differita

Gli script dei moduli si comportano come se avessero defer: vengono scaricati in parallelo all’analisi dell’HTML ed eseguiti dopo l’analisi, nell’ordine di dichiarazione. Può posizionare <script type="module"> ovunque (anche in <head>) senza bloccare la pagina.

Gli import usano gli specifier

Un’istruzione import utilizza uno specifier: un URL relativo (./utils.js), un URL assoluto (https://cdn.example.com/lib.js) oppure un bare specifier (lodash). I bare specifier richiedono un’import map (che verrà trattata nella prossima sezione), perché il browser non sa a quale file corrispondano.

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

Le estensioni dei file sono obbligatorie

I browser non aggiungono automaticamente .js agli specifier degli import. import "./utils" non funziona; import "./utils.js" funziona. I bundler e Node possono essere più permissivi, ma il browser è rigoroso: scriva esplicitamente l’estensione.

CORS obbligatorio

I moduli vengono sempre recuperati tramite CORS, anche quando hanno la stessa origine. I file dei moduli di origine diversa devono inviare l’header Access-Control-Allow-Origin appropriato, altrimenti l’import non riesce. La maggior parte dei CDN (esm.sh, jsdelivr, unpkg) è configurata correttamente già in partenza.

Await al livello superiore

I moduli supportano await al livello superiore, senza richiedere un wrapper con una funzione asincrona: const data = await fetch("/api").then(r => r.json()). I consumer del modulo attendono la risoluzione dell’await al livello superiore prima di essere eseguiti.

// 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);

I moduli sono singleton

Un modulo viene valutato esattamente una volta per sessione, indipendentemente dal numero di altri moduli che lo importano. L’oggetto degli export è condiviso: ogni consumer vede la stessa istanza, il che rende i moduli un modo semplice per condividere singleton come un oggetto di configurazione o uno store di stato.

Moduli inline

Può anche scrivere moduli inline: <script type="module">import x from "./y.js"; ...</script>. È utile per il codice di bootstrap o per gli esperimenti, anche se i file esterni sono più facili da eseguire in debug e da memorizzare nella cache.

nomodule per la compatibilità legacy

Affianchi a <script type="module"> un <script nomodule src="legacy.js">. I browser moderni eseguono il modulo e ignorano lo script nomodule; i browser legacy eseguono lo script nomodule e ignorano il modulo. Questa tecnica viene utilizzata durante la migrazione ad app interamente basate su ESM.

Errori e import non riusciti

Un import che non riesce (404, CORS, errore di sintassi) genera un’eccezione e impedisce l’esecuzione dell’intero grafo dei moduli. Utilizzi il pannello Network per individuare le richieste di moduli non riuscite e la Console per leggere il messaggio di errore effettivo dell’import.

Verifica delle conoscenze

Perché gli script dei moduli si comportano come se fosse stato impostato defer anche senza specificarlo?

Riepilogo

Domande Frequenti

La lezione «Script di moduli ES: type=module» è gratuita?

Sì — il testo completo di «Script di moduli ES: type=module» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «Script di moduli ES: type=module»?

Caricare JavaScript come moduli ES con type=module Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Script di moduli ES: type=module»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a HTML Academy