Modules & portée globale

Organise ton code comme des niveaux séparés, pour éviter le chaos et les bugs.

Imagine : ton jeu est composé de plusieurs zones : la forêt, le donjon, le village. Chaque zone a ses règles, ses ennemis, ses trésors. Tu ne vas pas tout coder dans un seul fichier, sinon tu t'y perds. Les modules te permettent de diviser ton code en fichiers bien séparés, chacun gérant sa zone du jeu, tout en pouvant s'échanger des infos quand c'est nécessaire.

8.1Qu'est-ce qu'un module ?

Un module est un fichier JS autonome. Il a ses propres variables, fonctions, etc.
Par défaut, tout ce qui est dans un module n'est pas visible à l'extérieur. C'est une sorte de "zone privée".

8.2Exporter du code

Pour qu'un module partage une info (une fonction, une variable, une classe…), il doit l'exporter :

// fichier foret.js
export const monstre = "Loup-Garou";

export function attaquer() {
  console.log("Le loup attaque !");
}

8.3Importer du code

Un autre fichier peut alors l'importer pour l'utiliser :

// fichier jeu.js
import { monstre, attaquer } from "./foret.js";

console.log(monstre); // "Loup-Garou"
attaquer();

Note

Pour que les modules fonctionnent, ton fichier HTML doit utiliser type="module" :

<script type="module" src="jeu.js"></script>

8.4La portée globale

Avant les modules, tout était dans le même espace global (comme un inventaire géant commun).
Du coup, deux variables du même nom pouvaient entrer en conflit. C'était le bazar.
Les modules créent des bulles isolées, donc plus de risque d'écraser tes sorts ou tes potions par erreur.

8.5Export par défaut

Un module peut aussi avoir un seul "export par défaut" (utile quand il ne propose qu'une chose) :

// foret.js
export default function rugir() {
  console.log("Le loup hurle à la lune !");
}

Et côté import :

import rugir from "./foret.js";

rugir();