Modules ESM : import / export

Lorsqu'un programme grandit, tout garder dans un seul fichier devient peu pratique. Le JavaScript moderne résout ce problème avec les modules ES (ESM) : chaque fichier est un module qui peut exporter des fonctions, des constantes, des classes, et d'autres fichiers peuvent les importer.

export

Vous exportez ce que vous voulez rendre public. Deux formes :

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

export const PI = 3.14159;

Ou encore, en bas de fichier :

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

import

Depuis un autre fichier :

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

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

L'objet { somma, PI } est la liste des noms que vous souhaitez importer. Ils doivent correspondre aux noms exportés.

Default export (Export par défaut)

Chaque module peut avoir un export « principal », anonyme :

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

On l'importe en choisissant le nom localement :

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

Renommer

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

Un seul « namespace » par fichier

Les modules sont isolés : une variable déclarée dans un fichier ne se retrouve pas dans la portée globale (global). Vous devez l'exporter explicitement pour la rendre visible ailleurs. C'est une amélioration considérable par rapport à l'ancien JS où chaque balise <script> partageait l'objet window.

À vous de jouer

Dans les exercices ci-dessous, vous n'écrirez pas la syntaxe réelle import/export — le bac à sable (sandbox) étant constitué d'un seul fichier. Nous vous demanderons plutôt d'organiser le code en petites fonctions séparées qui collaborent, comme vous le feriez si chacune se trouvait dans un fichier différent.

Exercice de révision