Les modules
Un module est un fichier JavaScript qui contient du code réutilisable. L'idée est de diviser votre application en petits morceaux indépendants plutôt que d'avoir un seul fichier géant.
Deux systèmes de modules : CommonJS et ESM
Node.js utilise deux systèmes pour organiser le code : CommonJS (historique) et ECMAScript Modules (moderne). Comprendre leurs différences est essentiel pour bien structurer vos projets.
CommonJS
Origine : Créé pour Node.js en 2009, avant que JavaScript n'ait un système de modules natif. C'est le format par défaut de Node.js.
Syntaxe :
// Exportation (math.js ou math.cjs)
module.exports = {
add: (a, b) => a + b,
}
// Importation
const math = require('./math')
console.log(math.add(2, 3)) // 5
Caractéristiques :
- Fonctionne nativement dans Node.js sans configuration
- Chargement synchrone (garanti dans l'ordre)
- Simple à utiliser
- Pas compatible navigateurs (sans transpilation)
- Pas d'optimisation automatique du code (tree-shaking)
Extensions : .js (par défaut) ou .cjs (explicite)
ECMAScript Modules (ESM)
Origine : Standard JavaScript introduit en ES6 (2015) pour unifier les modules entre navigateurs et backend.
Syntaxe :
// Exportation (math.mjs ou math.js avec "type": "module")
export function add(a, b) {
return a + b
}
// Importation
import { add } from './math.js'
console.log(add(2, 3)) // 5
Caractéristiques :
- Standard universel (navigateurs + Node.js)
- Syntaxe moderne et claire (
import/export) - Tree-shaking : suppression automatique du code non utilisé
- Chargement asynchrone (adapté au web)
- Nécessite configuration (
"type": "module"danspackage.json)
Extensions : .mjs (explicite) ou .js (avec configuration)
Exemple de Tree-Shaking :
// math.js
export function add(a, b) {
return a + b
}
export function multiply(a, b) {
return a * b
}
// index.js
import { add } from './math.js' // Seul add() est importé
console.log(add(2, 3))
// :icon{name="i-heroicons-check-circle" class="text-green-500"} Après build : multiply() est supprimée du bundle final (économie de taille)
Avec CommonJS, le tree-shaking est difficile car les imports ne sont pas statiques.
Différences principales
| Caractéristique | CommonJS | ECMAScript Modules (ESM) |
|---|---|---|
| Syntaxe d'importation | const module = require(...) | import module from '...' |
| Syntaxe d'exportation | module.exports ou exports | export ou export default |
| Chargement | Synchrone | Asynchrone |
| Extensions typiques | .js ou .cjs | .mjs ou .js |
| Compatibilité | Spécifique à Node.js | Universelle |
| Configuration supplémentaire | Aucune | Nécessite "type": "module" |
| Support des navigateurs | Non | Oui |
| Optimisation (tree-shaking) | Difficile | Native |
Lequel utiliser ?
| Contexte | Recommandation |
|---|---|
| Nouveau projet | ESM |
| Projet existant (CommonJS) | CommonJS |
| Frontend / Navigateur | ESM |
| Script simple | CommonJS |
Recommandation générale : Utilisez ESM pour tous les nouveaux projets. C'est le standard moderne, compatible navigateurs, et optimisé pour les outils de build actuels.