Frontend Academy · Ders

Monorepo'lar için pnpm Workspaces

Monorepo'lar için pnpm Workspaces, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

pnpm Neden?

pnpm (Performant npm), hızlı ve disk alanını verimli kullanan bir paket yöneticisidir. Her paketin tek bir kopyasını içerik adreslenebilir bir genel depoda saklar ve proje node_modules klasörlerinden bu depoya bağlantılar oluşturur. Aynı bağımlılık birden fazla projede kullanılsa bile diskte tek bir kopya bulunur.

Hız ve Disk Tasarrufu

Tipik bir monorepo'da pnpm kurulumları npm/yarn'dan 2-3 kat daha hızlıdır ve yaklaşık %70 daha az disk alanı kullanır. Çok sayıda pakete sahip monorepo'larda büyük kazanç sağlar.

pnpm'i Kurma

Corepack'i (Node 16+ ile birlikte gelir) kullanın veya pnpm'i genel olarak kurun.

# Corepack (recommended):
corepack enable
corepack prepare pnpm@latest --activate

# Or:
npm install -g pnpm

Çalışma Alanı Kurulumu

Kök dizinde, paketleri içeren klasörleri listeleyen bir pnpm-workspace.yaml oluşturun.

# pnpm-workspace.yaml
packages:
  - 'apps/*'
  - 'packages/*'
  - '!**/test/**'

Proje Yapısı

Her uygulamanın ve paketin kendi package.json dosyası vardır. Kök dizinde, ortak devDeps içeren bir çalışma alanı package.json dosyası bulunur.

my-monorepo/
  pnpm-workspace.yaml
  package.json         (root, private: true)
  apps/
    web/
      package.json
    docs/
      package.json
  packages/
    ui/
      package.json
    config-eslint/
      package.json

Bağımlılıkları Kurma

Kök dizinde bir kez pnpm install çalıştırın. pnpm, tüm paketlerdeki her şeyi kurar ve ortak bağımlılıkları üst düzeye taşır.

pnpm install

# Install only in one workspace:
pnpm --filter web add react-router-dom

# Install dev dep at root:
pnpm add -Dw typescript prettier

workspace: Protokolü

Dahili paketlere workspace:* ile başvurun. pnpm bunu yerel pakete çözümler; yayımlama sırasında gerçek bir sürümle değiştirir.

// apps/web/package.json
{
  "dependencies": {
    "@repo/ui": "workspace:*",
    "@repo/utils": "workspace:^1.0.0"
  }
}

// On publish, workspace:* becomes the actual version of @repo/ui.

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

pnpm -r, her pakette bir betik çalıştırır. Alt kümeler için --filter kullanın.

# Run build in every package:
pnpm -r build

# Only in web and its deps:
pnpm --filter web... build

# Run lint in changed packages since main:
pnpm --filter ...[origin/main] lint

Sıkı Bağımlılık Çözümleme

pnpm varsayılan olarak sembolik bağlantılar kullanır; bu nedenle bir paket yalnızca kendi package.json dosyasında açıkça listelediği bağımlılıkları görebilir. Yanlışlıkla paketler arası sızıntı oluşmaz — npm ve klasik yarn'ın izin verdiği bir hata türü.

Üst Düzeye Taşıma Kalıpları

pnpm varsayılan olarak hiçbir şeyi üst düzeye taşımaz. Geçişli bir bağımlılığın erişilebilir olması gerekiyorsa (örneğin genel bir TypeScript), .npmrc dosyasına shamefully-hoist=true (mümkünse kaçının) ekleyin veya belirli bir public-hoist-pattern kullanın.

Bağımlılıkları Güncelleme

pnpm update, semver aralıkları içindeki sürümleri günceller. pnpm update -L, şapka kısıtlamasını yok sayarak en son sürüme yükseltir.

pnpm update                      # update all
pnpm --filter web update react   # only react, only web
pnpm update -L                   # latest (ignore caret)

Turborepo ile Birleştirme

pnpm, çalışma alanı ve kurulum özelliklerini sağlar; Turborepo ise görev düzenleme ve önbellekleme özelliklerini sağlar. Birbirlerini mükemmel şekilde tamamlarlar — çoğu JS monorepo'su ikisini de kullanır.

# pnpm install dependencies
pnpm install

# Turborepo runs the tasks across the workspace:
pnpm turbo run build --filter=web...

CI İpuçları

Daha hızlı CI için pnpm'in içerik adreslenebilir deposunu (~/.local/share/pnpm/store) önbelleğe alın. pnpm-lock.yaml dosyasının değişmesi durumunda işlemin başarısız olması için --frozen-lockfile kullanın.

# .github/workflows/ci.yml
- uses: pnpm/action-setup@v3
  with: { version: 9 }
- uses: actions/setup-node@v4
  with: { node-version: '20', cache: 'pnpm' }
- run: pnpm install --frozen-lockfile
- run: pnpm -r build

Hızlı Kontrol

Bir monorepo'da pnpm'in npm/yarn'a göre temel disk alanı avantajı nedir?

Özet: pnpm Çalışma Alanları

Tek bir içerik adreslenebilir depo ve sembolik bağlantılar, hızlı kurulumlar ve yaklaşık %70 daha az disk kullanımı sağlar. pnpm-workspace.yaml paketleri içeren klasörleri listeler. Dahili bağımlılıklar için workspace:* protokolünü kullanın. pnpm -r tüm paketlerdeki betikleri çalıştırır; --filter alt kümeler içindir. Sıkı çözümleme, bağımlılık sızıntılarını önler. Görev düzenleme için Turborepo ile birlikte kullanın. CI'da --frozen-lockfile kullanın.

Sıkça Sorulan Sorular

“Monorepo'lar için pnpm Workspaces” dersi ücretsiz mi?

Evet — “Monorepo'lar için pnpm Workspaces” 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Monorepo'lar için pnpm Workspaces” dersinde ne öğreneceğim?

Kök dizinde pnpm-workspace.yaml bulunan bir pnpm çalışma alanı kurmayı, paylaşılan bağımlılıkları üst dizine taşımayı ve yerel paketleri bağlamak için workspace: protokolünü kullanmayı öğrenin. Frontend 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.

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

Önceden deneyim gerekmez. CoddyKit'te Frontend 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 3. dersidir.

“Monorepo'lar için pnpm Workspaces” 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend 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

Vite: Eklenti Sistemi ve SSR Modu
esbuild: Hız ve Sınırlamalar
Monorepo'lar için pnpm Workspaces
Turbo: Önbelleğe Alma ve Görev İşlem Hatları

← Frontend Academy Sayfasına Dön