Node.js et npm

Slides#

Deck 4 — Node.js et npm (PDF)PDF

Objectif : installer Node.js sur ta machine, comprendre à quoi sert npm, et connaître les cinq commandes que tu vas taper toute l'année.

En une phrase : Node.js fait tourner du JavaScript en dehors du navigateur, et npm installe les outils dont tes projets ont besoin.

C'est quoi Node.js ?#

Le JavaScript que tu connais s'exécute dans le navigateur. Node.js, c'est le même langage, mais exécuté directement par ton ordinateur, sans navigateur.

Pourquoi ça t'intéresse ? Parce que les outils de développement web modernes sont eux-mêmes écrits en JavaScript. Vite, Vue, Tailwind, ESLint : tous ont besoin de Node pour tourner.

Tu ne vas quasiment jamais écrire de code « pour Node ». Tu l'installes une fois, et il fait tourner tes outils en arrière-plan.

C'est quoi npm ?#

npm = Node Package Manager, le gestionnaire de paquets de Node.

C'est le magasin d'applications des outils de dev. Tu veux Tailwind ? Une commande. Vue ? Une commande. Un paquet, c'est du code écrit par quelqu'un d'autre que tu ajoutes à ton projet.

npm install tailwindcss
npm install vue

Bonne nouvelle : npm s'installe automatiquement avec Node.js. Rien à faire de plus.

Vérifier si Node.js est déjà là#

Ouvre ton terminal et tape :

node --version
npm --version

Sur Mac, ça ressemble à ça :

~ % node --version
v24.21.0
~ % npm --version
11.6.2

(Chez toi les numéros seront peut-être différents : ce qui compte, c'est que les deux commandes répondent.)

Sur Windows avec le terminal de Laragon :

C:\Users\prenom
λ node --version
v24.21.0

Si tu vois deux numéros de version, c'est installé. Passe directement aux commandes npm.

Si tu vois command not found ou n'est pas reconnu en tant que commande, c'est que Node n'est pas installé (ou pas trouvé) : suis la section correspondant à ton système ci-dessous.

Installer Node.js sur Windows (Laragon)#

Laragon est livré avec une version de Node, souvent ancienne. On va en ajouter une à jour.

Étape 1 — Télécharger le zip#

1. Va sur nodejs.org.
2. Choisis la version LTS.
3. Attention : prends le Standalone Binary (.zip) pour Windows x64, pas l'installeur .msi. Laragon a besoin du zip pour gérer plusieurs versions.

Étape 2 — Décompresser#

Extrais le .zip. Tu obtiens un dossier qui contient node.exe, npm.cmd et compagnie.

Étape 3 — Placer le dossier dans Laragon#

Déplace ce dossier dans C:\laragon\bin\nodejs\, à côté des versions déjà présentes.

C:\laragon\
└── bin\
    └── nodejs\
        ├── node-v22.11.0-win-x64\   (ancienne version)
        └── node-v24.21.0-win-x64\   (celle que tu viens d'ajouter)
            ├── node.exe
            ├── npm.cmd
            └── ...

Étape 4 — Sélectionner la version dans Laragon#

1. Ouvre Laragon.
2. Clic droit sur l'icône, ou bouton Menu.
3. Node.js → Version.
4. Choisis le dossier que tu viens d'ajouter.
5. Laragon redémarre tout seul.

Étape 5 — Vérifier#

Ouvre un nouveau terminal Laragon (les anciens gardent l'ancienne version en mémoire) :

C:\Users\prenom
λ node --version
v24.21.0

Installer Node.js sur macOS#

Sur Mac, pas de Laragon : on passe par l'installeur officiel.

1. Va sur nodejs.org.
2. Télécharge la version LTS pour macOS : c'est un fichier .pkg.
3. Double-clique dessus et suis l'assistant (suivant, suivant, ton mot de passe de session, terminé).
4. Ferme complètement ton terminal et rouvre-le. C'est l'étape que tout le monde saute, et c'est celle qui fait croire que l'installation a raté.
5. Vérifie :

~ % node --version
v24.21.0

Où lancer les commandes : la règle à ne pas oublier#

cd ~/repos

Un projet Vue n'a pas besoin d'Apache ni de PHP : il a son propre serveur, lancé par Vite. Le mettre dans www ne sert à rien et crée des problèmes de chemins.

Les 5 commandes npm à connaître#

1. npm install#

Quand tu récupères un projet existant (le tien sur une autre machine, celui d'un collègue, un dépôt Git).

npm install

Elle lit le fichier package.json et télécharge tous les paquets listés dedans.

2. npm install <paquet>#

Pour ajouter un outil à ton projet.

npm install tailwindcss
npm install @tailwindcss/vite

3. npm run dev#

Pour travailler sur ton projet : elle lance le serveur de développement, avec rechargement automatique à chaque sauvegarde.

npm run dev

Le site devient accessible sur http://localhost:5173.

4. npm run build#

Pour préparer la mise en ligne : elle génère une version optimisée dans un dossier dist/.

npm run build

5. npm create <modèle>#

Pour démarrer un nouveau projet à partir d'un modèle.

npm create vue@latest

Un assistant te pose quelques questions et génère la structure de base. C'est l'objet du chapitre suivant.

Le fichier package.json#

À la racine de chaque projet npm, tu trouves un package.json. C'est la carte d'identité du projet : son nom, ses commandes, ses dépendances.

{
  "name": "mon-portfolio",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.42"
  },
  "devDependencies": {
    "vite": "^8.2.2"
  }
}

Ce qu'il faut savoir lire :

• scripts : les commandes disponibles. Une ligne "dev": "vite" signifie que npm run dev lance Vite. Si tu ne sais plus quelles commandes existent dans un projet, c'est ici que tu regardes.
• dependencies : les paquets nécessaires au site une fois en ligne (Vue, par exemple).
• devDependencies : les paquets utiles seulement pendant le développement (Vite, ESLint, Prettier). Ils ne partent pas chez le visiteur.

Tu n'édites presque jamais ce fichier à la main : npm le met à jour à chaque npm install.

Le dossier node_modules/#

Après un npm install, un gros dossier node_modules/ apparaît. Il contient tous les paquets téléchargés, et il pèse facilement plusieurs centaines de mégaoctets.

Ce que tu en fais : rien.

• Tu ne l'édites pas.
• Tu ne l'envoies pas sur Git (le .gitignore généré l'exclut déjà).
• Tu ne le mets pas dans un zip pour partager ton projet.

Pourquoi ? Parce qu'il est reconstructible. Avec le package.json, n'importe qui retrouve exactement les mêmes paquets en tapant npm install. On partage la recette, pas les courses. 🛒

Récap#

Node et npm sont prêts. Au chapitre suivant, on crée enfin le projet Vue.

Pour aller plus loin#

• nodejs.org — télécharger Node.js
• docs.npmjs.com — la documentation npm
• npmjs.com — chercher un paquet