Frontend Academy · Pelajaran

Penyiapan Monorepo dengan Turborepo

Atur beberapa aplikasi dan paket bersama dalam satu repo, definisikan pipeline Turbo, dan simpan hasil build dalam tembolok agar hanya perubahan yang dibangun ulang.

Penyiapan Monorepo dengan Turborepo adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa Itu Monorepo?

Satu repositori Git yang menampung beberapa proyek (aplikasi, pustaka) yang berbagi kode. Contohnya: aplikasi web + aplikasi seluler + pustaka UI bersama + utilitas bersama dalam satu repositori. Berbagi kode lebih mudah, perubahan lintas bagian dapat dilakukan secara atomik, dan hanya ada satu alur kerja CI.

Mengapa Turborepo?

Turborepo adalah sistem build berperforma tinggi untuk monorepo JavaScript. Sistem ini menyimpan keluaran tugas dalam cache, menjalankan tugas secara paralel di berbagai paket, dan hanya membangun ulang bagian yang berubah. Turborepo dibuat oleh Vercel.

Menyiapkan Turborepo

Gunakan starter resmi.

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/

package.json dengan Workspaces

package.json di root mendeklarasikan workspaces — npm/yarn/pnpm membuat symlink untuknya sehingga aplikasi dapat mengimpor paket berdasarkan nama.

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

turbo.json — Alur Kerja

Tentukan tugas (build, lint, test, dev) dan dependensinya di antara paket.

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

Penjelasan dependsOn

^build berarti: sebelum membangun paket ini, bangun semua dependensi workspaces-nya. Jadi, jika app/web bergantung pada packages/ui, ui dibangun terlebih dahulu.

Menjalankan Tugas

Jalankan suatu tugas di seluruh monorepo. Turbo menjalankannya dalam urutan topologis dengan paralelisme.

# 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

Menyimpan Keluaran dalam Cache

Turbo membuat hash dari masukan (berkas sumber + dependensi + lingkungan) dan menyimpan keluaran dalam cache. Menjalankan ulang tanpa perubahan berlangsung seketika — Turbo memutar ulang keluaran yang tersimpan dalam cache tanpa mengeksekusinya kembali.

Caching Jarak Jauh

Unggah cache ke penyimpanan jarak jauh (Vercel Remote Cache atau yang di-host sendiri) agar mesin CI dan rekan satu tim dapat menggunakannya bersama — pengembang pertama yang melakukan build menanggung biayanya, sedangkan yang lain mendapatkan cache hit.

npx turbo login
npx turbo link

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

Memfilter dengan --filter

Jalankan tugas hanya untuk paket yang cocok.

# 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

Paket Internal

Paket di packages/ saling mengimpor berdasarkan nama. Referensikan paket tersebut dalam dependensi sebagai "@repo/ui": "*" (dengan pnpm: 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';

Kiat CI

Gunakan turbo run build --filter=...[origin/main] di CI untuk membangun hanya bagian yang berubah sejak cabang utama. Jika digabungkan dengan cache jarak jauh, build berkurang dari hitungan menit menjadi hitungan detik pada paket yang tidak berubah.

Pemeriksaan Singkat

Apa arti entri ^build dalam larik dependsOn tugas Turbo?

Ringkasan: Turborepo

Sistem monorepo JavaScript: struktur apps/ + packages/ dengan workspaces. turbo.json menentukan tugas dan hubungan dependsOn. ^build = bangun dependensi terlebih dahulu. Cache lokal berbasis hash membuat pekerjaan berulang berlangsung seketika. Cache jarak jauh membagikan cache hit ke seluruh tim dan CI. --filter menargetkan subset. Gunakan changed-since untuk CI PR yang cepat.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Penyiapan Monorepo dengan Turborepo” gratis?

Ya — teks lengkap “Penyiapan Monorepo dengan Turborepo” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Penyiapan Monorepo dengan Turborepo”?

Atur beberapa aplikasi dan paket bersama dalam satu repo, definisikan pipeline Turbo, dan simpan hasil build dalam tembolok agar hanya perubahan yang dibangun ulang. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Penyiapan Monorepo dengan Turborepo” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Frontend Academy