JavaScript

Utiliser des paquets npm et un outil de build (Vite)

0 chapitres 0 QCM Accès gratuit

À propos de ce cours

Utiliser des paquets npm et un outil de build (Vite). Dans cette leçon du cours JavaScript, vous apprendrez à : créer un projet avec npm et comprendre le rôle de package.json ; installer un paquet et l'importer par son nom ; lancer des scripts avec npm run ; créer un projet Vite, le lancer en développement et produire la version à publier.

Chapitre 17 — Les modules et l'organisation du code · 17.5 Utiliser des paquets npm et un outil de build (Vite)

ℹ️ À retenir
Nouvelle leçon : dans un vrai projet, on importe aussi le code des autres (paquets npm), et on prépare les modules pour la mise en ligne avec un outil de build. C'est la suite naturelle de l'organisation en modules.

🎯 Objectifs de la leçon
• créer un projet avec npm et comprendre le rôle de package.json;
• installer un paquet et l'importer par son nom ;
• lancer des scripts avec npm run;
• créer un projet Vite, le lancer en développement et produire la version à publier.

Du registre npm au serveur web avec Vite
Figure 1 — Le cycle de vie d'un projet moderne.

1. npm et package.json

npm (Node Package Manager) est installé avec Node.js. Il télécharge des paquets (bibliothèques) depuis le registre public npmjs.com.

mkdir demo-npm && cd demo-npm
npm init -y              # crée package.json
npm install dayjs        # télécharge dayjs dans node_modules/ et l'ajoute aux dépendances

2. Importer un paquet

Un paquet s'importe par son nom, sans ./ ni extension : Node.js le cherche dans node_modules/.

📄 package.json

{
  "name": "demo-npm",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "start": "node src/main.js"
  },
  "dependencies": {
    "dayjs": "^1.11.23"
  }
}

📄 src/main.js

// Un paquet npm s'importe par son NOM, sans ./ ni extension
import dayjs from "dayjs";
import "dayjs/locale/fr.js";

dayjs.locale("fr");
const rentree = dayjs("2026-09-15");
console.log("Rentrée :", rentree.format("dddd D MMMM YYYY"));
console.log("Dans 30 jours :", rentree.add(30, "day").format("D MMMM"));

Dans le terminal : npm start

Rentrée : mardi 15 septembre 2026
Dans 30 jours : 15 octobre

Après l'installation, package.json contient la dépendance :

"dependencies": {
  "dayjs": "^1.11.23"
}

"scripts" définit des commandes : npm start, npm run test, npm run build…
^1.11.23 accepte les mises à jour mineures (1.x.x), pas la version 2.
package-lock.json fige les versions exactes : on le garde dans Git.
node_modules/ ne va jamais dans Git (fichier .gitignore) : npm install le recrée à partir de package.json.
npm install --save-dev paquet: dépendance utile seulement pour développer (outil de test, de build).

3. Pourquoi un outil de build ?

Le navigateur ne sait pas trouver "dayjs" dans node_modules/: il ne comprend que des chemins (./, /, https://). Et un site avec 80 petits modules fait 80 requêtes. Un outil de build (bundler) comme Vite:

en développement : fournit un serveur local qui résout les imports de paquets et recharge la page à chaque modification ;
pour la production : regroupe et minifie les modules en quelques fichiers optimisés dans dist/, en conservant les import() dynamiques comme fichiers séparés chargés à la demande.

4. Créer un projet Vite

npm create vite@latest ma-boutique -- --template vanilla
cd ma-boutique
npm install
npm run dev        # serveur de développement : http://localhost:5173
npm run build      # crée le dossier dist/ à publier
npm run preview    # teste localement la version de dist/

Le projet généré contient index.html à la racine, qui charge /src/main.js avec type="module", exactement comme en leçon 17.3. Vous organisez src/ comme en leçon 17.4. Seul le contenu de dist/ est envoyé sur le serveur.

⚠️ Attention
Avant d'installer un paquet, vérifiez sur npmjs.com : le nombre de téléchargements par semaine, la date de la dernière mise à jour, la licence et la taille. Chaque dépendance est du code que vous ne maîtrisez pas : n'en ajoutez pas pour une fonction de trois lignes.

ℹ️ À retenir
• npm init -y crée package.json; npm install nom ajoute une dépendance.
• Un paquet s'importe par son nom : import dayjs from "dayjs".
• node_modules/ hors de Git ; package.json et package-lock.json dans Git.
• Vite : npm run dev pour développer, npm run build pour produire dist/, qu'on publie.

🛠 Activité 5 — Du projet npm au site publié

Mission : Transformez votre convertisseur (activités 1 et 3) en projet Vite qui utilise un paquet npm.

Questions pour avancer (répondez dans votre compte rendu, puis appliquez dans votre projet) :

Créez le projet avec npm create vite@latest. Quels fichiers et dossiers ont été créés ? Ouvrez package.json: quels scripts sont définis, et quelle commande lance chacun ?
Déplacez vos modules dans src/ et adaptez main.js. Lancez npm run dev, puis modifiez un texte : que se passe-t-il dans le navigateur sans recharger ?
Installez un paquet de formatage de nombres ou de dates et utilisez-le pour afficher le résultat. Comment avez-vous choisi ce paquet (critères vérifiés sur npmjs.com) ?
Essayez d'ouvrir votre index.html avec Live Server au lieu de Vite. L'import du paquet fonctionne-t-il ? Quel message obtenez-vous et pourquoi ?
Lancez npm run build. Combien de fichiers JavaScript trouvez-vous dans dist/assets/? Ouvrez-en un : à quoi ressemble le code ? Pourquoi ?
Ajoutez un import() dynamique pour une fonctionnalité rare, puis relancez le build. Combien de fichiers JavaScript obtenez-vous maintenant ?
Supprimez node_modules/, puis tapez npm install. Pourquoi tout revient-il ? Que doit contenir votre fichier .gitignore?

Je vérifie / je rends :

☐ Le projet Vite fonctionnel (sans node_modules/).
☐ La liste commentée du contenu de dist/.

← 17.4 Organiser un projet JavaScript en modules17.6 TP 17 : Découper une application en modules →

Sommaire du cours JavaScript

Télécharger ce cours en PDF 0

Utiliser des paquets npm et un outil de build (Vite)

Dans cet article

17- Les modules et l'organisation du code

Sommaire du cours

Autres catégories