Turborepo ile Monorepo Yönetimi

Büyük projelerde kodu parçalara ayırmak ve yönetmek zor olabilir. Turborepo, Vercel tarafından geliştirilen bir araç olarak, monorepo yapısını kolaylaştırmak için harika özellikler sunar.

Neden Turborepo?

Tek bir depoda çoklu proje yönetimi
Cache ve paralel işlemler ile hızlı build süreci
Kod paylaşımı ve tutarlılık

Kurulum

Turborepo'yu hızlıca başlatmak için:

Bash

npx create-turbo@latest

Elle kurulum için:

Bash

mkdir my-turbo-app && cd my-turbo-app
pnpm init -y
pnpm add -D turbo

Ve ardından turbo.json dosyasını oluşturun:

JSON

{
	"$schema": "https://turborepo.org/schema.json",
	"pipeline": {
		"build": {
			"dependsOn": ["^build"],
			"outputs": ["dist/**"]
		},
		"lint": {},
		"dev": {
			"cache": false
		}
	}
}

Proje Yapısı

Bash

my-turbo-app/
├── apps/
│   ├── web/         # Next.js uygulaması
│   └── docs/        # Belgelendirme sitesi (örn. Docusaurus)
├── packages/
│   ├── ui/          # Ortak UI bileşenleri
│   └── config/      # Ortak yapılandırmalar

Ortak UI Kullanımı

packages/ui/Button.tsx:

TSX

export const Button = () => {
	return (
		<button className="rounded bg-blue-500 px-4 py-2 text-white">Tıkla</button>
	);
};

apps/web/page.tsx:

TSX

import { Button } from "@myorg/ui";
 
export default function Home() {
	return (
		<main>
			<h1>Merhaba Turborepo</h1>
			<Button />
		</main>
	);
}

Not: package.json içinde "name": "@myorg/ui" gibi alanlar tanımlanmalı ve tsconfig.json içinde path alias ayarları yapılmalıdır.

Turbo Komutları

Örnek komutlar:

Bash

pnpm turbo run build
pnpm turbo run lint

İpucu: Turbo cache sistemini kullanır, değişmeyen paketler tekrar build edilmez.

Avantajları

1. Hızlı Build Süreçleri

Turborepo'nun cache sistemi sayesinde:

Değişmeyen dosyalar tekrar işlenmez
Paralel işlemler performansı artırır
İncremental builds mümkün hale gelir

2. Kod Paylaşımı

typescript

// packages/shared/types.ts
export interface User {
	id: string;
	name: string;
	email: string;
}
 
// apps/web/components/UserCard.tsx
import { User } from "@myorg/shared/types";
 
export const UserCard = ({ user }: { user: User }) => {
	return (
		<div className="p-4 border rounded">
			<h3>{user.name}</h3>
			<p>{user.email}</p>
		</div>
	);
};

3. Consistent Development Environment

JSON

{
	"scripts": {
		"build": "turbo run build",
		"dev": "turbo run dev --parallel",
		"lint": "turbo run lint",
		"test": "turbo run test"
	}
}

Best Practices

1. Package Organizing

Bash

packages/
├── ui/              # Reusable UI components
├── config/          # Shared configurations
├── utils/           # Utility functions
├── types/           # TypeScript type definitions
└── eslint-config/   # ESLint configurations

2. Dependency Management

JSON

{
	"devDependencies": {
		"turbo": "latest",
		"@turbo/gen": "latest"
	},
	"packageManager": "pnpm@8.0.0"
}

3. Pipeline Optimization

JSON

{
	"pipeline": {
		"build": {
			"dependsOn": ["^build"],
			"outputs": [".next/**", "dist/**"]
		},
		"lint": {
			"dependsOn": ["^lint"]
		},
		"test": {
			"dependsOn": ["^build"],
			"inputs": ["src/**/*.tsx", "src/**/*.ts", "test/**/*.ts"]
		}
	}
}

YouTube

Turborepo: Frontend ve Backend'i aynı anda yönetmenin en temiz yolu

Videoyu izle →

Sonuç

Turborepo, özellikle büyük projelerde kod organizasyonu, tekrar kullanılabilirlik ve hızlı geliştirme süreçleri açısından güçlü bir çözümdür.

Faydaları:

Daha hızlı build süreçleri
Kod tekrarının azalması
Consistent development environment
Team collaboration'ın iyileşmesi

Projelerinizi bir adım öteye taşımak için monorepo yapısını değerlendirin ve Turborepo ile tanışın!

Neden Turborepo?

Tek bir depoda çoklu proje yönetimi
Cache ve paralel işlemler ile hızlı build süreci
Kod paylaşımı ve tutarlılık

Kurulum

Turborepo'yu hızlıca başlatmak için:

Bash

npx create-turbo@latest

Elle kurulum için:

Bash

mkdir my-turbo-app && cd my-turbo-app
pnpm init -y
pnpm add -D turbo

Ve ardından turbo.json dosyasını oluşturun:

JSON

{
	"$schema": "https://turborepo.org/schema.json",
	"pipeline": {
		"build": {
			"dependsOn": ["^build"],
			"outputs": ["dist/**"]
		},
		"lint": {},
		"dev": {
			"cache": false
		}
	}
}

Proje Yapısı

Bash

my-turbo-app/
├── apps/
│   ├── web/         # Next.js uygulaması
│   └── docs/        # Belgelendirme sitesi (örn. Docusaurus)
├── packages/
│   ├── ui/          # Ortak UI bileşenleri
│   └── config/      # Ortak yapılandırmalar

Ortak UI Kullanımı

packages/ui/Button.tsx:

TSX

export const Button = () => {
	return (
		<button className="rounded bg-blue-500 px-4 py-2 text-white">Tıkla</button>
	);
};

apps/web/page.tsx:

TSX

import { Button } from "@myorg/ui";
 
export default function Home() {
	return (
		<main>
			<h1>Merhaba Turborepo</h1>
			<Button />
		</main>
	);
}

Not: package.json içinde "name": "@myorg/ui" gibi alanlar tanımlanmalı ve tsconfig.json içinde path alias ayarları yapılmalıdır.

Turbo Komutları

Örnek komutlar:

Bash

pnpm turbo run build
pnpm turbo run lint

İpucu: Turbo cache sistemini kullanır, değişmeyen paketler tekrar build edilmez.

Avantajları

1. Hızlı Build Süreçleri

Turborepo'nun cache sistemi sayesinde:

Değişmeyen dosyalar tekrar işlenmez
Paralel işlemler performansı artırır
İncremental builds mümkün hale gelir

2. Kod Paylaşımı

typescript

// packages/shared/types.ts
export interface User {
	id: string;
	name: string;
	email: string;
}
 
// apps/web/components/UserCard.tsx
import { User } from "@myorg/shared/types";
 
export const UserCard = ({ user }: { user: User }) => {
	return (
		<div className="p-4 border rounded">
			<h3>{user.name}</h3>
			<p>{user.email}</p>
		</div>
	);
};

3. Consistent Development Environment

JSON

{
	"scripts": {
		"build": "turbo run build",
		"dev": "turbo run dev --parallel",
		"lint": "turbo run lint",
		"test": "turbo run test"
	}
}

Best Practices

1. Package Organizing

Bash

packages/
├── ui/              # Reusable UI components
├── config/          # Shared configurations
├── utils/           # Utility functions
├── types/           # TypeScript type definitions
└── eslint-config/   # ESLint configurations

2. Dependency Management

JSON

{
	"devDependencies": {
		"turbo": "latest",
		"@turbo/gen": "latest"
	},
	"packageManager": "pnpm@8.0.0"
}

3. Pipeline Optimization

JSON

{
	"pipeline": {
		"build": {
			"dependsOn": ["^build"],
			"outputs": [".next/**", "dist/**"]
		},
		"lint": {
			"dependsOn": ["^lint"]
		},
		"test": {
			"dependsOn": ["^build"],
			"inputs": ["src/**/*.tsx", "src/**/*.ts", "test/**/*.ts"]
		}
	}
}

YouTube

Turborepo: Frontend ve Backend'i aynı anda yönetmenin en temiz yolu

Videoyu izle →

Sonuç

Turborepo, özellikle büyük projelerde kod organizasyonu, tekrar kullanılabilirlik ve hızlı geliştirme süreçleri açısından güçlü bir çözümdür.

Faydaları:

Daha hızlı build süreçleri
Kod tekrarının azalması
Consistent development environment
Team collaboration'ın iyileşmesi

Projelerinizi bir adım öteye taşımak için monorepo yapısını değerlendirin ve Turborepo ile tanışın!

Turborepo ile Monorepo Yönetimi

Neden Turborepo?

Kurulum

Proje Yapısı

Ortak UI Kullanımı

Turbo Komutları

Avantajları

1. Hızlı Build Süreçleri

2. Kod Paylaşımı

3. Consistent Development Environment

Best Practices

1. Package Organizing

2. Dependency Management

3. Pipeline Optimization

Sonuç

Yorumlar

Benzer yazılar

JavaScript Öğrenmek İçin En İyi Siteler ve Net Yol Haritası

Typescript ile Tip Güvenli Geliştirme

Web Geliştirici Rehberi

Turborepo ile Monorepo Yönetimi

Neden Turborepo?

Kurulum

Proje Yapısı

Ortak UI Kullanımı

Turbo Komutları

Avantajları

1. Hızlı Build Süreçleri

2. Kod Paylaşımı

3. Consistent Development Environment

Best Practices

1. Package Organizing

2. Dependency Management

3. Pipeline Optimization

Sonuç

Yorumlar

Benzer yazılar

JavaScript Öğrenmek İçin En İyi Siteler ve Net Yol Haritası

Typescript ile Tip Güvenli Geliştirme

Web Geliştirici Rehberi