JavaScript : Les modules

Une vraie application, ce sont des dizaines de fichiers. Les modules permettent de découper ton code en fichiers séparés qui se partagent des fonctions, des composants et des constantes. C'est la colonne vertébrale de tout projet React ou Next.js.

# Pourquoi des modules ?

Au début du web, tout tenait dans un gros fichier chargé par une balise <script>. Ça ne passe pas à l'échelle : les variables se marchent dessus, le code devient impossible à réutiliser et à retrouver.

Un module, c'est simplement un fichier JavaScript qui expose certaines choses (export) et utilise celles venues d'autres fichiers (import). Chaque fichier a sa propre portée : plus rien n'est global par accident.

# Exporter (export)

Deux façons d'exposer du code depuis un fichier.

L'export nommé (autant qu'on veut par fichier) :

// maths.js
export const PI = 3.14159;

export function addition(a, b) {
  return a + b;
}

// maths.js

export const PI = 3.14159;

export function addition(a, b) {

  return a + b;

}

L'export par défaut (un seul par fichier), typique d'un composant React :

// Bouton.js
export default function Bouton() {
  return <button>Clique</button>;
}

// Bouton.js

export default function Bouton() {

  return <button>Clique</button>;

}

# Importer (import)

On récupère ensuite ce qui a été exporté, en haut du fichier.

// Import nommé : les accolades doivent correspondre aux noms exportés
import { PI, addition } from "./maths.js";

// Import par défaut : on choisit le nom librement
import Bouton from "./Bouton.js";

// Renommer un import nommé
import { addition as somme } from "./maths.js";

// Tout regrouper dans un objet
import * as maths from "./maths.js";
maths.addition(2, 3);

// Import nommé : les accolades doivent correspondre aux noms exportés

import { PI, addition } from "./maths.js";

// Import par défaut : on choisit le nom librement

import Bouton from "./Bouton.js";

// Renommer un import nommé

import { addition as somme } from "./maths.js";

// Tout regrouper dans un objet

import * as maths from "./maths.js";

maths.addition(2, 3);

À retenir : un import nommé doit reprendre le nom exact de l'export, alors qu'un import par défaut se nomme comme tu veux.

# ESM vs CommonJS

Tu croiseras deux syntaxes de modules :

• ES Modules (ESM) : import / export. C'est le standard moderne, celui de React, Next.js et du navigateur.
• CommonJS : require() / module.exports. L'ancienne syntaxe de Node.js, encore très présente dans l'écosystème.

// CommonJS (l'ancien monde, Node)
const express = require("express");
module.exports = maFonction;

// CommonJS (l'ancien monde, Node)

const express = require("express");

module.exports = maFonction;

Aujourd'hui, on écrit en ESM par défaut. Node sait gérer les deux.

# En React / Next.js

Chaque fichier de composant suit toujours ce schéma : il importe ses dépendances en haut, et exporte son composant.

import { useState } from "react";
import Bouton from "@/components/Bouton";

export default function Compteur() {
  // ...
}

import { useState } from "react";

import Bouton from "@/components/Bouton";

export default function Compteur() {

  // ...

}

Le @/ que tu vois dans ce projet est un simple alias vers le dossier src/ (configuré une fois dans la config du projet), pour éviter les chemins relatifs à rallonge du type ../../../components.

# À retenir

• Un module est un fichier qui exporte des choses et en importe d'autres. Chaque fichier a sa propre portée.
• Export nommé (plusieurs par fichier) contre export par défaut (un seul, typique des composants).
• Un import nommé reprend le nom exact ; un import par défaut se nomme librement.
• ESM (import / export) est le standard moderne ; CommonJS (require) est l'ancien monde Node.