React Academy · Les

Gedeelde libraries en interne packages

Maak gedeelde UI- en utilitylibraries en importeer ze in apps met TypeScript-padaliassen.

Les 2 van 412 stappen

Gedeelde libraries en interne packages is een gratis React Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Academy bevat in totaal 4 lessen.

Waarom gedeelde bibliotheken?

In plaats van componenten, hooks en hulpprogramma's over meerdere applicaties te dupliceren, haal je ze onder in gedeelde bibliotheekprojecten die door elke applicatie in de monorepo kunnen worden gebruikt.

Een bibliotheek genereren

Gebruik Nx-generatoren om getypeerde, bouwbare bibliotheekprojecten te maken.

# 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

Openbare API van een bibliotheek

Exporteer alles vanuit één index.ts (de openbare API). Gebruikers mogen alleen importeren vanuit @myorg/ui, niet vanuit diepe interne paden.

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

Bibliotheektypen: publiceerbaar versus bouwbaar

Bouwbare bibliotheken worden incrementeel gecompileerd voor snellere builds in de monorepo. Publiceerbare bibliotheken genereren daarnaast een npm-compatibel pakket voor gebruik van buitenaf.

# 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

Modulegrenzen afdwingen

Gebruik de ESLint-regel @nx/enforce-module-boundaries om circulaire afhankelijkheden te voorkomen en te beperken welke projecten elkaar mogen importeren.

// 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 voor gedeelde bibliotheken

Voer Storybook uit voor de UI-bibliotheek om componenten geïsoleerd te documenteren, onafhankelijk van een applicatie.

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

# Run Storybook:
npx nx storybook ui

Bibliotheken testen

Elke bibliotheek heeft een eigen testdoel. Voer tests uit voor de bibliotheek en voor alle beïnvloede applicaties wanneer de bibliotheek wijzigt.

# Test specific library:
npx nx test ui

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

Versiebeheer in monorepo's

In een monorepo delen alle pakketten één package.json en één versienummer. Gebruik voor publiceerbare bibliotheken hulpmiddelen zoals @jscutlery/semver of Changesets om onafhankelijke versies te beheren.

Bestaande code naar bibliotheken migreren

Verplaats gedeelde code geleidelijk naar een bibliotheek: maak de bibliotheek, verplaats de bestanden, werk de imports bij en laat de TypeScript-padaliassen de rest afhandelen.

# 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

Documentatie met Compodoc of Storybook Docs

Gebruik de tag autodocs van Storybook of Compodoc om API-documentatie te genereren uit TypeScript-typen en JSDoc-opmerkingen in bibliotheekbestanden.

Snelle controle

Wat moet het enige toegangspunt zijn voor gebruikers die importeren vanuit een gedeelde Nx-bibliotheek?

Beantwoord dit in de interactieve les

Samenvatting

Genereer bibliotheken met nx generate, exporteer alles vanuit één index.ts en dwing modulegrenzen af met ESLint-regels. Gebruik bouwbare bibliotheken voor snellere incrementele compilaties en publiceerbare bibliotheken wanneer je naar npm moet publiceren. Voer Storybook uit voor UI-bibliotheken om ze geïsoleerd te documenteren.

Gratis beginnen

Leer React met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 88
Lessen: 324

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Gedeelde libraries en interne packages” gratis?

Ja — de volledige tekst van “Gedeelde libraries en interne packages” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus React Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus React Academy bevat in totaal 4 lessen.

Wat leer ik in “Gedeelde libraries en interne packages”?

Maak gedeelde UI- en utilitylibraries en importeer ze in apps met TypeScript-padaliassen. Je oefent met React Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met React Academy te beginnen?

Ervaring vooraf is niet nodig. React Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “Gedeelde libraries en interne packages”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over React Academy?

Ja. Elke les over React Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

Een Nx-monorepo met React-apps maken
Gedeelde libraries en interne packages
Nx Affected-commando's en caching
Codegenerators en werkruimteautomatisering

← Terug naar React Academy