Pourquoi Modules ES en JavaScript ?
Les modules ES (ECMAScript) sont une spécification qui introduit un système standard pour organiser et partager le code JavaScript. Ils ont été conçus pour rendre la maintenance, l'extension et la réutilisation du code plus faciles.
Contexte reel : pourquoi un dev a besoin de ca au quotidien
En tant que développeur, vous travaillez souvent sur des projets complexes qui nécessitent une grande quantité de code. Les modules ES vous permettent de diviser ce code en morceaux distincts et de les organiser de manière structurée. Cela rend le code plus lisible, plus facile à gérer et moins susceptible d'erreurs.
Un cas d'usage concret en 2-3 phrases
Supposons que vous travaillez sur une application web moderne qui a plusieurs fonctionnalités distinctes : affichage de la liste des tâches, ajout de nouvelles tâches et suppression de tâches existantes. En utilisant les modules ES, vous pouvez diviser ce code en trois fichiers différents : tasks.js, addTask.js et deleteTask.js. Chaque fichier contiendra le code spécifique à sa fonctionnalité, facilitant ainsi la maintenance et le développement.
Prerequis
- Connaissances de base en JavaScript
- Node.js version 12 ou supérieure (pour l'utilisation des modules ES)
- Un éditeur de texte ou un IDE (comme VSCode)
Concepts fondamentaux
Syntaxe des Modules ES
Pour utiliser les modules ES, vous devez exporter des fonctions, des variables ou des objets à partir d'un fichier et les importer dans d'autres fichiers. Voici comment c'est fait :
Exporter une fonction
// tasks.js
export function getTasks() {
return [
{ id: 1, text: '🥖 Acheter du pain', completed: true },
{ id: 2, text: '🧹 Faire la vaisselle', completed: false }
];
}
Importer une fonction
// app.js
import { getTasks } from './tasks.js';
console.log(getTasks());
Export par défaut et export nommé
Il est également possible d'exporter une fonction par défaut et d'autres fonctions nommées.
Export par défaut
// tasks.js
const tasks = [
{ id: 1, text: '🥖 Acheter du pain', completed: true },
{ id: 2, text: '🧹 Faire la vaisselle', completed: false }
];
export default tasks;
Importer une fonction par défaut
// app.js
import tasks from './tasks.js';
console.log(tasks);
Utilisation des modules ES avec les fichiers HTML
Pour utiliser les modules ES dans un fichier HTML, vous devez inclure le script avec l'attribut type="module".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modules ES Example</title>
</head>
<body>
<script type="module" src="app.js"></script>
</body>
</html>
Mise en pratique : projet fil rouge
Nous allons créer un gestionnaire de tâches simple en utilisant les modules ES.
Étape 1 : Créer le fichier tasks.js
// tasks.js
const tasks = [
{ id: 1, text: '🥖 Acheter du pain', completed: true },
{ id: 2, text: '🧹 Faire la vaisselle', completed: false }
];
export default tasks;
Étape 2 : Créer le fichier app.js
// app.js
import tasks from './tasks.js';
console.log(tasks);
Étape 3 : Ajouter des fonctionnalités
Pour rendre notre gestionnaire de tâches plus interactif, nous allons ajouter des fonctions pour ajouter et supprimer des tâches.
addTask.js
// addTask.js
export function addTask(task) {
tasks.push({ id: Date.now(), text: task, completed: false });
}
const tasks = [
{ id: 1, text: '🥖 Acheter du pain', completed: true },
{ id: 2, text: '🧹 Faire la vaisselle', completed: false }
];
export default addTask;
deleteTask.js
// deleteTask.js
export function deleteTask(id) {
tasks = tasks.filter(task => task.id !== id);
}
const tasks = [
{ id: 1, text: '🥖 Acheter du pain', completed: true },
{ id: 2, text: '🧹 Faire la vaisselle', completed: false }
];
export default deleteTask;
Étape 4 : Importer et utiliser les fonctions
// app.js
import tasks from './tasks.js';
import addTask from './addTask.js';
import deleteTask from './deleteTask.js';
console.log(tasks);
addTask('🥖 Acheter du beurre');
console.log(tasks);
deleteTask(1);
console.log(tasks);
Erreurs frequentes et debugging
1. SyntaxError: Unexpected token 'export'
Cause : Vous avez utilisé le mot-clé export dans un fichier qui n'est pas reconnu comme un module.
Correction :
// app.js
import tasks from './tasks.js';
console.log(tasks);
2. SyntaxError: The requested module './tasks.js' does not provide an export named 'getTasks'
Cause : Vous avez essayé d'importer une fonction qui n'existe pas.
Correction :
// tasks.js
export function getTasks() {
return [
{ id: 1, text: '🥖 Acheter du pain', completed: true },
{ id: 2, text: '🧹 Faire la vaisselle', completed: false }
];
}
3. TypeError: Cannot read property 'push' of undefined
Cause : Vous avez essayé d'utiliser une variable non définie.
Correction :
// tasks.js
const tasks = [
{ id: 1, text: '🥖 Acheter du pain', completed: true },
{ id: 2, text: '🧹 Faire la vaisselle', completed: false }
];
export default tasks;
Pour aller plus loin
1. Utiliser import * as pour importer toutes les exportations d'un fichier
// app.js
import * as taskModule from './tasks.js';
console.log(taskModule.getTasks());
2. Utiliser export from pour re-exporter des modules
// index.js
export { getTasks } from './tasks.js';
export { addTask } from './addTask.js';
export { deleteTask } from './deleteTask.js';
3. Utiliser le package manager npm pour gérer les dépendances de module
npm install --save-dev @babel/core @babel/preset-env babel-loader webpack webpack-cli
Défi pratique : Créez un petit CLI tool qui permet d'ajouter et de supprimer des tâches.