Współdzielone biblioteki i pakiety wewnętrzne
Tworzenie współdzielonych bibliotek UI i narzędzi oraz importowanie ich między aplikacjami za pomocą aliasów ścieżek TypeScript.
Współdzielone biblioteki i pakiety wewnętrzne to bezpłatna lekcja React Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.
Dlaczego współdzielone biblioteki?
Zamiast duplikować komponenty, hooki i narzędzia w wielu aplikacjach, wyodrębnij je do współdzielonych projektów bibliotek, z których może korzystać dowolna aplikacja w monorepo.
Generowanie biblioteki
Używaj generatorów Nx do tworzenia typowanych bibliotek, które można budować.
# 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-accessPubliczne API biblioteki
Eksportuj wszystko z jednego pliku index.ts (publicznego API). Kod korzystający z biblioteki powinien importować elementy tylko z @myorg/ui, a nie z głębokich ścieżek wewnętrznych.
// 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 pathTypy bibliotek: publishable a buildable
Biblioteki buildable są kompilowane przyrostowo, co przyspiesza budowanie monorepo. Biblioteki publishable dodatkowo generują pakiet zgodny z npm, przeznaczony do użycia zewnętrznego.
# 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/uiEgzekwowanie granic modułów
Użyj reguły ESLint @nx/enforce-module-boundaries, aby zapobiegać zależnościom cyklicznym i ograniczać projekty, które mogą importować się nawzajem.
// 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 dla współdzielonych bibliotek
Uruchom Storybook dla biblioteki UI, aby dokumentować komponenty w izolacji, niezależnie od dowolnej aplikacji.
# Generate Storybook config for the ui lib:
npx nx generate @nx/storybook:configuration ui
# Run Storybook:
npx nx storybook uiTestowanie bibliotek
Każda biblioteka ma własny cel testowy. Uruchamiaj testy biblioteki oraz wszystkich aplikacji, których dotyczą zmiany w bibliotece.
# Test specific library:
npx nx test ui
# Test all affected by a change:
npx nx affected --target=testZarządzanie wersjami w monorepo
W monorepo wszystkie pakiety współdzielą jeden plik package.json i jedną wersję. W przypadku bibliotek typu publishable używaj narzędzi takich jak @jscutlery/semver lub Changesets do zarządzania niezależnym wersjonowaniem.
Przenoszenie istniejącego kodu do bibliotek
Przenoś współdzielony kod do biblioteki stopniowo: utwórz bibliotekę, przenieś pliki, zaktualizuj importy, a aliasy ścieżek TypeScript zajmą się resztą.
# 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 fileDokumentacja za pomocą Compodoc lub Storybook Docs
Użyj tagu autodocs w Storybooku lub Compodoc, aby generować dokumentację API na podstawie typów TypeScript i komentarzy JSDoc w plikach biblioteki.
Szybkie sprawdzenie
Jaki powinien być jedyny punkt wejścia dla kodu korzystającego ze współdzielonej biblioteki Nx?
Podsumowanie
Generuj biblioteki za pomocą nx generate, eksportuj wszystko z jednego pliku index.ts i egzekwuj granice modułów za pomocą reguł ESLint. Używaj bibliotek typu buildable, aby przyspieszyć kompilacje przyrostowe, oraz bibliotek typu publishable, gdy trzeba publikować je w npm. Uruchamiaj Storybook dla bibliotek UI, aby tworzyć dokumentację w izolacji.
Często zadawane pytania
Czy lekcja „Współdzielone biblioteki i pakiety wewnętrzne” jest bezpłatna?
Tak — pełny tekst „Współdzielone biblioteki i pakiety wewnętrzne” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Współdzielone biblioteki i pakiety wewnętrzne”?
Tworzenie współdzielonych bibliotek UI i narzędzi oraz importowanie ich między aplikacjami za pomocą aliasów ścieżek TypeScript. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć React Academy?
Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Współdzielone biblioteki i pakiety wewnętrzne”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?
Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Tworzenie monorepo Nx z aplikacjami React
- Współdzielone biblioteki i pakiety wewnętrzne
- Polecenia Nx Affected i buforowanie
- Generatory kodu i automatyzacja workspace'u