ไลบรารีร่วมและแพ็กเกจภายใน

ทำไมต้องใช้ไลบรารีร่วมกัน

การสร้างไลบรารี

# 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 สาธารณะของไลบรารี

// 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

ประเภทของไลบรารี: แบบเผยแพร่ได้กับแบบสร้างได้

# 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

การบังคับใช้ขอบเขตของโมดูล

// 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 สำหรับไลบรารีที่ใช้ร่วมกัน

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

# Run Storybook:
npx nx storybook ui

การทดสอบไลบรารี

# Test specific library:
npx nx test ui

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

การจัดการเวอร์ชันในโมโนเรโป

การย้ายโค้ดเดิมไปไว้ในไลบรารี

# 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

การจัดทำเอกสารด้วย Compodoc หรือ Storybook Docs

ตรวจสอบความเข้าใจ

ทบทวน