0Pricing
Frontend Academy · Leçon

Espaces de travail pnpm pour les monorepos

Configurez un espace de travail pnpm avec un fichier racine pnpm-workspace.yaml, remontez les dépendances partagées et utilisez le protocole workspace: pour relier les paquets locaux.

Espaces de travail pnpm pour les monorepos est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.

Pourquoi pnpm ?

pnpm (Performant npm) est un gestionnaire de paquets rapide et économe en espace disque. Il stocke une seule copie de chaque paquet dans un magasin global adressable par contenu et crée des liens vers celui-ci depuis le node_modules du projet. Même dépendance, plusieurs projets : une seule copie sur le disque.

Rapidité et économies d'espace disque

Dans un monodépôt courant, les installations pnpm sont 2 à 3 fois plus rapides que celles de npm/yarn et utilisent environ 70 % d'espace disque en moins. Le gain est considérable pour les monodépôts contenant de nombreux paquets.

Installer pnpm

Utilisez Corepack (inclus avec Node 16+) ou installez pnpm globalement.

# Corepack (recommended):
corepack enable
corepack prepare pnpm@latest --activate

# Or:
npm install -g pnpm

Configuration de l'espace de travail

Créez un pnpm-workspace.yaml à la racine en y listant les dossiers contenant des paquets.

# pnpm-workspace.yaml
packages:
  - 'apps/*'
  - 'packages/*'
  - '!**/test/**'

Structure du projet

Chaque application et chaque paquet possède son propre package.json. La racine contient un package.json de l'espace de travail avec les devDeps partagées.

my-monorepo/
  pnpm-workspace.yaml
  package.json         (root, private: true)
  apps/
    web/
      package.json
    docs/
      package.json
  packages/
    ui/
      package.json
    config-eslint/
      package.json

Installer les dépendances

Exécutez pnpm install une seule fois à la racine. pnpm installe tout dans l'ensemble des paquets en remontant les dépendances communes.

pnpm install

# Install only in one workspace:
pnpm --filter web add react-router-dom

# Install dev dep at root:
pnpm add -Dw typescript prettier

Protocole workspace:

Référencez les paquets internes avec workspace:*. pnpm résout cette référence vers le paquet local ; lors de la publication, il la remplace par une version réelle.

// apps/web/package.json
{
  "dependencies": {
    "@repo/ui": "workspace:*",
    "@repo/utils": "workspace:^1.0.0"
  }
}

// On publish, workspace:* becomes the actual version of @repo/ui.

Exécuter des scripts dans tous les paquets

pnpm -r exécute un script dans chaque paquet. Utilisez --filter pour sélectionner des sous-ensembles.

# Run build in every package:
pnpm -r build

# Only in web and its deps:
pnpm --filter web... build

# Run lint in changed packages since main:
pnpm --filter ...[origin/main] lint

Résolution stricte des dépendances

Par défaut, pnpm utilise des liens symboliques : un paquet ne voit que les dépendances qu'il a explicitement listées dans son package.json. Aucune fuite accidentelle entre paquets — un problème que npm et yarn classic permettent tous deux.

Motifs de remontée

Par défaut, pnpm ne remonte aucune dépendance. Si une dépendance transitive doit être accessible (par exemple, un TypeScript global), ajoutez à .npmrc : shamefully-hoist=true (à éviter si possible) ou utilisez un public-hoist-pattern spécifique.

Mettre à jour les dépendances

pnpm update met à jour les dépendances dans les plages semver. pnpm update -L passe à la dernière version (en ignorant le caret).

pnpm update                      # update all
pnpm --filter web update react   # only react, only web
pnpm update -L                   # latest (ignore caret)

Associer pnpm à Turborepo

pnpm fournit l'espace de travail et l'installation ; Turborepo fournit l'orchestration des tâches et la mise en cache. Ils forment une combinaison idéale — la plupart des monodépôts JS utilisent les deux.

# pnpm install dependencies
pnpm install

# Turborepo runs the tasks across the workspace:
pnpm turbo run build --filter=web...

Conseils pour la CI

Mettez en cache le magasin adressable par contenu de pnpm (~/.local/share/pnpm/store) pour accélérer la CI. Utilisez --frozen-lockfile pour échouer si pnpm-lock.yaml devait être modifié.

# .github/workflows/ci.yml
- uses: pnpm/action-setup@v3
  with: { version: 9 }
- uses: actions/setup-node@v4
  with: { node-version: '20', cache: 'pnpm' }
- run: pnpm install --frozen-lockfile
- run: pnpm -r build

Vérification rapide

Quel est le principal avantage de pnpm par rapport à npm/yarn en matière d'espace disque dans un monodépôt ?

Récapitulatif : espaces de travail pnpm

Un magasin unique adressable par contenu + des liens symboliques = installations rapides et environ 70 % d'espace disque en moins. pnpm-workspace.yaml répertorie les dossiers de paquets. Le protocole workspace:* sert aux dépendances internes. pnpm -r exécute les scripts dans tous les paquets ; --filter sélectionne des sous-ensembles. La résolution stricte empêche les fuites de dépendances. Associez pnpm à Turborepo pour l'orchestration des tâches. Utilisez --frozen-lockfile dans la CI.

Questions Fréquemment Posées

La leçon « Espaces de travail pnpm pour les monorepos » est-elle gratuite ?

Oui — le texte complet de « Espaces de travail pnpm pour les monorepos » 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 « Espaces de travail pnpm pour les monorepos » ?

Configurez un espace de travail pnpm avec un fichier racine pnpm-workspace.yaml, remontez les dépendances partagées et utilisez le protocole workspace: pour relier les paquets locaux. 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 3 sur 4.

Combien de temps prend la leçon « Espaces de travail pnpm pour les monorepos » ?

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

  1. Vite : système de plugins et mode SSR
  2. esbuild : rapidité et limites
  3. Espaces de travail pnpm pour les monorepos
  4. Turbo : mise en cache et pipelines de tâches
← Retour à Frontend Academy