Les modules

Un fichier par sujet : ranger son code pour pouvoir le relire, le réutiliser et le partager.

Objectifs de la séance

• comprendre à quoi sert un module ;
• exporter des fonctions et des données avec export ;
• les importer dans un autre fichier avec import ;
• distinguer l'export nommé et l'export par défaut (export default) ;
• lire les erreurs d'import les plus courantes.

---

Notions théoriques

Pourquoi découper en fichiers ?

Tant qu'un programme fait 20 lignes, un seul fichier suffit. Une application Expo en compte des milliers : tout mettre dans un fichier serait ingérable. En JavaScript, un fichier est un module : il garde ses variables et ses fonctions privées, et ne partage que ce qu'il exporte.

En PHP, vous utilisiez require ou include. En JavaScript moderne, on utilise export et import.

Exporter et importer (export nommé)

Dans le fichier calculs.js, on écrit export devant ce qu'on veut partager :

// calculs.js
export function calculerPourcentage(bonnesReponses, nombreQuestions) {
  if (nombreQuestions <= 0) {
    return 0;
  }
  return Math.round((bonnesReponses / nombreQuestions) * 100);
}

export const NIVEAU_MAXIMUM = 3;

const secret = "cette variable reste privée"; // pas exportée : invisible ailleurs

Dans un autre fichier, on importe par leur nom, entre accolades :

// main.js
import { calculerPourcentage, NIVEAU_MAXIMUM } from "./calculs.js";

console.log(calculerPourcentage(7, 10)); // 70
console.log(NIVEAU_MAXIMUM);             // 3

• ./ signifie « dans le même dossier que ce fichier » ;
• avec Node.js, l'extension .js est obligatoire dans le chemin ;
• les noms entre accolades doivent être exactement ceux de l'export.

Et dans Expo ?

Dans un projet Expo, on écrit import { calculerPourcentage } from "@/logic/calculs" : pas d'extension, et @/ désigne le dossier src/. Le principe est identique, seul le chemin change.

L'export par défaut

Un fichier peut aussi avoir un seul export « principal », l'export par défaut. À l'import, il n'y a pas d'accolades et on choisit le nom.

// ecranAccueil.js
export default function EcranAccueil() {
  return "Bienvenue";
}

// main.js
import EcranAccueil from "./ecranAccueil.js";
console.log(EcranAccueil());

Export	Écriture	Import
nommé (plusieurs par fichier)	export function a() {}	import { a } from "./f.js"
par défaut (un seul par fichier)	export default function a() {}	import a from "./f.js"

Bonne pratique - Nommé par défaut, default pour les écrans

Dans ce cours, utilisez l'export nommé pour vos fonctions et vos données : le nom est le même partout, l'éditeur peut le compléter et le renommer automatiquement. Réservez export default aux cas où l'outil l'exige : dans Expo Router, chaque écran doit être un export default.

Les erreurs d'import fréquentes

Message	Cause	Solution
ERR_MODULE_NOT_FOUND	Chemin faux ou extension .js oubliée	Vérifier le chemin et ajouter .js
does not provide an export named 'xxx'	Le nom importé n'est pas exporté (faute de frappe, export oublié)	Comparer avec le fichier source
Cannot use import statement outside a module	"type": "module" absent de package.json	Revoir la configuration du labo (séance 1)

Organiser son projet

Un petit projet bien rangé ressemble à ceci :

labo-js/modules/
├── donnees.js    ← les questions (des données, pas de calculs)
├── calculs.js    ← des fonctions pures (pourcentage, appréciation...)
└── main.js       ← le point d'entrée : il assemble et affiche

Chaque fichier a un rôle : si le calcul du pourcentage est faux, on sait dans quel fichier chercher.

---

Test de mémorisation/compréhension

Quelle instruction rend la fonction additionner disponible dans les autres fichiers ?

public function additionner(a, b) { return a + b; }

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

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

require function additionner(a, b) { return a + b; }

include function additionner(a, b) { return a + b; }

Quelle ligne importe correctement la fonction nommée appreciation depuis ./calculs.js ?

import { appreciation } from "./calculs.js";

import appreciation from "calculs";

require(appreciation, "./calculs.js");

from "./calculs.js" import { appreciation };

import appreciation { "./calculs.js" } from module;

Que provoque : import { calculerPourcent } from "./calculs.js"; alors que le fichier exporte calculerPourcentage ?

Rien, JavaScript devine le bon nom de la fonction

L'import réussit mais la fonction vaut undefined

Le programme s'arrête sans aucun message

Node.js corrige automatiquement la faute de frappe

Une erreur : cet export nommé n'existe pas

Quelle est la différence entre un export nommé et un export par défaut ?

Le défaut peut être utilisé plusieurs fois dans un fichier

Le défaut est unique par fichier et s'importe sans accolades

Le nommé s'importe sans accolades, le défaut avec des accolades

Il n'y a aucune différence, seul le nom du mot-clé change

L'export nommé ne fonctionne qu'avec les variables, pas avec les fonctions

Dans Expo Router, quel type d'export doit utiliser un fichier d'écran ?

export nommé uniquement

module.exports

export type

export default

Aucun export n'est nécessaire

---

TP pour réfléchir et résoudre des problèmes

Votre mission : découper le bilan du quiz en trois fichiers dans le dossier labo-js/modules/.

Étape 1 — Les données dans donnees.js

Créez modules/donnees.js et exportez le tableau questions.

Bonne pratique - Séparer données et logique

Un fichier de données ne contient que des données. Quand le contenu des questions changera (ou viendra d'un serveur), vous ne toucherez qu'à ce fichier.

Étape 2 — Les calculs dans calculs.js

Créez modules/calculs.js : exportez calculerPourcentage.

Bonne pratique - Des fonctions pures dans leur propre module

Un fichier de fonctions pures est le plus simple à tester et à réutiliser : il n'affiche rien et ne dépend de rien.

Étape 3 — Assembler dans main.js

Créez modules/main.js : importez questions et calculerPourcentage, puis affichez le pourcentage si le joueur a trouvé 1 réponse sur le nombre de questions.

Lancez node modules/main.js : le terminal affiche Pourcentage : 50 %.

Bonne pratique - Les imports en tête de fichier

Placez tous les import tout en haut : on voit d'un coup d'œil de quels fichiers dépend le module.

📌 Une solution

Vous devez être connecté pour voir le contenu.

Email : Mot de passe :

---

Ce qu'il faut retenir

Notion	Résumé
Module	Un fichier dont les variables et fonctions restent privées, sauf si elles sont exportées.
export	Rend une fonction ou une valeur utilisable ailleurs.
import { a } from "./f.js"	Récupère un export nommé (extension .js obligatoire avec Node).
export default	Un seul par fichier, importé sans accolades : requis pour les écrans Expo Router.
Organisation	Un fichier, un rôle : données, calculs, point d'entrée.

Aperçu de la prochaine séance

Dans la prochaine séance, vous allez percer le secret de useState : comment une fonction peut se souvenir d'une valeur entre deux appels. Ce mécanisme s'appelle une fermeture, et vous allez en fabriquer une vous-même.