import/export, require, créer ses modules, gérer les dépendances
Utilisez les flèches, cliquez ou glissez pour naviguer
1. Pourquoi découper en modules
Un fichier de 5000 lignes est impossible à maintenir
2. Maîtriser import/export (ESM)
Et connaître require (CJS)
3. Créer ses propres modules
Réutilisables et organisés
4. Utiliser npm et package.json
Installer des packages, gérer les dépendances
5. Comprendre node_modules et .gitignore
On committe la recette, pas les ingrédients
Pourquoi découper en modules
Un fichier de 5000 lignes est impossible à maintenir
export et import
Rendre du code disponible, l'utiliser depuis un autre fichier
export default vs export nommé
Quand utiliser quoi
CJS vs ESM
On utilise ESM, require c'est l'ancien système
npm : l'écosystème complet
init, install, package.json, node_modules, .gitignore
Un fichier de 5000 lignes est impossible à maintenir
// app.js — TOUT dans un seul fichier 😱
function calculerMoyenne(...) { ... }
function validerEmail(...) { ... }
... 4995 lignes plus tard ...
// Où est la fonction qu'on cherche? ❌
💡 Solution : Découper en modules!
Chaque fichier = une responsabilité
🍳 Sans modules
Tout dans une seule marmite
🍽️ Avec modules
Chaque recette dans son fichier
Un module = une recette — on importe seulement ce dont on a besoin
📦 Organisation
Chaque fichier a un rôle clair
♻️ Réutilisation
Un module sert dans plusieurs projets
🔒 Encapsulation
Ce qui n'est pas exporté reste privé
🤝 Collaboration
Chacun travaille sur son module
💡 export rend du code public — le reste est privé
Rendre du code disponible, l'utiliser ailleurs
export
Je rends ce code disponible
import
J'utilise ce code ailleurs
// math.js
export function additionner(a, b) {
return a + b;
}
export function multiplier(a, b) {
return a * b;
}
💡 On peut aussi exporter à la fin : export { additionner, multiplier };
// main.js
import { additionner, multiplier } from './math.js';
console.log(additionner(3, 5)); // 8
console.log(multiplier(4, 6)); // 24
⚠️ Le ./ est obligatoire pour les modules locaux!
./ est obligatoire!❌ Sans le ./
import { add } from 'math.js';
Cherche dans node_modules → Erreur!
✅ Avec le ./
import { add } from './math.js';
Cherche dans le même dossier → OK!
./ = dossier courant | ../ = parent | Sans préfixe = node_modules
export default
Un seul par fichier — le "produit principal"
export nommé
Plusieurs par fichier — les "outils"
// User.js
export default class User {
constructor(name) { this.name = name; }
}
// main.js
import User from './User.js';
const u = new User('Alice');
💡 Pas de { } à l'import — on choisit le nom!
export default
import hello from './file.js';
✅ Pas d'accolades — on choisit le nom
export nommé
import { hello } from './file.js';
✅ Avec accolades — le nom doit correspondre
🎯 Mix possible : import User, { validateEmail } from './User.js';
export default
✅ Un composant React par fichier
✅ Une classe principale
✅ Le "produit phare" du module
export nommé
✅ Des fonctions utilitaires
✅ Des constantes
✅ Plusieurs choses à exporter
🎯 Règle : un concept principal → default | boîte à outils → nommés
CJS (l'ancien) vs ESM (le moderne)
On utilise ESM — require = l'ancien système
CJS (CommonJS)
module.exports = { add };
const { add } = require('./math');
⚠️ Synchrone, pas de tree-shaking
ESM (ES Modules) ✅
export { add };
import { add } from './math.js';
✅ Asynchrone, tree-shaking possible
💡 Activer ESM : "type": "module" dans package.json
✅ Standard officiel de JavaScript
✅ Tree-shaking — élimine le code non utilisé
✅ Asynchrone — meilleures performances
✅ Fonctionne partout — Navigateur + Node + Deno + Bun
npm init, package.json, install, node_modules, .gitignore
npm = Node Package Manager — 2M+ packages
$ npm init
package name: mon-projet
version: 1.0.0
entry point: index.js
Raccourci : npm init -y — valeurs par défaut
💡 Résultat : un fichier package.json est créé
{
"name": "mon-projet",
"version": "1.0.0",
"main": "index.js",
"type": "module",
"scripts": { "start": "node index.js" },
"dependencies": { },
"devDependencies": { }
}
🎯 "type": "module" active les import/export ESM
$ npm install express
// → dependencies
$ npm install --save-dev jest
// → devDependencies
dependencies
Packages en production
express, lodash, axios...
devDependencies
Outils de développement
jest, eslint, prettier...
💡 npm install sans nom → installe tout depuis package.json
mon-projet/
node_modules/
express/
... + 30 autres packages!
package.json
package-lock.json
Chaque package a ses propres dépendances → effet cascade
⚠️ JAMAIS commit node_modules sur Git!
// .gitignore
node_modules/
❌ On ne committe PAS
node_modules/ — trop gros, recréable
✅ On committe
package.json — la recette
package-lock.json — les versions exactes
💡 On committe la recette, pas les ingrédients
1️⃣ Créer le fichier → 2️⃣ Exporter → 3️⃣ Importer
// validators.js
export function validerEmail(email) {
return email.includes('@');
}
export function validerMDP(mdp) {
return mdp.length >= 8;
}
// main.js
import { validerEmail, validerMDP }
from './validators.js';
validerEmail('[email protected]'); // true
validerMDP('abc'); // false
✅ validators.js est réutilisable dans n'importe quel projet!
mon-projet/
package.json
.gitignore
node_modules/
src/
index.js
math.js
validators.js
utils/
format.js
helpers.js
🎯 Chaque fichier = un module = une responsabilité
❌ Oublier le ./ devant le chemin d'import local
import { add } from 'math.js'; // node_modules
import { add } from './math.js'; // ✅ local
❌ Confondre export default et export nommé
import { User } from './User.js'; // ❌ si default
import User from './User.js'; // ✅ pas d'accolades
❌ Committer node_modules sur Git
✅ Ajouter node_modules/ dans .gitignore dès le premier npm install
export rend du code public — le reste est privé
Le ./ est obligatoire pour les modules locaux
node_modules dans .gitignore — recette pas ingrédients
dependencies = production | devDependencies = dev
On utilise ESM (import/export) — require c'est l'ancien
export nommé
import { fn } from './file'
→ Plusieurs par fichier
export default
import X from './file'
→ Un seul par fichier
npm
init, install, package.json
→ Gérer les dépendances
.gitignore
node_modules/
→ Recette, pas ingrédients
ESM ✅ | CJS ⚠️ | ./ obligatoire | .gitignore dès le départ!
1. Créer un module math.js
Exporter additionner, soustraire, multiplier — les importer dans main.js
2. Créer un module avec export default
Une classe Calculatrice avec export default — l'importer sans accolades
3. Initialiser un projet npm
npm init -y, installer chalk, ajouter .gitignore, vérifier package.json
4. Corriger les erreurs d'import
Trouver et corriger : chemin sans ./, accolades manquantes, default vs nommé
Les modules sont la base de tout projet JavaScript
Pratiquez avec les exercices!
export, import, npm → vous les utiliserez partout