Quản lý Monorepo bằng Turborepo và pnpm: Chia sẻ UI Library và TypeScript Types dễ dàng

Nỗi khổ khi tách riêng nhiều Repository nhỏ (Polyrepo)#

Khi công ty phát triển nhiều sản phẩm (ví dụ: Website công cộng, Web quản trị Admin Portal, và Mobile App), nếu lưu trữ ở các repo git riêng biệt:

• Bạn phải copy-paste các interface TypeScript (Types/Models) thủ công giữa các repo mỗi khi database thay đổi.
• Bộ UI components chung (Button, Input, Modal) phải publish lên npm private registry mỗi lần sửa một dòng CSS.
• Quản lý phiên bản dependencies bị lệch lạc giữa các dự án.

Monorepo với sự kết hợp của pnpm workspaces và Turborepo là tiêu chuẩn quản lý mã nguồn sạch sẽ nhất hiện nay.

Cấu trúc thư mục Monorepo chuẩn#

my-monorepo/
├── apps/
│   ├── web/        (Next.js / Astro)
│   ├── admin/      (React Dashboard)
│   └── docs/       (Tài liệu)
├── packages/
│   ├── ui/         (Shared React Components & Tailwind)
│   ├── types/      (Shared TypeScript Interfaces & Zod Schemas)
│   ├── eslint-config/
│   └── tsconfig/
├── pnpm-workspace.yaml
└── turbo.json

Sức mạnh của Caching thông minh trong Turborepo#

Turborepo hiểu rõ đồ thị phụ thuộc (Dependency Graph) giữa các package. Khi bạn chạy lệnh build:

pnpm turbo run build

Nếu package ui chưa từng thay đổi code, Turborepo sẽ lấy kết quả từ Cache ngay lập tức (>>> FULL TURBO - 0.05s) mà không cần phải compile lại từ đầu!

Góc thảo luận#

Team bạn đang dùng Monorepo hay Polyrepo? Công cụ build monorepo yêu thích của anh em là Turborepo, Nx hay Lerna?

Xem thêm nội dung liên quan:

• Lộ trình Fullstack Web Developer
• Review công cụ lập trình web