TypeScript Academy · Pelajaran

Workspace pnpm dengan TypeScript

Konfigurasikan monorepo dengan pnpm dan tsconfig bersama.

Workspace pnpm dengan TypeScript adalah pelajaran TypeScript 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 TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.

Apa Itu Ruang Kerja pnpm

Ruang kerja pnpm memungkinkan Anda mengelola beberapa paket dalam satu repositori dengan struktur node_modules bersama, sehingga mengurangi penggunaan disk dan memungkinkan impor lintas paket.

# pnpm-workspace.yaml
packages:
  - "packages/*"
  - "apps/*"

Membuat Struktur Ruang Kerja

Repositori tunggal pnpm biasanya memiliki packages/ untuk pustaka bersama dan apps/ untuk aplikasi yang dapat diterapkan.

monorepo/
├── pnpm-workspace.yaml
├── package.json          # root
├── packages/
│   ├── core/             # shared logic
│   └── ui/               # shared components
└── apps/
    └── web/              # Next.js app

tsconfig.json Akar

tsconfig akar menetapkan opsi dasar dan mereferensikan semua paket ruang kerja.

{
  "compilerOptions": {
    "strict": true,
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler"
  },
  "references": [
    { "path": "packages/core" },
    { "path": "packages/ui" },
    { "path": "apps/web" }
  ]
}

tsconfig Tingkat Paket

Setiap paket memperluas konfigurasi akar dan menetapkan composite serta outDir-nya sendiri.

// packages/core/tsconfig.json
{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "composite": true,
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

Memasang Dependensi Lintas Paket

Gunakan pnpm add bersama protokol ruang kerja untuk menautkan paket-paket di dalam repositori tunggal.

# Add @myapp/core to apps/web
pnpm add @myapp/core --workspace --filter apps/web

# package.json entry:
# "@myapp/core": "workspace:*"

Resolusi Jalur TypeScript

Tambahkan alias paths di tsconfig akar agar TypeScript menyelesaikan paket ruang kerja ke sumbernya selama pengembangan.

{
  "compilerOptions": {
    "paths": {
      "@myapp/core": ["./packages/core/src/index.ts"],
      "@myapp/ui": ["./packages/ui/src/index.ts"]
    }
  }
}

Membangun Semua Paket

Gunakan tsc --build dari akar untuk membangun semua paket komposit sesuai urutan dependensi.

# Build all
tsc --build

# Or with pnpm recursive script:
pnpm -r build

Menjalankan Skrip di Seluruh Paket

pnpm -r (rekursif) atau --filter menjalankan skrip dalam semua paket yang cocok.

# Run tests in all packages
pnpm -r test

# Run only in packages/core
pnpm --filter @myapp/core test

Konfigurasi ESLint dan Prettier Bersama

Simpan konfigurasi pemeriksaan kode dalam paket bersama dan perluas konfigurasi tersebut di setiap paket untuk memastikan gaya kode yang konsisten di seluruh repositori tunggal.

// packages/eslint-config/index.js
module.exports = { extends: ["airbnb-typescript"], ... };

Integrasi Turborepo

Tambahkan Turborepo untuk menyimpan hasil serta menjalankan tugas pembangunan, pengujian, dan pemeriksaan kode secara paralel, dengan menggunakan graf ruang kerja pnpm untuk menentukan urutan dependensi.

npx create-turbo@latest
# or add to existing monorepo:
pnpm add turbo -w

Ringkasan: Ruang Kerja pnpm dengan TypeScript

Ruang kerja pnpm + referensi proyek TypeScript menghasilkan penyiapan repositori tunggal yang kuat: node_modules bersama, impor lintas paket melalui workspace:*, dan pembangunan cepat dengan tsc --build.

Pemeriksaan Singkat

Berkas apa yang menentukan direktori mana yang menjadi paket ruang kerja pnpm?

Yang Anda Pelajari

Ruang kerja pnpm dengan referensi proyek TypeScript memberi Anda repositori tunggal yang efisien dengan node_modules bersama, penautan lintas paket melalui protokol ruang kerja, dan pembangunan inkremental. Tambahkan Turborepo untuk penyimpanan hasil dan pemrosesan paralel.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Workspace pnpm dengan TypeScript” gratis?

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

Apa yang akan aku pelajari di “Workspace pnpm dengan TypeScript”?

Konfigurasikan monorepo dengan pnpm dan tsconfig bersama. Kamu berlatih TypeScript 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 TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript 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 “Workspace pnpm dengan TypeScript” 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 TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript 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

Penjelasan Referensi Proyek TypeScript
Workspace pnpm dengan TypeScript
Strategi Paket Tipe Bersama
Build Inkremental dan Cache dalam Monorepo

← Kembali ke TypeScript Academy