TypeScriptでのpnpm Workspaces
pnpmと共有tsconfigでmonorepoを設定します。
「TypeScriptでのpnpm Workspaces」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
pnpm ワークスペースとは
pnpm ワークスペースを使用すると、共有された node_modules 構造を持つ単一のリポジトリで複数のパッケージを管理できます。ディスク使用量を削減し、パッケージ間のインポートも可能になります。
# pnpm-workspace.yaml
packages:
- "packages/*"
- "apps/*"ワークスペース構造の作成
一般的な pnpm モノレポでは、共有ライブラリに packages/ を、デプロイ可能なアプリケーションに apps/ を使用します。
monorepo/
├── pnpm-workspace.yaml
├── package.json # root
├── packages/
│ ├── core/ # shared logic
│ └── ui/ # shared components
└── apps/
└── web/ # Next.js appルートの tsconfig.json
ルートの tsconfig で基本オプションを設定し、すべてのワークスペースパッケージを参照します。
{
"compilerOptions": {
"strict": true,
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "bundler"
},
"references": [
{ "path": "packages/core" },
{ "path": "packages/ui" },
{ "path": "apps/web" }
]
}パッケージ単位の tsconfig
各パッケージはルート設定を拡張し、それぞれの composite と outDir を設定します。
// packages/core/tsconfig.json
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"composite": true,
"outDir": "./dist",
"rootDir": "./src"
}
}パッケージ間の依存関係のインストール
ワークスペースプロトコルとともに pnpm add を使用して、モノレポ内のパッケージをリンクします。
# Add @myapp/core to apps/web
pnpm add @myapp/core --workspace --filter apps/web
# package.json entry:
# "@myapp/core": "workspace:*"TypeScript のパス解決
ルートの tsconfig に paths エイリアスを追加すると、開発中に TypeScript がワークスペースパッケージをソースへ解決できます。
{
"compilerOptions": {
"paths": {
"@myapp/core": ["./packages/core/src/index.ts"],
"@myapp/ui": ["./packages/ui/src/index.ts"]
}
}
}すべてのパッケージのビルド
ルートから tsc --build を使用して、すべてのコンポジットパッケージを依存関係の順序に従ってビルドします。
# Build all
tsc --build
# Or with pnpm recursive script:
pnpm -r buildパッケージ全体でのスクリプト実行
pnpm -r（再帰実行）または --filter を使用すると、一致するすべてのパッケージでスクリプトを実行できます。
# Run tests in all packages
pnpm -r test
# Run only in packages/core
pnpm --filter @myapp/core testESLint と Prettier の共有設定
リンティング設定を共有パッケージにまとめ、各パッケージでそれを拡張して、モノレポ全体でコードスタイルを統一します。
// packages/eslint-config/index.js
module.exports = { extends: ["airbnb-typescript"], ... };Turborepo との統合
Turborepo を追加してビルド、テスト、Lint のタスクをキャッシュおよび並列化し、依存関係の順序付けには pnpm のワークスペースグラフを使用します。
npx create-turbo@latest
# or add to existing monorepo:
pnpm add turbo -wまとめ: TypeScript での pnpm ワークスペース
pnpm ワークスペースと TypeScript のプロジェクト参照を組み合わせると、共有 node_modules、workspace:* によるパッケージ間インポート、tsc --build による高速なビルドを備えた強力なモノレポ構成を作成できます。
確認問題
pnpm ワークスペースのパッケージとなるディレクトリを定義するファイルはどれですか。
学んだこと
TypeScript のプロジェクト参照と pnpm ワークスペースを組み合わせると、共有 node_modules、ワークスペースプロトコルによるパッケージ間リンク、増分ビルドを備えた効率的なモノレポを構築できます。キャッシュと並列化には Turborepo を追加します。
よくある質問
「TypeScriptでのpnpm Workspaces」レッスンは無料ですか？
はい。「TypeScriptでのpnpm Workspaces」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「TypeScriptでのpnpm Workspaces」で何を学びますか？
pnpmと共有tsconfigでmonorepoを設定します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「TypeScriptでのpnpm Workspaces」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- TypeScriptプロジェクト参照の解説
- TypeScriptでのpnpm Workspaces
- 共有型パッケージの戦略
- MonorepoのIncremental BuildとCache