React Academy · Pelajaran

Pustaka Bersama & Paket Internal

Buat pustaka UI dan utilitas bersama, lalu impor ke berbagai aplikasi dengan alias jalur TypeScript.

Pustaka Bersama & Paket Internal adalah pelajaran React 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 React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Mengapa Menggunakan Pustaka Bersama?

Daripada menggandakan komponen, hook, dan utilitas di beberapa aplikasi, ekstrak semuanya ke dalam proyek pustaka bersama yang dapat digunakan oleh aplikasi mana pun dalam monorepo.

Membuat Pustaka

Gunakan generator Nx untuk membuat proyek pustaka yang memiliki tipe dan dapat dibangun.

# UI component library:
npx nx generate @nx/react:library ui --directory=libs/ui --importPath=@myorg/ui

# Utility library:
npx nx generate @nx/js:library utils --directory=libs/utils --importPath=@myorg/utils

# Data access library (hooks, API calls):
npx nx generate @nx/react:library data-access --importPath=@myorg/data-access

API Publik Pustaka

Ekspor semuanya dari satu index.ts (API publik). Pengguna seharusnya hanya mengimpor dari @myorg/ui, bukan dari jalur internal yang bertingkat.

// libs/ui/src/index.ts
export { Button } from './lib/Button';
export { Card } from './lib/Card';
export { Input } from './lib/Input';
export type { ButtonProps } from './lib/Button';

// Consumer in apps/web:
import { Button, Card } from '@myorg/ui';
// NOT: import { Button } from '@myorg/ui/src/lib/Button'; // internal path

Jenis Pustaka: Dapat Dibangun vs Dapat Dipublikasikan

Pustaka Dapat Dibangun dikompilasi secara bertahap untuk mempercepat pembangunan monorepo. Pustaka Dapat Dipublikasikan juga menghasilkan paket yang kompatibel dengan npm untuk digunakan secara eksternal.

# Buildable (monorepo internal use only):
npx nx generate @nx/react:library ui --buildable

# Publishable (for npm too):
npx nx generate @nx/react:library ui --publishable --importPath=@myorg/ui

Menegakkan Batas Modul

Gunakan aturan ESLint @nx/enforce-module-boundaries untuk mencegah dependensi melingkar dan membatasi proyek mana yang dapat saling mengimpor.

// nx.json or .eslintrc
"depConstraints": [
  // Apps can only import from libs:
  { "sourceTag": "type:app", "onlyDependOnLibsWithTags": ["type:lib"] },
  // Feature libs can't import other feature libs (via shared libs only):
  { "sourceTag": "type:feature", "notDependOnLibsWithTags": ["type:feature"] }
]

Storybook untuk Pustaka Bersama

Jalankan Storybook pada pustaka UI untuk mendokumentasikan komponen secara terisolasi, tanpa bergantung pada aplikasi apa pun.

# Generate Storybook config for the ui lib:
npx nx generate @nx/storybook:configuration ui

# Run Storybook:
npx nx storybook ui

Menguji Pustaka

Setiap pustaka memiliki sasaran pengujian sendiri. Jalankan pengujian untuk pustaka dan semua aplikasi yang terdampak saat pustaka berubah.

# Test specific library:
npx nx test ui

# Test all affected by a change:
npx nx affected --target=test

Pengelolaan Versi dalam Monorepo

Dalam monorepo, semua paket berbagi satu package.json dan satu versi. Untuk pustaka yang dapat dipublikasikan, gunakan alat seperti @jscutlery/semver atau Changesets untuk mengelola penomoran versi secara independen.

Memigrasikan Kode yang Ada ke Pustaka

Pindahkan kode bersama ke pustaka secara bertahap: buat pustakanya, pindahkan berkas, perbarui impor, lalu biarkan alias jalur TypeScript menangani sisanya.

# Move a component:
# 1. Copy src/components/Button.tsx → libs/ui/src/lib/Button.tsx
# 2. Export from libs/ui/src/index.ts
# 3. Update imports across apps from relative paths to '@myorg/ui'
# 4. Delete the original file

Dokumentasi dengan Compodoc atau Storybook Docs

Gunakan tag autodocs milik Storybook atau Compodoc untuk membuat dokumentasi API dari tipe TypeScript dan komentar JSDoc dalam berkas pustaka.

Pemeriksaan Singkat

Apa yang seharusnya menjadi satu titik masuk bagi pengguna yang mengimpor dari pustaka Nx bersama?

Ringkasan

Buat pustaka dengan nx generate, ekspor semuanya dari satu index.ts, dan tegakkan batas modul dengan aturan ESLint. Gunakan pustaka yang dapat dibangun untuk pembangunan bertahap yang lebih cepat, serta pustaka yang dapat dipublikasikan ketika Anda perlu merilisnya ke npm. Jalankan Storybook pada pustaka UI untuk dokumentasi yang terisolasi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pustaka Bersama & Paket Internal” gratis?

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

Apa yang akan aku pelajari di “Pustaka Bersama & Paket Internal”?

Buat pustaka UI dan utilitas bersama, lalu impor ke berbagai aplikasi dengan alias jalur TypeScript. Kamu berlatih React 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 React Academy?

Tidak diperlukan pengalaman sebelumnya. React 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 “Pustaka Bersama & Paket Internal” 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 React Academy ini?

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

Membuat Monorepo Nx dengan Aplikasi React
Pustaka Bersama & Paket Internal
Perintah Nx Affected & Penyimpanan Tembolok
Generator Kode & Otomatisasi Workspace

← Kembali ke React Academy