Lorsque l’on commence à développer en JavaScript, on découvre rapidement que le langage ne se limite pas à quelques fichiers que l’on écrit dans un coin de son ordinateur. Au fur et à mesure que les projets grandissent, on a besoin d’outils, de bibliothèques prêtes à l’emploi et de méthodes pour organiser son code de façon propre et réutilisable. C’est à ce moment-là qu’entrent en scène deux éléments essentiels du développement moderne : npm et les modules JavaScript.
- Comprendre comment installer, mettre à jour et gérer efficacement des packages pour gagner du temps et éviter de réinventer des solutions existantes.
- Apprendre à structurer son code avec des modules pour rendre un projet plus clair, plus maintenable et plus évolutif.
- Savoir importer et exporter des fonctions afin de réutiliser son code facilement et travailler de manière plus professionnelle.
Dans ce chapitre sur node.js, nous allons prendre le temps d’explorer ces deux notions, étape par étape. L’objectif est que vous compreniez non seulement comment installer, mettre à jour ou supprimer des packages avec npm, mais aussi comment importer et exporter vos propres fonctions dans des modules.
Vous découvrirez à quoi tout cela sert concrètement, à quel moment l’utiliser et comment le mettre en place dans un projet réel. Comme toujours, nous partirons du principe que vous débutez et que vous n’êtes pas forcément familier avec l’environnement Node.js. Vous verrez que, même si ces concepts peuvent paraître un peu techniques au premier abord, ils deviennent très logiques dès qu’on les manipule avec des exemples simples.
- Qu’est-ce que npm et pourquoi est-il si important ?
- Installer Node.js et npm
- Créer un premier projet avec npm
- Installer des packages avec npm
- Utiliser un package dans votre code
- Mettre à jour un package
- Supprimer un package
- Comprendre les modules JavaScript
- Créer son premier module : exporter une fonction
- Organiser son projet avec des modules
- Mélanger modules et packages npm
- Modules côté navigateur
- Comment reconnaître quand il faut créer un module ?
Qu’est-ce que npm et pourquoi est-il si important ?
Avant d’apprendre à l’utiliser, clarifions ce qu’est npm. Derrière ce nom très court se cache quelque chose de fondamental dans le développement JavaScript moderne. Npm signifie Node Package Manager. Comme son nom l’indique, c’est un gestionnaire de packages, c’est-à-dire un outil qui vous permet d’installer, de gérer et de partager des librairies et des outils sous forme de paquets à l’image de Composer pour PHP.
Pour faire une comparaison simple : imaginez que vous soyez cuisinier dans une cuisine vide. Vous pourriez fabriquer vous-même tous les ingrédients : le beurre, la farine, les épices, les légumes… mais ce serait très long. Grâce à npm, vous pouvez aller dans une sorte de supermarché géant spécialisé dans le code, récupérer les ingrédients dont vous avez besoin et les intégrer dans votre recette.
Par exemple, si vous avez besoin d’un outil pour créer une interface web plus facilement ? Il existe React, Vue ou Svelte (Codez une application web en SPA avec Svelte). Vous voulez gérer des dates et des heures ? Il existe Day.js. Vous voulez créer un serveur web local pour tester un site ? Il existe Express.
Tout cela est accessible gratuitement, en quelques secondes, grâce à npm.
Installer Node.js et npm
Npm s’installe automatiquement en même temps que Node.js. Si vous n’avez pas encore Node.js sur votre ordinateur, il faut commencer par là. La manière la plus simple consiste à aller sur le site officiel nodejs.org, télécharger la version recommandée, puis installer l’application en suivant les étapes.
Consultez notre Tutoriel pour installer et comprendre Node.js.
Une fois installé, ouvrez votre terminal ou votre ligne de commande. Pour vérifier que tout est prêt, tapez :
node -vCela affichera la version de Node installée.
Puis :
npm -vCela affichera la version de npm. Si les deux commandes renvoient bien un numéro, alors vous êtes prêt à continuer.
Créer un premier projet avec npm
Pour comprendre comment fonctionne npm, nous allons créer un petit projet fictif. Imaginons que vous développez une page web et que vous souhaitez utiliser une librairie qui facilite l’affichage d’alertes personnalisées.
Commencez par créer un dossier :
mkdir mon-projet-npm
cd mon-projet-npmEnsuite, initialisez npm dans ce dossier :
npm initNpm va vous poser plusieurs questions, comme le nom du projet, la version, la description, etc. Si vous ne savez pas quoi répondre, appuyez simplement sur Entrée à chaque fois. À la fin, un fichier nommé package.json sera créé dans le dossier. Ce fichier sera très important : il contiendra toutes les informations concernant votre projet, notamment la liste des packages que vous installerez.
Installer des packages avec npm
Reprenons notre exemple. Supposons que nous voulions installer une petite bibliothèque utile. Prenons Day.js, une librairie très légère permettant de manipuler facilement les dates. Pour l’installer, il suffit d’écrire :
npm install dayjsNpm fera deux choses :
- Créer un dossier node_modules contenant tous les fichiers nécessaires au package.
- Ajouter une ligne “dayjs” dans le fichier package.json, afin que le projet garde une trace de ce qu’il utilise.
Beaucoup de débutants s’étonnent de la taille du dossier node_modules. Il peut parfois peser plusieurs centaines de mégaoctets. Cela est normal : il contient non seulement les packages que vous avez choisis, mais aussi leurs dépendances internes. Vous pouvez considérer ce dossier comme votre étagère d’ingrédients.
Utiliser un package dans votre code
Une fois le package installé, vous pouvez déjà l’utiliser. Créons un fichier nommé index.js dans votre dossier de projet.
Écrivez dedans :
const dayjs = require("dayjs");
const maintenant = dayjs();
console.log("Nous sommes le :", maintenant.format("DD/MM/YYYY"));Pour exécuter ce fichier :
node index.jsVotre terminal affichera la date du jour. Vous venez d’utiliser un package npm dans votre code. Cela paraît simple, mais c’est exactement ce que font 99% des projets web modernes.
Mettre à jour un package
Au fil du temps, les packages évoluent. Les développeurs qui les maintiennent corrigent des bugs, ajoutent des fonctionnalités, améliorent les performances. Il est donc important de pouvoir mettre à jour un package. Pour cela, vous pouvez utiliser :
npm update nom-du-packagePar exemple :
npm update dayjsSi vous souhaitez mettre à jour tous les packages d’un coup :
npm updateCependant, il est important d’être prudent. Certaines mises à jour majeures peuvent apporter des changements qui cassent votre code. Il est donc préférable de lire les notes de mises à jour avant de tout mettre à jour compulsivement.
Supprimer un package
Si vous décidez qu’un package ne vous sert plus, il est inutile de le garder. Pour le supprimer :
npm uninstall dayjsNpm va l’enlever de node_modules et le retirer proprement de votre fichier package.json.
Cela paraît simple, mais c’est une bonne habitude à prendre : garder un projet propre signifie moins de confusion, moins d’incompatibilités et, souvent, de meilleures performances.
Petite astuce …
À mes débuts, je ne comprenais pas vraiment ce qu’il y avait dans le dossier node_modules. Je l’avais supprimé par erreur en pensant que ce n’était pas si grave. En relançant mon projet, tout se cassait. Je croyais avoir tout perdu. Finalement, j’ai découvert qu’il suffisait de taper cette commande magique :
npm installNpm a alors analysé le fichier package.json et a tout re-téléchargé automatiquement. Un vrai soulagement. À partir de là, j’ai commencé à comprendre à quel point ce fichier est essentiel.
Comprendre les modules JavaScript
Maintenant que vous savez installer et utiliser des packages avec npm, il est temps de s’intéresser à un autre aspect fondamental de JavaScript moderne : les modules.
Le principe des modules est simple : il s’agit de découper votre code en plusieurs fichiers, chacun responsable d’une partie bien définie. Cela permet de rendre votre code plus lisible, plus propre et plus facile à maintenir.
Imaginez que vous écriviez un livre. Si tout était dans un seul chapitre de 300 pages, ce serait illisible. Les modules, c’est l’art de répartir votre histoire en chapitres organisés.
Avant les modules : le JavaScript « tout-en-un »
Pendant longtemps, JavaScript n’avait pas de système de modules intégré. On écrivait tout dans un seul fichier, ou alors on multipliait les balises <script> dans le HTML, ce qui devenait vite compliqué. Lorsque plusieurs scripts utilisaient les mêmes noms de fonctions, cela provoquait des conflits. C’était comme si vous aviez plusieurs personnes dans la même cuisine en train d’utiliser les mêmes ustensiles : difficile de s’y retrouver.
Des formations informatique pour tous !
Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…
Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.
Découvrez mes formations Qui suis-je ?Aujourd’hui, grâce aux modules ES (appelés ES Modules ou ESM), JavaScript permet d’importer et d’exporter du code de manière claire. C’est devenu la norme sur la plupart des navigateurs et avec Node.js.
Créer son premier module : exporter une fonction
Commençons par quelque chose de très simple. Dans votre projet, créez un fichier nommé utils.js. Ce fichier contiendra une petite fonction. Écrivons :
exports.saluer = function(nom) {
console.log("Bonjour " + nom);
};Le mot-clé export indique que cette fonction pourra être utilisée ailleurs, dans un autre fichier. Vous avez créé votre premier module !
Importer une fonction dans un autre fichier
Maintenant, dans votre fichier index.js, vous pouvez importer cette fonction :
const { saluer } = require("./utils.js");
console.log(saluer("Alice"));Exécutez :
node index.jsLe terminal affichera un message chaleureux. Vous venez de faire collaborer deux fichiers JavaScript. Cela peut sembler anodin, mais c’est l’essence même d’une architecture propre.
Un module peut exporter plusieurs fonctions. Par exemple :
export function addition(a, b) {
return a + b;
}
export function multiplication(a, b) {
return a * b;
}Et vous pouvez importer plusieurs fonctions à la fois :
import { addition, multiplication } from "./utils.js";Le plus simple ici, pour que cela fonctionne, il vous faut passer votre projet en mode ES Modules.
Ouvrez votre fichier package.json et remplacez :
"type": "commonjs"par :
"type": "module"Export par défaut vs export nommé
Il existe deux types d’exports en JavaScript : l’export nommé (celui que nous venons d’utiliser) et l’export par défaut.
Un export par défaut est une valeur ou une fonction principale que le module met en avant. Par exemple :
export default function direBonjour() {
return "Bonjour tout le monde !";
}Pour l’importer, vous écrivez :
import direBonjour from "./utils.js";La différence ici est que vous n’avez pas besoin d’accolades. Cela peut être pratique quand vous avez une fonction principale dans un module. Mais attention, il ne peut y avoir qu’un seul export par défaut par fichier, alors qu’il peut y avoir plusieurs exports nommés.
Lorsque vous débutez, il est normal d’hésiter entre les deux. Une bonne règle pour commencer : utilisez l’export nommé quand vous avez plusieurs fonctions et l’export par défaut quand votre module sert essentiellement à fournir une seule fonctionnalité centrale.
Organiser son projet avec des modules
Au fur et à mesure que votre projet grandit, vous allez peut-être vous retrouver avec une dizaine, puis une cinquantaine de fichiers. Cela peut faire peur la première fois, mais l’avantage est que tout devient plus structuré.
Par exemple, si vous développez un site, vous pouvez consacrer :
- Un fichier pour les fonctions liées à l’affichage.
- Un fichier pour la gestion de la date.
- Un fichier pour les interactions utilisateur.
- Un fichier pour les requêtes réseau.
Chaque fichier joue un rôle précis. C’est la clé pour ne pas se perdre.
Un développeur expérimenté que j’ai rencontré un jour m’a confié que « la qualité d’un projet se voit à la façon dont il est rangé ». Avec les modules, vous donnez à votre code un espace respirable.
Mélanger modules et packages npm
L’intérêt des modules ne s’arrête pas à votre propre code. Ils permettent aussi d’avoir une intégration propre des packages npm dans votre application. Reprenons Day.js, que nous avons installé précédemment. Il s’importe exactement comme une fonction depuis un module :
import dayjs from "dayjs";Vous pouvez donc mélanger facilement vos modules personnels avec des modules externes.
Exemple concret dans index.js :
import dayjs from "dayjs";
import { saluer } from "./utils.js";
console.log(saluer("Marie"));
console.log("Nous sommes le :", dayjs().format("DD/MM/YYYY"));Cela peut sembler simple, mais c’est la base d’applications professionnelles qu’on retrouve dans des frameworks comme React, Vue ou Angular.
Modules côté navigateur
Il est possible d’utiliser les modules directement dans votre navigateur, sans Node.js. Il suffit d’utiliser l’attribut type="module" dans la balise script :
<script type="module" src="app.js"></script>Et dans app.js, vous pouvez écrire :
import { saluer } from "./utils.js";Cependant, attention à deux choses :
- Votre navigateur doit charger les fichiers depuis un serveur (même un serveur local), pas directement depuis le fichier système.
- Les chemins doivent être précis et inclure l’extension .js.
Comment reconnaître quand il faut créer un module ?
Une question fréquente chez les débutants est : comment savoir quand il faut créer un module ?
Voici un bon repère : lorsque votre fichier commence à devenir trop long ou qu’il contient des fonctions qui réalisent des tâches différentes, il est temps de découper.
De manière générale, si vous vous dites « tiens, j’ai déjà écrit une fonction qui fait ça l’autre jour, où est-elle ? », c’est que vous devriez utiliser un module. Le module devient alors votre tiroir de rangement. Et comme à la maison, un tiroir bien rangé change tout.
Vous venez de découvrir deux piliers essentiels du développement JavaScript moderne : npm et les modules. D’un côté, npm vous permet d’ajouter facilement des outils externes, d’améliorer vos projets sans réinventer la roue et de gagner énormément de temps. De l’autre, les modules vous permettent d’organiser votre code de façon claire, logique et évolutive.
Ces pratiques ne sont pas simplement théoriques. Elles constituent la base de quasiment tous les projets web actuels, qu’il s’agisse de petites applications personnelles ou de grandes plateformes utilisées par des millions de personnes. En les maîtrisant, vous posez des fondations solides pour votre avenir dans le développement web.
Comme souvent dans l’apprentissage du code, l’idéal est d’expérimenter. Créez un petit projet, installez deux ou trois packages avec npm, organisez votre code en modules, faites des essais, cassez des choses, réparez-les. Le plus important n’est pas d’être parfait, mais d’oser manipuler ces outils.
Et rappelez-vous : même si le dossier node_modules vous semble gigantesque, même si vous oubliez une accolade dans un import ou si vous mélangez export nommé et export par défaut, ce n’est pas grave. Chaque erreur est une étape dans la construction de votre expérience.
Vous êtes désormais équipé pour aller plus loin, construire des projets de plus en plus complets et comprendre les coulisses du code moderne. À partir de là, la suite dépend de votre curiosité et de votre envie de créer.
