DEV Community

Ryan Pazrin
Ryan Pazrin

Posted on

📦 Mengenal Monorepo: Struktur & Manfaat dalam Proyek JavaScript

#npm #monorepo #javascript #architecture

Monorepo (Monolithic Repository) adalah pendekatan manajemen proyek di mana beberapa package atau modul dikembangkan dan disimpan dalam satu repository Git. Ini sangat berguna untuk tim besar, proyek modular, atau sistem dengan banyak bagian saling terkait.

Apa Itu Monorepo?

Secara sederhana, monorepo adalah struktur di mana beberapa package disatukan dalam satu repositori, bukannya dibuat dan dipisah ke banyak repository kecil.

Misalnya:

my-project/
├── packages/
│   ├── utils/
│   ├── components/
│   └── api/
├── apps/
│   └── frontend/
├── package.json
└── pnpm-workspace.yaml
Enter fullscreen mode Exit fullscreen mode

Kenapa Pakai Monorepo?

Keuntungan Penjelasan
🔁 Reuse Code Semua modul bisa saling impor tanpa perlu publish ke npm.
🚀 Build Cepat Tool seperti pnpm, turbo, atau nx bisa melakukan build hanya pada package yang berubah.
🛠️ Dependency Terpusat Semua dependency dikelola dalam satu tempat.
🤝 Kolaborasi Lebih Mudah Tim bisa bekerja di berbagai bagian sistem tanpa berpindah repo.
✅ Konsistensi Tooling Linter, formatter, dan test bisa disatukan di root.

Setup Dasar Monorepo dengan pnpm

1. Struktur Folder 

my-monorepo/
├── packages/
│   ├── @internal/utils/
│   └── @internal/ui/
├── apps/
│   └── dashboard/
├── package.json
└── pnpm-workspace.yaml
Enter fullscreen mode Exit fullscreen mode

2. package.json di root 

{
  "private": true,
  "workspaces": ["packages/*", "apps/*"],
  "devDependencies": {
    "typescript": "^5.0.0",
    "vite": "^5.0.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

3. pnpm-workspace.yaml 

packages:
  - "packages/*"
  - "apps/*"
Enter fullscreen mode Exit fullscreen mode

Contoh Package Lokal: @internal/utils

packages/@internal/utils/package.json:

{
  "name": "@internal/utils",
  "version": "1.0.0",
  "main": "dist/index.js",
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.js"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Jangan lupa untuk membuild package-nya (pnpm build) agar file dist/ tersedia saat diimpor oleh project lain.

Mengimpor Package Internal

Contoh import dari aplikasi frontend:

// apps/dashboard/src/main.ts
import { formatDate } from "@internal/utils";
Enter fullscreen mode Exit fullscreen mode

Vite atau bundler lain akan resolve path ini karena pnpm sudah membuat symlink antar package.

Konfigurasi Tambahan (Opsional)

TypeScript Path Alias (tsconfig.json) 

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@internal/utils": ["packages/@internal/utils/src"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Alias di Vite (vite.config.ts) 

import { defineConfig } from "vite";
import path from "path";

export default defineConfig({
  resolve: {
    alias: {
      "@internal/utils": path.resolve(__dirname, "../packages/@internal/utils/src")
    }
  }
});
Enter fullscreen mode Exit fullscreen mode

Tool yang Sering Dipakai di Monorepo

Tool Fungsi
pnpm / yarn / npm workspaces Manajemen dependency lintas package
turbo Build dan cache task dengan cepat
nx Framework monorepo yang powerful dan scalable
lerna Tool klasik untuk monorepo, kini banyak digantikan oleh Turbo/Nx

Tips Tambahan

  • Gunakan pnpm dev atau pnpm --filter untuk menjalankan per-package script.
  • Pisahkan devDependencies di root untuk menjaga konsistensi.
  • Tambahkan prettier, eslint, dan tooling lain di root agar rapi.

Penutup

Monorepo memberikan efisiensi tinggi untuk tim pengembang modern, terutama dalam proyek besar atau sistem modular. Dengan tools seperti pnpm dan vite, kamu bisa membuat workflow development yang cepat, ringan, dan scalable.

Jika kamu belum pernah coba, mungkin ini saatnya mengubah cara kamu mengelola proyek ✨

Top comments (0)