مساحات عمل pnpm مع TypeScript

ما مساحات عمل pnpm؟

# pnpm-workspace.yaml
packages:
  - "packages/*"
  - "apps/*"

إنشاء بنية مساحة العمل

monorepo/
├── pnpm-workspace.yaml
├── package.json          # root
├── packages/
│   ├── core/             # shared logic
│   └── ui/               # shared components
└── apps/
    └── web/              # Next.js app

ملف tsconfig.json الجذري

{
  "compilerOptions": {
    "strict": true,
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler"
  },
  "references": [
    { "path": "packages/core" },
    { "path": "packages/ui" },
    { "path": "apps/web" }
  ]
}

tsconfig على مستوى الحزمة

// packages/core/tsconfig.json
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "composite": true,
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

تثبيت التبعيات بين الحزم

# Add @myapp/core to apps/web
pnpm add @myapp/core --workspace --filter apps/web

# package.json entry:
# "@myapp/core": "workspace:*"

حل مسارات TypeScript

{
  "compilerOptions": {
    "paths": {
      "@myapp/core": ["./packages/core/src/index.ts"],
      "@myapp/ui": ["./packages/ui/src/index.ts"]
    }
  }
}

بناء جميع الحزم

# Build all
tsc --build

# Or with pnpm recursive script:
pnpm -r build

تشغيل البرامج النصية عبر الحزم

# Run tests in all packages
pnpm -r test

# Run only in packages/core
pnpm --filter @myapp/core test

إعداد ESLint وPrettier مشترك

// packages/eslint-config/index.js
module.exports = { extends: ["airbnb-typescript"], ... };

التكامل مع Turborepo

npx create-turbo@latest
# or add to existing monorepo:
pnpm add turbo -w

مراجعة: مساحات عمل pnpm مع TypeScript

تحقق سريع

ما تعلمته