Moduli ESM: import / export

Quando un programma cresce, tenere tutto in un solo file diventa scomodo. JavaScript moderno risolve il problema con i moduli ES (ESM): ogni file è un modulo che può esportare funzioni, costanti, classi, e altri file possono importarle.

export

Esporti ciò che vuoi rendere pubblico. Due forme:

// somma.js
export function somma(a, b) {
  return a + b;
}

export const PI = 3.14159;

Oppure, in fondo al file:

function somma(a, b) {
  return a + b;
}
const PI = 3.14159;
export { somma, PI };

import

Da un altro file:

// app.js
import { somma, PI } from './somma.js';

console.log(somma(1, 2)); // 3
console.log(PI); // 3.14159

L'oggetto { somma, PI } è la lista dei nomi che vuoi importare. Devono corrispondere ai nomi esportati.

Default export

Ogni modulo può avere un export "principale", senza nome:

// log.js
export default function log(msg) {
  console.log('[app]', msg);
}

Si importa scegliendo localmente il nome:

import log from './log.js';
log('ciao');

Rinominare

import { somma as plus } from './somma.js';
export { somma as add } from './somma.js'; // re-export

Un solo "namespace" per file

I moduli sono isolati: una variabile dichiarata in un file non finisce nel global. Devi esportarla esplicitamente per renderla visibile altrove. Questo è un enorme miglioramento rispetto al vecchio JS in cui ogni <script> condivideva window.

Prova tu

Negli esercizi qui sotto non scriverai vera sintassi import/export — il sandbox è un solo file. Ti chiederemo invece di organizzare il codice in piccole funzioni separate che collaborano, come faresti se ciascuna fosse in un file diverso.

Esercizio di ripasso