React Academy · leksjon

Delte biblioteker og interne pakker

Opprett delte UI- og utility-biblioteker, og importer dem på tvers av apper med TypeScript path aliases.

Leksjon 2 av 412 trinn

Delte biblioteker og interne pakker er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Hvorfor delte biblioteker?

I stedet for å duplisere komponenter, hooks og verktøy i flere apper kan du trekke dem ut i delte bibliotekprosjekter som alle apper i monorepoet kan bruke.

Generere et bibliotek

Bruk Nx-generatorer til å opprette typede bibliotekprosjekter som kan bygges.

# 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

Bibliotekets offentlige API

Eksporter alt fra én enkelt index.ts (det offentlige API-et). Forbrukere bør bare importere fra @myorg/ui, ikke fra dype interne stier.

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

Bibliotektyper: publiserbare kontra byggbare

Byggbare biblioteker kompileres trinnvis, noe som gir raskere bygginger av monorepoet. Publiserbare biblioteker genererer i tillegg en npm-kompatibel pakke for ekstern bruk.

# 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

Håndheve modulgrenser

Bruk ESLint-regelen @nx/enforce-module-boundaries for å hindre sirkulære avhengigheter og begrense hvilke prosjekter som kan importere fra hverandre.

// 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 for delte biblioteker

Kjør Storybook mot UI-biblioteket for å dokumentere komponenter isolert og uavhengig av enhver app.

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

# Run Storybook:
npx nx storybook ui

Teste biblioteker

Hvert bibliotek har sin egen testoppgave. Kjør tester for biblioteket og alle berørte apper når biblioteket endres.

# Test specific library:
npx nx test ui

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

Versjonshåndtering i monorepoer

I et monorepo deler alle pakker én package.json-fil og én versjon. For publiserbare biblioteker kan du bruke verktøy som @jscutlery/semver eller Changesets til å håndtere uavhengig versjonering.

Flytte eksisterende kode til biblioteker

Flytt delt kode til et bibliotek trinnvis: opprett biblioteket, flytt filene, oppdater importene, og la TypeScript-stialiasene håndtere resten.

# 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

Dokumentasjon med Compodoc eller Storybook Docs

Bruk Storybooks autodocs-tagg eller Compodoc til å generere API-dokumentasjon fra TypeScript-typer og JSDoc-kommentarer i bibliotekfilene.

Kort kontroll

Hva bør være det eneste inngangspunktet for forbrukere som importerer fra et delt Nx-bibliotek?

Besvar den i den interaktive leksjonen

Oppsummering

Generer biblioteker med nx generate, eksporter alt fra én enkelt index.ts, og håndhev modulgrenser med ESLint-regler. Bruk byggbare biblioteker for raskere trinnvise bygginger, og publiserbare biblioteker når du trenger å publisere til npm. Kjør Storybook mot UI-biblioteker for isolert dokumentasjon.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Delte biblioteker og interne pakker» gratis?

Ja – hele teksten i «Delte biblioteker og interne pakker» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Delte biblioteker og interne pakker»?

Opprett delte UI- og utility-biblioteker, og importer dem på tvers av apper med TypeScript path aliases. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Delte biblioteker og interne pakker»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Opprette et Nx-monorepo med React-apper
Delte biblioteker og interne pakker
Nx Affected-kommandoer og caching
Kodegeneratorer og automatisering av arbeidsområder

← Tilbake til React Academy