0Pricing
Frontend Academy · Pelajaran

Workspace pnpm untuk Monorepo

Siapkan workspace pnpm dengan pnpm-workspace.yaml di root, naikkan dependensi bersama, dan gunakan protokol workspace: untuk menautkan paket lokal.

Workspace pnpm untuk Monorepo adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Mengapa pnpm?

pnpm (Performant npm) adalah pengelola paket yang cepat dan hemat ruang disk. pnpm menyimpan satu salinan setiap paket di penyimpanan global berbasis alamat konten, lalu membuat tautan ke sana dari node_modules proyek. Dependensi yang sama di beberapa proyek berarti hanya satu salinan di disk.

Penghematan Kecepatan dan Ruang Disk

Pada monorepo biasa, instalasi pnpm 2–3 kali lebih cepat daripada npm/yarn dan menggunakan sekitar 70% lebih sedikit ruang disk. Penghematannya sangat besar untuk monorepo dengan banyak paket.

Menginstal pnpm

Gunakan Corepack (yang disertakan bersama Node 16+) atau instal secara global.

# Corepack (recommended):
corepack enable
corepack prepare pnpm@latest --activate

# Or:
npm install -g pnpm

Menyiapkan Workspace

Buat pnpm-workspace.yaml di root yang mencantumkan folder-folder berisi paket.

# pnpm-workspace.yaml
packages:
  - 'apps/*'
  - 'packages/*'
  - '!**/test/**'

Struktur Proyek

Setiap aplikasi dan paket memiliki package.json sendiri. Root memiliki package.json workspace dengan devDeps bersama.

my-monorepo/
  pnpm-workspace.yaml
  package.json         (root, private: true)
  apps/
    web/
      package.json
    docs/
      package.json
  packages/
    ui/
      package.json
    config-eslint/
      package.json

Menginstal Dependensi

Jalankan pnpm install sekali di root. pnpm menginstal semua hal dalam seluruh paket dan menaikkan dependensi umum ke tingkat atas.

pnpm install

# Install only in one workspace:
pnpm --filter web add react-router-dom

# Install dev dep at root:
pnpm add -Dw typescript prettier

Protokol workspace:

Referensikan paket internal dengan workspace:*. pnpm akan mengarahkannya ke paket lokal; saat diterbitkan, referensi tersebut diganti dengan versi nyata.

// apps/web/package.json
{
  "dependencies": {
    "@repo/ui": "workspace:*",
    "@repo/utils": "workspace:^1.0.0"
  }
}

// On publish, workspace:* becomes the actual version of @repo/ui.

Menjalankan Skrip di Seluruh Paket

pnpm -r menjalankan skrip di setiap paket. Gunakan --filter untuk memilih sebagian paket.

# Run build in every package:
pnpm -r build

# Only in web and its deps:
pnpm --filter web... build

# Run lint in changed packages since main:
pnpm --filter ...[origin/main] lint

Resolusi Dependensi yang Ketat

Secara bawaan, pnpm menggunakan symlink sehingga sebuah paket hanya dapat melihat dependensi yang dicantumkan secara eksplisit dalam package.json-nya. Tidak ada kebocoran lintas paket yang tidak disengaja — bug yang diizinkan oleh npm dan yarn classic.

Pola hoist

Secara bawaan, pnpm tidak melakukan hoist apa pun. Jika dependensi transitif perlu diakses (misalnya TypeScript global), tambahkan ke .npmrc: shamefully-hoist=true (hindari jika memungkinkan) atau gunakan public-hoist-pattern tertentu.

Memperbarui Dependensi

pnpm update memperbarui dependensi dalam rentang semver. pnpm update -L menaikkannya ke versi terbaru (mengabaikan caret).

pnpm update                      # update all
pnpm --filter web update react   # only react, only web
pnpm update -L                   # latest (ignore caret)

Menggabungkan dengan Turborepo

pnpm menyediakan workspace + instalasi; Turborepo menyediakan orkestrasi tugas + caching. Keduanya sangat cocok — sebagian besar monorepo JS menggunakan keduanya.

# pnpm install dependencies
pnpm install

# Turborepo runs the tasks across the workspace:
pnpm turbo run build --filter=web...

Kiat CI

Simpan cache penyimpanan berbasis alamat konten pnpm (~/.local/share/pnpm/store) untuk mempercepat CI. Gunakan --frozen-lockfile agar proses gagal jika pnpm-lock.yaml akan berubah.

# .github/workflows/ci.yml
- uses: pnpm/action-setup@v3
  with: { version: 9 }
- uses: actions/setup-node@v4
  with: { node-version: '20', cache: 'pnpm' }
- run: pnpm install --frozen-lockfile
- run: pnpm -r build

Pemeriksaan Singkat

Apa keunggulan utama pnpm dibandingkan npm/yarn dalam hal penggunaan ruang disk pada monorepo?

Ringkasan: Workspace pnpm

Satu penyimpanan berbasis alamat konten + symlink = instalasi cepat dan sekitar 70% lebih sedikit ruang disk. pnpm-workspace.yaml mencantumkan folder paket. Protokol workspace:* untuk dependensi internal. pnpm -r menjalankan skrip di seluruh paket; --filter untuk memilih sebagian paket. Resolusi ketat mencegah kebocoran dependensi. Padukan dengan Turborepo untuk orkestrasi tugas. Gunakan --frozen-lockfile di CI.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Workspace pnpm untuk Monorepo” gratis?

Ya — teks lengkap “Workspace pnpm untuk Monorepo” 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 “Workspace pnpm untuk Monorepo”?

Siapkan workspace pnpm dengan pnpm-workspace.yaml di root, naikkan dependensi bersama, dan gunakan protokol workspace: untuk menautkan paket lokal. 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 3 dari 4.

Berapa lama pelajaran “Workspace pnpm untuk Monorepo” 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

  1. Vite: Sistem Plugin dan Mode SSR
  2. esbuild: Kecepatan dan Keterbatasan
  3. Workspace pnpm untuk Monorepo
  4. Turbo: Tembolok dan Pipeline Tugas
← Kembali ke Frontend Academy