Les fichiers et modules JavaScript (import / export)

Chapitre 17 — Les modules et l'organisation du code · 17.1 Les fichiers et modules JavaScript (import / export)

1. Pourquoi découper son code ?

Une petite application tient dans un fichier. Mais dès qu'elle grandit, un fichier de 1 000 lignes devient impossible à lire, à corriger et à partager entre plusieurs développeurs. On le découpe donc en plusieurs fichiers.

Historiquement, on chargeait plusieurs fichiers avec plusieurs balises <script>. Problème : ils partagent tous la même portée globale. Deux fichiers qui déclarent une variable total s'écrasent mutuellement, et l'ordre des balises devient crucial.

Figure 1 — Avec les modules, chaque fichier a sa propre portée et choisit ce qu'il partage.

2. Qu'est-ce qu'un module ?

Un module (module ES, ou ES module) est un fichier JavaScript qui :

• possède sa propre portée: ses variables ne sont pas visibles ailleurs ;
• exporte (export) ce qu'il veut rendre public ;
• importe (import) ce dont il a besoin depuis d'autres modules.

C'est le système standard de JavaScript depuis ES2015 (ES6). Il fonctionne dans tous les navigateurs récents et dans Node.js.

3. Exporter et importer : un premier exemple

Le fichier package.json indique à Node.js que les fichiers .js du dossier sont des modules (leçon 17.3).

📄 package.json

{ "type": "module" }

📄 geometrie.js

// geometrie.js — un module = un fichier
export const PI = 3.14159;

export function aireCercle(rayon) {
  return arrondir(PI * rayon * rayon);
}

export function perimetreCercle(rayon) {
  return arrondir(2 * PI * rayon);
}

// Non exportée : PRIVÉE au module, invisible depuis l'extérieur
function arrondir(x) {
  return Math.round(x * 100) / 100;
}

📄 main.js

// main.js — on importe uniquement ce dont on a besoin
import { aireCercle, perimetreCercle, PI } from "./geometrie.js";

console.log("PI =", PI);
console.log("Aire d'un cercle de rayon 3 :", aireCercle(3));
console.log("Périmètre :", perimetreCercle(3));
console.log("arrondir existe ici ?", typeof arrondir);

Dans le terminal : node main.js

PI = 3.14159
Aire d'un cercle de rayon 3 : 28.27
Périmètre : 18.85
arrondir existe ici ? undefined

• export devant une déclaration la rend publique.
• import { … } from "…" liste entre accolades les noms voulus, exactement comme ils ont été exportés.
• Le chemin commence par ./ (même dossier) ou ../ (dossier parent) et contient l'extension .js.
• arrondir n'est pas exportée : elle reste privée à geometrie.js.

4. Importer un nom qui n'existe pas

📄 erreur.js

// Tenter d'importer un nom qui n'est pas exporté
import { arrondir } from "./geometrie.js";
console.log(arrondir(3.14159));

Dans le terminal : node erreur.js (extrait)

SyntaxError: The requested module './geometrie.js' does not provide an export named 'arrondir'

L'erreur survient avant l'exécution de la moindre ligne : les imports sont vérifiés au chargement. C'est un avantage, les fautes de frappe sont détectées tout de suite.

5. Deux façons d'écrire les exports

// Façon 1 : export devant chaque déclaration
export const TVA = 0.19;
export function prixTTC(ht) { return ht * (1 + TVA); }

// Façon 2 : déclarations normales, puis UNE liste d'exports à la fin
const TVA = 0.19;
function prixTTC(ht) { return ht * (1 + TVA); }
export { TVA, prixTTC };

La seconde façon permet de voir d'un coup d'œil, en bas du fichier, tout ce que le module rend public.

17.2 Export par défaut, exports nommés et import dynamique →