Basi di ESM — import/export, default e named
Impari le basi di import/export in ESM: cos’è un modulo, differenza tra export named e default, import dello spazio dei nomi e un breve confronto con CommonJS.
Basi di ESM — import/export, default e named è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 1 di 3. 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 JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 3 lezioni in totale.
Che cos'è un modulo?
Obiettivo: leggere con sicurezza la sintassi dei moduli.
- Che cos'è un modulo
- Esportazioni nominate e predefinite
- import * come namespace
- Breve confronto con CJS
Modulo = file + ambito locale
Un modulo è un file. Le sue variabili sono locali, a meno che non le si export.
// A module is just a file with its own scope
// Here we simulate "module scope" by keeping variables local.
(function () {
const secret = 42; // local to this file/scope
function reveal() { return "value:" + secret; }
console.log("module-like scope:", typeof secret === "number", reveal());
})();
Esportazioni nominate — concetto
Le esportazioni nominate usano le parentesi graffe nell'importazione: import { name }. È possibile esportare diversi elementi dallo stesso file.
// Named exports: you export multiple items by name
const exampleNamedExport = [
"export const PI = 3.14;",
"export function sum(a, b) { return a + b; }",
"import { PI, sum } from \\"./math.js\\";"
];
console.log("named export example:");
for (const line of exampleNamedExport) console.log(line);
// Tiny emulation: pretend we imported two named symbols
const PI = 3.14;
function sum(a, b) { return a + b; }
console.log("emulated use:", PI, sum(2, 3));
Esportazione predefinita — concetto
Un'esportazione predefinita viene importata senza parentesi graffe: import name from "path".
// Default export: each module can have at most one default
const exampleDefault = [
"export default function greet(name) { return \\"Hi \\" + name; }",
"import greet from \\"./greet.js\\"; // no braces"
];
console.log("default export example:");
for (const line of exampleDefault) console.log(line);
// Emulation of default import usage
function greet(name) { return "Hi " + name; }
console.log("emulated default:", greet("Ayla"));
Importazione come namespace
import * as ns raccoglie le esportazioni nominate in un unico oggetto (ad es., math.sum).
// Namespace import collects all named exports under one object
const exampleNamespace = [
"import * as math from \\"./math.js\\";",
"console.log(math.PI, math.sum(1, 2));"
];
console.log("namespace import example:");
for (const line of exampleNamespace) console.log(line);
// Emulate a namespace object
const math = { PI: 3.14, sum: function (a, b) { return a + b; } };
console.log("namespace use:", math.PI, math.sum(4, 5));
Confronto tra CJS ed ESM e note sulla risoluzione
CJS ed ESM (in breve):
- ESM: sintassi import/export (statica). Esempio: import { x } from "./m.js".
- CJS: require/module.exports (dinamica). Esempio: const x = require("./m.js").
- In ESM, usi estensioni di file esplicite nel browser e in molte configurazioni Node (ad es., ./file.js).
Quiz sulle importazioni nominate e predefinite
Controllo rapido: sintassi dell'importazione nominata.
Riepilogo
Riepilogo: un modulo è un file. Usi le esportazioni nominate con le parentesi graffe, una esportazione predefinita senza parentesi graffe e import * per un namespace. CJS usa require, ESM usa import.
Domande Frequenti
La lezione «Basi di ESM — import/export, default e named» è gratuita?
Sì — il testo completo di «Basi di ESM — import/export, default e named» è 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 JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 3 lezioni in totale.
Cosa imparerò in «Basi di ESM — import/export, default e named»?
Impari le basi di import/export in ESM: cos’è un modulo, differenza tra export named e default, import dello spazio dei nomi e un breve confronto con CommonJS. Eserciti JavaScript 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 JavaScript Academy?
Non è richiesta alcuna esperienza precedente. JavaScript 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 3.
Quanto tempo richiede la lezione «Basi di ESM — import/export, default e named»?
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 JavaScript Academy?
Sì. Ogni lezione JavaScript 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
- Basi di ESM — import/export, default e named
- Basi di CommonJS — require/module.exports ed exports
- Risoluzione dei moduli in Node e nei bundler per browser