React Academy · Lektion

Delade bibliotek och interna paket

Skapa delade UI- och utility-bibliotek och importera dem mellan appar med TypeScript path aliases.

Lektion 2 av 412 steg

Delade bibliotek och interna paket är en gratis lektion i React Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Varför delade bibliotek?

I stället för att duplicera komponenter, hooks och verktygsfunktioner i flera appar extraherar du dem till delade biblioteksprojekt som kan användas av alla appar i monorepot.

Skapa ett bibliotek

Använd Nx-generatorer för att skapa typade, byggbara biblioteksprojekt.

# 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 publika API

Exportera allt från en enda index.ts (det publika API:et). Konsumenter bör endast importera från @myorg/ui, inte från djupa interna sökvägar.

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

Bibliotekstyper: publishable kontra buildable

Buildable-bibliotek kompileras inkrementellt för snabbare monorepobyggen. Publishable-bibliotek genererar dessutom ett npm-kompatibelt paket för extern användning.

# 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

Upprätthålla modulgränser

Använd ESLint-regeln @nx/enforce-module-boundaries för att förhindra cirkulära beroenden och begränsa vilka projekt som får importera varandra.

// 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 för delade bibliotek

Kör Storybook mot UI-biblioteket för att dokumentera komponenter isolerat, oberoende av en app.

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

# Run Storybook:
npx nx storybook ui

Testa bibliotek

Varje bibliotek har ett eget testmål. Kör tester för biblioteket och alla berörda appar när biblioteket ändras.

# Test specific library:
npx nx test ui

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

Versionshantering i monorepon

I ett monorepo delar alla paket på en gemensam package.json och version. För publishable-bibliotek kan du använda verktyg som @jscutlery/semver eller Changesets för att hantera separata versioner.

Flytta befintlig kod till bibliotek

Flytta delad kod till ett bibliotek stegvis: skapa biblioteket, flytta filer, uppdatera importer och låt TypeScript-sökvägsaliasen hantera 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

Dokumentation med Compodoc eller Storybook Docs

Använd Storybooks autodocs-tagg eller Compodoc för att generera API-dokumentation från TypeScript-typer och JSDoc-kommentarer i biblioteksfiler.

Snabb kontroll

Vad bör vara den enda ingångspunkten för konsumenter som importerar från ett delat Nx-bibliotek?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Generera bibliotek med nx generate, exportera allt från en enda index.ts och upprätthåll modulgränser med ESLint-regler. Använd buildable-bibliotek för snabbare inkrementella byggen och publishable-bibliotek när du behöver publicera till npm. Kör Storybook mot UI-bibliotek för isolerad dokumentation.

Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Delade bibliotek och interna paket” gratis?

Ja – hela texten till ”Delade bibliotek och interna paket” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Delade bibliotek och interna paket”?

Skapa delade UI- och utility-bibliotek och importera dem mellan appar med TypeScript path aliases. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Delade bibliotek och interna paket”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Skapa ett Nx-monorepo med React-appar
Delade bibliotek och interna paket
Nx Affected-kommandon och cachning
Kodgeneratorer och automatisering av workspaces

← Tillbaka till React Academy