เวิร์กสเปซ 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

ตรวจสอบอย่างรวดเร็ว

สิ่งที่ได้เรียนรู้