TypeScript Academy · Ders

TypeScript ile pnpm Çalışma Alanları

pnpm ve paylaşılan tsconfig ile bir monorepo yapılandırın

TypeScript ile pnpm Çalışma Alanları, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, TypeScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. TypeScript Academy kursu toplamda 4 dersten oluşur.

pnpm Çalışma Alanları Nedir?

pnpm çalışma alanları, birden çok paketi tek bir depoda paylaşılan node_modules yapısıyla yönetmenizi sağlar; böylece disk kullanımı azalır ve paketler arası içe aktarmalar etkinleşir.

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

Çalışma Alanı Yapısını Oluşturma

Tipik bir pnpm monorepo'sunda paylaşılan kitaplıklar için packages/, dağıtılabilir uygulamalar içinse apps/ bulunur.

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

Kök tsconfig.json

Kök tsconfig, temel seçenekleri ayarlar ve tüm çalışma alanı paketlerine başvurur.

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

Paket Düzeyinde tsconfig

Her paket kök yapılandırmayı genişletir ve kendi composite ile outDir seçeneklerini ayarlar.

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

Paketler Arası Bağımlılıkları Yükleme

Monorepo içindeki paketleri birbirine bağlamak için çalışma alanı protokolüyle birlikte pnpm add kullanın.

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

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

TypeScript Yol Çözümlemesi

Geliştirme sırasında TypeScript'in çalışma alanı paketlerini kaynaklarına çözümlemesi için kök tsconfig dosyasına paths takma adları ekleyin.

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

Tüm Paketleri Derleme

Tüm birleşik paketleri bağımlılık sırasına göre derlemek için kök dizinden tsc --build kullanın.

# Build all
tsc --build

# Or with pnpm recursive script:
pnpm -r build

Paketler Arasında Betikleri Çalıştırma

pnpm -r (özyinelemeli) veya --filter, eşleşen tüm paketlerde betikleri çalıştırır.

# Run tests in all packages
pnpm -r test

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

Paylaşılan ESLint ve Prettier Yapılandırması

Kod denetimi yapılandırmalarını paylaşılan bir pakette tutun ve monorepo genelinde tutarlı kod biçemini sağlamak için her pakette bu yapılandırmayı genişletin.

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

Turborepo Tümleştirmesi

Çalışma alanı grafiğini kullanarak bağımlılık sırasını belirleyen, derleme/sınama/kod denetimi görevlerini önbelleğe almak ve paralel yürütmek için Turborepo'yu ekleyin.

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

Özet: TypeScript ile pnpm Çalışma Alanları

pnpm çalışma alanları ve TypeScript proje başvuruları güçlü bir monorepo kurulumu oluşturur: paylaşılan node_modules, workspace:* aracılığıyla paketler arası içe aktarmalar ve tsc --build ile hızlı derlemeler.

Kısa Denetim

Hangi dosya, hangi dizinlerin pnpm çalışma alanı paketleri olduğunu tanımlar?

Öğrendikleriniz

TypeScript proje başvurularıyla pnpm çalışma alanları; paylaşılan node_modules, çalışma alanı protokolüyle paketler arası bağlantı ve artımlı derlemeler sunan verimli bir monorepo sağlar. Önbelleğe alma ve paralel yürütme için Turborepo'yu ekleyin.

Sıkça Sorulan Sorular

“TypeScript ile pnpm Çalışma Alanları” dersi ücretsiz mi?

Evet — “TypeScript ile pnpm Çalışma Alanları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve TypeScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. TypeScript Academy kursu toplamda 4 dersten oluşur.

“TypeScript ile pnpm Çalışma Alanları” dersinde ne öğreneceğim?

pnpm ve paylaşılan tsconfig ile bir monorepo yapılandırın TypeScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

TypeScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te TypeScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“TypeScript ile pnpm Çalışma Alanları” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu TypeScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her TypeScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

TypeScript Proje Başvurularını Açıklama
TypeScript ile pnpm Çalışma Alanları
Paylaşılan Türler Paketi Stratejisi
Monorepo'larda Artımlı Derlemeler ve Önbellek

← TypeScript Academy Sayfasına Dön