Monorepo Kurulumunda TypeScript Nasıl Kullanılır

Monorepo kurulumu, tek bir depoda birden fazla paketi veya projeyi yönetmenizi sağlar. TypeScript ile bu kurulum, özellikle türleri, arayüzleri ve hatta yardımcı programları farklı paketler arasında paylaşmak için güçlüdür. Bu kılavuz, TypeScript'i monorepo ortamında nasıl kuracağınızı gösterecektir.

1. Monorepo'nun Kurulumu

Bir monorepo kurmak için npm workspaces veya yarn workspaces gibi araçları kullanabilirsiniz. Bu araçlar aynı depoda birden fazla paketi yönetmenize ve projeler arasında kod paylaşımını kolaylaştırmanıza olanak tanır.

1.1 Bir Monorepo'yu Başlatma

Öncelikle monoreponuz için yeni bir klasör oluşturun ve npm veya yarn ile başlatın.

mkdir my-monorepo
cd my-monorepo
npm init -y

Daha sonra package.json: dosyanızda çalışma alanlarını yapılandırın:

{
  "name": "my-monorepo",
  "version": "1.0.0",
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

Bu kurulum npm veya yarn'a tüm paketlerin packages klasöründe bulunacağını söyler.

2. Monorepo'ya Paket Ekleme

Monorepo'nuzda iki paket oluşturun. Bu örnek için, yeniden kullanılabilir kod için bir shared paketi ve bir ön uç uygulaması için bir web-app paketi oluşturacağız.

mkdir -p packages/shared
mkdir -p packages/web-app

Her paketin içinde package.json: başlatın

cd packages/shared
npm init -y

cd ../web-app
npm init -y

3. Monorepo'ya TypeScript Ekleme

Sonra TypeScript'i kuracağız. TypeScript'i ve gerekli bağımlılıkları monoreponuzun köküne yükleyin:

npm install typescript --save-dev

Tüm monorepo için TypeScript yapılandırmasını tanımlamak üzere kök düzeyinde bir tsconfig.json oluşturun:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["packages/*/src"]
    },
    "composite": true,
    "declaration": true,
    "outDir": "dist",
    "rootDir": ".",
    "skipLibCheck": true,
    "module": "ESNext",
    "target": "ES6",
    "moduleResolution": "node"
  },
  "include": ["packages/*"]
}

Buradaki anahtar nokta, TypeScript'in monorepodaki farklı paketlerden gelen içe aktarımları anlamasını sağlayan paths seçeneğidir.

4. Her Pakette TypeScript'i Yapılandırma

Her paketin monorepoda düzgün çalışması için kendi tsconfig.json'sına ihtiyacı vardır. İşte shared paketi için bir örnek yapılandırma:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "dist"
  },
  "include": ["src"]
}

Ve web-app paketi için:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "dist"
  },
  "include": ["src"]
}

Artık her pakette TypeScript kullanılabiliyor ve yapılandırmalar kök tsconfig.json'dan paylaşılıyor.

5. Paketlere TypeScript Kodu Ekleme

Her iki pakete de örnek TypeScript kodu ekleyelim. shared paketinde, bir src klasörü oluşturup bir TypeScript dosyası ekleyelim:

mkdir -p packages/shared/src
touch packages/shared/src/index.ts

index.ts dizinine basit bir fonksiyon aktarın:

export const greet = (name: string): string => {
  return `Hello, ${name}!`;
}

web-app paketinde, src klasörü ve index.ts dosyası oluşturun:

mkdir -p packages/web-app/src
touch packages/web-app/src/index.ts

Şimdi paylaşılan fonksiyonu içe aktaralım:

import { greet } from 'shared';

console.log(greet('TypeScript Monorepo'));

6. Monorepo'nun İnşası

Monorepo'daki tüm TypeScript kodunu derlemek için TypeScript derleyicisini kullanmamız gerekir. Monorepo'nun kökünde şunu çalıştırın:

npx tsc --build

Bu komut, ilgili tsconfig.json dosyalarını takip ederek tüm paketleri derleyecektir.

Çözüm

Bu kılavuzda, TypeScript'i bir monorepo'da nasıl kuracağınızı ve kullanacağınızı ele aldık. Kodunuzu bir monorepo yapısında düzenleyerek, kodu birden fazla paket arasında kolayca paylaşabilir ve geliştirme sürecinizi daha verimli hale getirebilirsiniz. TypeScript'in güçlü yazım ve proje referanslarıyla, bu kurulum büyük ölçekli uygulamalar veya paylaşılan kütüphaneler için mükemmeldir.