Frontend Academy · Ders

Turborepo ile Monorepo Kurulumu

2. ders / 414 adım

Turborepo ile Monorepo Kurulumu, CoddyKit'te ücretsiz bir Frontend 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, 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.

Mono Depo Nedir?

Birden fazla projenin (uygulamalar, kitaplıklar) kod paylaştığı tek bir Git deposudur. Örnek: web uygulaması + mobil uygulama + ortak kullanıcı arayüzü kitaplığı + ortak yardımcı işlevler tek depoda. Kod paylaşımı, farklı alanları etkileyen değişikliklerin atomik biçimde yapılması ve tek bir sürekli entegrasyon işlem hattı kolaylaşır.

Neden Turborepo?

Turborepo, JavaScript mono depoları için yüksek performanslı bir derleme sistemidir. Görev çıktılarını önbelleğe alır, paketler arasında paralel çalışır ve yalnızca değişenleri yeniden oluşturur. Vercel tarafından geliştirilmiştir.

Turborepo Kurulumu

Resmî başlangıç şablonunu kullanın.

npx create-turbo@latest my-monorepo
cd my-monorepo

# Structure:
# apps/
#   web/        (Next.js app)
#   docs/       (another Next.js app)
# packages/
#   ui/         (shared component library)
#   eslint-config/
#   tsconfig/

Çalışma Alanlarıyla package.json

Kök package.json, çalışma alanlarını bildirir; npm/yarn/pnpm bunları sembolik bağlantılarla birbirine bağlar, böylece uygulamalar paketleri adlarıyla içe aktarabilir.

{
  "name": "my-monorepo",
  "private": true,
  "workspaces": ["apps/*", "packages/*"],
  "devDependencies": {
    "turbo": "latest"
  }
}

turbo.json — İşlem Hattı

Görevleri (derleme, kod denetimi, sınama, geliştirme) ve paketler arasındaki bağımlılıklarını tanımlayın.

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "dist/**"]
    },
    "lint": {},
    "test": { "dependsOn": ["^build"] },
    "dev": { "cache": false, "persistent": true }
  }
}

dependsOn Açıklaması

^build şu anlama gelir: bu paketi derlemeden önce, çalışma alanındaki tüm bağımlılıklarını derleyin. Örneğin app/web, packages/ui'ya bağlıysa önce ui derlenir.

Görevleri Çalıştırma

Bir görevi mono deponun tamamında çalıştırın. Turbo, görevleri topolojik sırayla ve paralel olarak yürütür.

# Build everything:
npx turbo run build

# Build only one app and its deps:
npx turbo run build --filter=web

# Run dev mode (persistent, no cache):
npx turbo run dev

# Lint and test in parallel:
npx turbo run lint test

Çıktıları Önbelleğe Alma

Turbo, girdilerin (kaynak dosyaları + bağımlılıklar + ortam) özetlerini çıkarır ve çıktıları önbelleğe alır. Değişiklik olmadan yeniden çalıştırmak anlıktır; Turbo görevi yeniden yürütmek yerine önbelleğe alınmış çıktıyı yeniden oynatır.

Uzak Önbelleğe Alma

Önbelleği bir uzak sunucuya (Vercel Remote Cache veya kendi barındırdığınız bir sunucu) göndererek sürekli entegrasyon makinelerinin ve ekip arkadaşlarının paylaşmasını sağlayın; ilk derlemeyi yapan geliştirici maliyeti üstlenir, diğer herkes önbellekten yararlanır.

npx turbo login
npx turbo link

# In CI:
env:
  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
  TURBO_TEAM: yourteam

--filter ile Filtreleme

Bir görevi yalnızca eşleşen paketler için çalıştırın.

# Run lint only in packages that changed since main:
npx turbo run lint --filter='[main]'

# Run build for web and everything it depends on:
npx turbo run build --filter=web...

# Run dev for the docs app only:
npx turbo run dev --filter=docs

Dahili Paketler

packages/ içindeki paketler birbirlerini adlarıyla içe aktarır. Bunlara bağımlılıklar bölümünde "@repo/ui": "*" olarak başvurun (pnpm ile: workspace:*).

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

// apps/web/app/page.tsx
import { Button } from '@repo/ui';
import { formatDate } from '@repo/utils';

Sürekli Entegrasyon İpuçları

Sürekli entegrasyonda ana daldan bu yana yalnızca değişenleri derlemek için turbo run build --filter=...[origin/main] kullanın. Uzak önbellekle birlikte kullanıldığında, değişmeyen paketlerde derlemeler dakikalardan saniyelere iner.

Hızlı Kontrol

Bir Turbo görevinin dependsOn dizisindeki ^build girdisi ne anlama gelir?

İnteraktif derste cevapla

Özet: Turborepo

JavaScript mono depo sistemi: çalışma alanlarıyla apps/ + packages/ yapısı. turbo.json görevleri ve dependsOn ilişkilerini tanımlar. ^build = önce bağımlılıkları derle. Özete dayalı yerel önbellek, tekrarlanan çalışmaları anlık hâle getirir. Uzak önbellek, önbellek sonuçlarını ekip ve sürekli entegrasyon arasında paylaşır. --filter alt kümeleri hedefler. Hızlı sürekli entegrasyon için değişiklikten beri yaklaşımını kullanın.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 41
Dersler: 163

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Turborepo ile Monorepo Kurulumu” dersi ücretsiz mi?

Evet — “Turborepo ile Monorepo Kurulumu” 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.

“Turborepo ile Monorepo Kurulumu” dersinde ne öğreneceğim?

Birden fazla uygulamayı ve paylaşılan paketleri tek bir depoda düzenlemeyi, bir Turbo işlem hattı tanımlamayı ve yalnızca değişen bölümleri yeniden oluşturmak için derlemeleri önbelleğe almayı öğreni… 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 2. dersidir.

“Turborepo ile Monorepo Kurulumu” 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

Atomik Tasarım: Atomlar, Moleküller ve Organizmalar
Turborepo ile Monorepo Kurulumu
Mikro Ön Uçlar: Module Federation
Özellik Tabanlı Klasör Yapısı

← Frontend Academy Sayfasına Dön