Intermedio12 min

Moduli

Organizzare il codice JavaScript in moduli riutilizzabili con import ed export.

Moduli

I moduli ES permettono di suddividere il codice in file separati, ognuno con le proprie responsabilità. Sono lo standard moderno per organizzare progetti JavaScript.

Esportare

javascript

// utils.js — export nominati
export function formattaPrezzo(prezzo) {
  return new Intl.NumberFormat("it-IT", {
    style: "currency",
    currency: "EUR",
  }).format(prezzo);
}

export const IVA = 0.22;

javascript

// logger.js — export di default
export default function log(messaggio) {
  console.log(\`[\${new Date().toISOString()}] \${messaggio}\`);
}

Importare

javascript

// Import nominati (con le graffe)
import { formattaPrezzo, IVA } from "./utils.js";

// Import di default (senza graffe)
import log from "./logger.js";

// Rinominare un import
import { formattaPrezzo as formatPrice } from "./utils.js";

// Importare tutto come namespace
import * as Utils from "./utils.js";
Utils.formattaPrezzo(100);

Re-export

Utile per creare un "punto di ingresso" unico per un modulo composto da più file:

javascript

// index.js
export { formattaPrezzo, IVA } from "./utils.js";
export { default as log } from "./logger.js";
export { validaEmail } from "./validazione.js";

Import dinamico

Carica un modulo solo quando serve, utile per ottimizzare le performance:

javascript

async function apriEditor() {
  const { Editor } = await import("./editor.js");
  const editor = new Editor("#contenitore");
  editor.inizializza();
}

L'import dinamico restituisce una Promise e funziona perfettamente con il code-splitting di bundler come Vite e webpack.