Espaces de travail pnpm avec TypeScript
Configurez un monorepo avec pnpm et un tsconfig partagé
Espaces de travail pnpm avec TypeScript est une leçon TypeScript 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 TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 4 leçons au total.
Que sont les espaces de travail pnpm ?
Les espaces de travail pnpm vous permettent de gérer plusieurs paquets dans un même dépôt avec une structure node_modules partagée, ce qui réduit l’espace disque utilisé et permet les importations entre paquets.
# pnpm-workspace.yaml
packages:
- "packages/*"
- "apps/*"Créer la structure de l’espace de travail
Un monodépôt pnpm classique comporte packages/ pour les bibliothèques partagées et apps/ pour les applications déployables.
monorepo/
├── pnpm-workspace.yaml
├── package.json # root
├── packages/
│ ├── core/ # shared logic
│ └── ui/ # shared components
└── apps/
└── web/ # Next.js apptsconfig.json racine
Le tsconfig racine définit les options de base et référence tous les paquets de l’espace de travail.
{
"compilerOptions": {
"strict": true,
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "bundler"
},
"references": [
{ "path": "packages/core" },
{ "path": "packages/ui" },
{ "path": "apps/web" }
]
}tsconfig au niveau du paquet
Chaque paquet étend la configuration racine et définit ses propres options composite et outDir.
// packages/core/tsconfig.json
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"composite": true,
"outDir": "./dist",
"rootDir": "./src"
}
}Installer les dépendances entre paquets
Utilisez pnpm add avec le protocole d’espace de travail pour relier les paquets au sein du monodépôt.
# Add @myapp/core to apps/web
pnpm add @myapp/core --workspace --filter apps/web
# package.json entry:
# "@myapp/core": "workspace:*"Résolution des chemins TypeScript
Ajoutez des alias paths dans le tsconfig racine afin que TypeScript résolve les paquets de l’espace de travail vers leur code source pendant le développement.
{
"compilerOptions": {
"paths": {
"@myapp/core": ["./packages/core/src/index.ts"],
"@myapp/ui": ["./packages/ui/src/index.ts"]
}
}
}Compiler tous les paquets
Utilisez tsc --build depuis la racine pour compiler tous les paquets composites dans l’ordre de leurs dépendances.
# Build all
tsc --build
# Or with pnpm recursive script:
pnpm -r buildExécuter des scripts dans plusieurs paquets
pnpm -r (récursif) ou --filter exécute des scripts dans tous les paquets correspondants.
# Run tests in all packages
pnpm -r test
# Run only in packages/core
pnpm --filter @myapp/core testConfiguration partagée d’ESLint et Prettier
Conservez les configurations de vérification du code dans un paquet partagé et étendez-les dans chaque paquet afin de garantir un style de code cohérent dans tout le monodépôt.
// packages/eslint-config/index.js
module.exports = { extends: ["airbnb-typescript"], ... };Intégration de Turborepo
Ajoutez Turborepo pour mettre en cache et paralléliser les tâches de compilation, de test et de vérification du code, en utilisant le graphe de l’espace de travail pnpm pour ordonner les dépendances.
npx create-turbo@latest
# or add to existing monorepo:
pnpm add turbo -wRécapitulatif : espaces de travail pnpm avec TypeScript
Les espaces de travail pnpm et les références de projet TypeScript créent une architecture de monodépôt puissante : node_modules partagé, importations entre paquets via workspace:* et compilations rapides avec tsc --build.
Vérification rapide
Quel fichier définit les répertoires qui sont des paquets de l’espace de travail pnpm ?
Ce que vous avez appris
Les espaces de travail pnpm associés aux références de projet TypeScript vous offrent un monodépôt efficace avec un node_modules partagé, des liens entre paquets via le protocole d’espace de travail et des compilations incrémentielles. Ajoutez Turborepo pour la mise en cache et la parallélisation.
Questions Fréquemment Posées
La leçon « Espaces de travail pnpm avec TypeScript » est-elle gratuite ?
Oui — le texte complet de « Espaces de travail pnpm avec TypeScript » 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 TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Espaces de travail pnpm avec TypeScript » ?
Configurez un monorepo avec pnpm et un tsconfig partagé Tu pratiques TypeScript 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 TypeScript Academy ?
Aucune expérience préalable n'est requise. TypeScript 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 « Espaces de travail pnpm avec TypeScript » ?
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 TypeScript Academy ?
Oui. Chaque leçon TypeScript 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
- Les références de projets TypeScript expliquées
- Espaces de travail pnpm avec TypeScript
- Stratégie de bibliothèque de types partagés
- Compilations incrémentielles et cache dans les monorepos