Membangun Perpustakaan TypeScript di Monorepo dengan PNPM dan Turborepo

📌 Pendahuluan

Membangun pustaka TypeScript dalam monorepo menawarkan beberapa keuntungan, termasuk pembagian kode yang lebih baik, manajemen ketergantungan yang efisien, dan pemeliharaan yang lebih mudah. Panduan ini akan memandu Anda dalam menyiapkan struktur monorepo untuk perpustakaan TypeScript menggunakan alat modern seperti pnpm, Turborepo, dan TypeScript.

🛠️ Menyiapkan Monorepo

1️⃣ Menginisialisasi Monorepo

Kita akan menggunakan pnpm sebagai manajer paket kita karena secara native mendukung ruang kerja dan menyediakan kinerja yang lebih baik dibandingkan dengan npm dan yarn.

mkdir ts-monorepo && cd ts-monorepo
pnpm init

Aktifkan ruang kerja di pnpm dengan menambahkan yang berikut ini ke package.json:

1
{
2
  “private": true,
3
  “workspaces": [“packages/*”]
4
}

2️⃣ Instal Turborepo untuk Orkestrasi Tugas

Turborepo membantu mengelola proses build dan ketergantungan secara efisien.

pnpm add -D turbo

Buat berkas konfigurasi turbo.json:

1
{
2
  “$schema": “https://turborepo.org/schema.json”,
3
  “pipeline": {
4
    “build": {
5
      “dependsOn": [“^build”],
6
      “outputs": [“dist/**”]
7
    },
8
    “lint": {},
9
    “test": {}
10
  }
11
}

🏗️ Membuat Perpustakaan TypeScript

1️⃣ Mengatur Paket

Membuat paket baru untuk pustaka:

mkdir -p packages/my-library && cd packages/my-library
pnpm init

Instal TypeScript dan ketergantungan yang diperlukan:

pnpm add -D typescript tsup eslint @types/node

Buat berkas tsconfig.json:

1
{
2
  “compilerOptions": {
3
    “outDir": “dist”,
4
    “module": ‘ESNext’,
5
    “target": “ES6”,
6
    “declaration": true,
7
    “strict": true,
8
    “esModuleInterop": true
9
  },
10
  “include": [“src”]
11
}

2️⃣ Menerapkan Kode Perpustakaan

Di dalam packages/my-library, buat sebuah folder src dan sebuah berkas index.ts:

mkdir src && sentuh src/index.ts

Tuliskan sebuah fungsi sederhana di dalam src/index.ts:

1
export function menyapa(nama: string): string {
2
  return `Halo, ${nama}!`;
3
}

3️⃣ Membangun Perpustakaan

Tambahkan skrip build ke package.json:

1
{
2
  “skrip": {
3
    “build": “tsup src/index.ts --format esm,cjs --dts”
4
  }
5
}

Jalankan perintah build:

pnpm build

🔗 4️⃣ Menautkan Pustaka di Paket Lain

Jika Anda ingin menggunakan pustaka di paket lain di dalam monorepo, buat paket lain (misal, app) dan tambahkan my-library sebagai ketergantungan:

pnpm add my-library --filter app

Sekarang, Anda dapat mengimpor dan menggunakan pustaka di dalam paket app.

1
import { greet } from “my-library”;
2
console.log(greet(“World”));

✅ Kesimpulan

Menyiapkan pustaka TypeScript dalam struktur monorepo menyediakan cara yang terukur untuk mengelola ketergantungan, menggunakan ulang kode, dan merampingkan pengembangan. Dengan memanfaatkan pnpm, Turborepo, dan TypeScript, Anda dapat membangun dan memelihara pustaka berkinerja tinggi secara efisien.