المكتبات المشتركة والحزم الداخلية

لماذا المكتبات المشتركة؟

إنشاء مكتبة

# 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

واجهة المكتبة العامة

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

تحقق سريع

مراجعة