Frontend Academy · Leçon

npm et package.json : dépendances et scripts

Initialisez un projet avec npm init, ajoutez des dépendances d’exécution et de développement, écrivez des scripts npm réutilisables et comprenez semver.

npm et package.json : dépendances et scripts est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Qu’est-ce que npm ?

npm (Node Package Manager) gère les dépendances et les scripts d’un projet. Il lit package.json pour savoir quoi installer et écrit package-lock.json pour enregistrer les versions exactes. Plus de deux millions de paquets sont publiés dans le registre npm.

Initialiser un projet

npm init -y crée un package.json avec des valeurs par défaut. L’option -y accepte toutes les valeurs par défaut sans poser de questions.

mkdir my-project && cd my-project
npm init -y
# Creates package.json

Le fichier package.json

Champs principaux : name, version, description, main (point d’entrée), scripts, dependencies, devDependencies.

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "jest"
  },
  "dependencies": {
    "react": "^18.3.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

Installer des paquets

npm install package ajoute un paquet aux dépendances. npm install -D package l’ajoute aux devDependencies (elles ne sont pas nécessaires en production). npm install sans argument installe tout ce qui est indiqué dans package.json.

npm install react react-dom      # production dep
npm install -D vite jest eslint  # dev deps only
npm install                      # install all from package.json

Gestion sémantique des versions

npm utilise semver : major.minor.patch. Le préfixe ^ autorise les mises à jour compatibles (avec le même numéro majeur). Le préfixe ~ autorise uniquement les mises à jour correctives. Les versions exactes n’ont aucun préfixe.

"react": "^18.3.0"  // 18.3.0 to < 19.0.0 (compatible)
"lodash": "~4.17.21" // 4.17.21 to < 4.18.0 (patch only)
"fixed": "1.2.3"     // exactly 1.2.3

Scripts npm

Définissez les commandes dans le champ scripts. Exécutez-les avec npm run scriptname. Les scripts intégrés (test, start) s’exécutent directement avec npm test ou npm start.

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview",
  "test": "jest --coverage",
  "lint": "eslint src",
  "typecheck": "tsc --noEmit"
}

npm run et npx

npm run exécute un script depuis package.json. npx exécute un paquet depuis node_modules ou le télécharge et l’exécute temporairement — c’est utile pour les commandes ponctuelles comme npx create-vite@latest.

package-lock.json

package-lock.json enregistre la version exacte de chaque paquet installé (ainsi que leurs dépendances transitives). Validez-le dans le dépôt afin que tous les développeurs et l’intégration continue utilisent des versions identiques. Ne le modifiez jamais manuellement.

node_modules et .gitignore

Ne validez jamais node_modules dans le dépôt : ce dossier peut atteindre plusieurs centaines de MB. Ajoutez-le toujours à .gitignore. N’importe qui peut le restaurer avec npm install.

# .gitignore
node_modules/

Mettre à jour et supprimer des paquets

npm update met à jour les paquets dans leur plage semver. npm outdated indique ce qui peut être mis à jour. npm uninstall package supprime un paquet.

npm outdated                # show outdated packages
npm update react             # update to latest compatible
npm uninstall lodash         # remove package

npm vs yarn vs pnpm

Alternatives à npm : yarn (plus rapide, espaces de travail, Plug'n'Play) et pnpm (stockage par liens symboliques économe en espace disque, dépendances strictes, plus rapide pour les monorepos). Les commandes principales sont similaires dans les trois outils.

# pnpm equivalents:
pnpm install
pnpm add react
pnpm add -D vite
pnpm run dev

Vérification rapide

Que fait l'option -D lorsque vous exécutez npm install -D jest ?

Récapitulatif : npm et package.json

npm init crée package.json. npm install ajoute des dépendances. -D est utilisé pour devDependencies. ^ dans semver signifie que les mises à jour restent compatibles. Les scripts exécutent des commandes avec npm run. package-lock.json enregistre les versions exactes — validez-le dans le dépôt. node_modules doit figurer dans .gitignore. npx exécute des commandes de paquet ponctuelles.

Questions Fréquemment Posées

La leçon « npm et package.json : dépendances et scripts » est-elle gratuite ?

Oui — le texte complet de « npm et package.json : dépendances et scripts » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « npm et package.json : dépendances et scripts » ?

Initialisez un projet avec npm init, ajoutez des dépendances d’exécution et de développement, écrivez des scripts npm réutilisables et comprenez semver. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « npm et package.json : dépendances et scripts » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Modules ES : import, export et import dynamique
npm et package.json : dépendances et scripts
Vite : serveur de développement et compilation
Concepts de regroupement : tree shaking et division du code

← Retour à Frontend Academy