TypeScript와 함께 사용하는 pnpm 작업 공간

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

복습: TypeScript를 사용하는 pnpm 워크스페이스

빠른 확인

학습 내용