Ontwerpsystemen en componentbibliotheken · Les

Pakketbeheer (NPM/Yarn)

Leer hoe u versies van uw componentenbibliotheek publiceert, gebruikt en beheert met pakketbeheerders die de industriestandaard zijn.

Les 2 van 411 stappen

Pakketbeheer (NPM/Yarn) is een gratis Ontwerpsystemen en componentbibliotheken-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 Ontwerpsystemen en componentbibliotheken. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Ontwerpsystemen en componentbibliotheken bevat in totaal 4 lessen.

De beste vriend van je code: pakketbeheerders

Pakketbeheerders zoals NPM (Node Package Manager) en Yarn zijn essentiële hulpmiddelen voor moderne softwareontwikkeling. Ze automatiseren het zoeken, installeren, bijwerken en beheren van externe codelibraries en afhankelijkheden.

In plaats van bestanden handmatig te downloaden, geef je de pakketbeheerder gewoon door wat je nodig hebt; de rest regelt die zelf!

Waarom designsystemen pakketbeheerders nodig hebben

Designsystemen zijn verzamelingen herbruikbare UI-componenten en richtlijnen. Om deze componenten echt in veel verschillende projecten en teams te kunnen hergebruiken, moeten ze eenvoudig te distribueren zijn.

Pakketbeheerders bieden hiervoor de perfecte oplossing:

Distributie: Maak je componentbibliotheek beschikbaar voor alle applicaties.
Consistentie: Zorg ervoor dat alle projecten goedgekeurde, consistente versies gebruiken.
Updates: Rol eenvoudig bugfixes of nieuwe functies uit naar gebruikers.
Afhankelijkheidsbeheer: Beheer de eigen vereisten van je library.

NPM en Yarn: de belangrijkste spelers

In het JavaScript-ecosysteem zijn NPM en Yarn de twee dominante pakketbeheerders. Hoewel ze hetzelfde doel hebben, verschillen hun opdrachtstructuren en prestatiekenmerken.

NPM: De standaardpakketbeheerder voor Node.js, breed toegepast en robuust.
Yarn: Gemaakt door Facebook, vaak geprezen om snellere installaties en verbeterde beveiligingsfuncties.

Beide beheren voornamelijk het package.json-bestand en de map node_modules van je project.

Het pakket van je componentbibliotheek starten

Om van je componentbibliotheek een deelbaar pakket te maken, heb je een bestand package.json nodig. Dit bestand is het manifest van je project en bevat metagegevens zoals de naam, versie en afhankelijkheden.

Je kunt dit bestand interactief maken met de volgende opdrachten:

npm init
# or
yarn init -y

Belangrijke velden in `package.json` voor libraries

Voor een componentbibliotheek zijn bepaalde velden in package.json essentieel voor een correcte distributie en het gebruik ervan:

name: Een unieke identificatie voor je pakket (bijvoorbeeld @myorg/design-system).
version: De huidige versie, volgens Semantic Versioning (SemVer).
main: Geeft het entrypointbestand van je pakket aan (bijvoorbeeld dist/index.js).
files: Een array met bestanden of mappen die moeten worden opgenomen wanneer je pakket wordt gepubliceerd.
private: true: Voorkomt dat het pakket per ongeluk naar een openbaar register wordt gepubliceerd.

{
  "name": "@myorg/design-system",
  "version": "1.0.0",
  "main": "dist/index.js",
  "files": [
    "dist"
  ],
  "license": "MIT",
  "private": false
}

Afhankelijkheden beheren: dev, peer en optioneel

Je componentbibliotheek kan afhankelijk zijn van andere pakketten. Met package.json kun je verschillende typen afhankelijkheden opgeven:

dependencies: Pakketten die absoluut nodig zijn om je library uit te voeren (bijvoorbeeld een utilitylibrary).
devDependencies: Pakketten die alleen nodig zijn tijdens ontwikkeling, tests of het bouwen (bijvoorbeeld een testframework of een bundelaar zoals Webpack).
peerDependencies: Afhankelijkheden die je *gebruikers* zelf moeten aanleveren (bijvoorbeeld React als je componenten React-componenten zijn). Zo worden meerdere versies van dezelfde afhankelijkheid voorkomen.

{
  "name": "my-component-lib",
  "version": "1.0.0",
  "dependencies": {
    "lodash": "^4.17.21"
  },
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  },
  "devDependencies": {
    "webpack": "^5.0.0"
  }
}

Je componentbibliotheek publiceren

Zodra je componentbibliotheek is gebouwd en geconfigureerd (bijvoorbeeld gecompileerd naar dist/index.js), kun je deze publiceren. Zo wordt de bibliotheek beschikbaar voor anderen om te installeren.

Je publiceert doorgaans naar een pakketregister:

Openbare registers: Zoals het officiële npm-register, voor opensourcepakketten of pakketten die breed worden gedeeld.
Privéregisters: Voor interne designsystemen van bedrijven, met behoud van privacy en controle (bijvoorbeeld GitHub Packages, Azure Artifacts of private npm).

Meld je eerst aan, bouw daarna je library en publiceer deze ten slotte:

npm login
npm run build # Assuming you have a build script
npm publish --access public # Or omit --access public for private

Je pakket voor het designsysteem gebruiken

In een applicatieproject dat je designsysteem nodig heeft, is het gebruiken van het gepubliceerde pakket eenvoudig. Je installeert het net als elke andere afhankelijkheid met behulp van de naam.

Na de installatie kun je de componenten importeren en gebruiken:

// app.js
// This file would be in an application project.
// First, install the package via command line:
// npm install @myorg/design-system
// or
// yarn add @myorg/design-system

// Then, import/require components within your code:
const { Button, Card } = require('@myorg/design-system');

function mainApplicationEntry() {
  console.log("Application started!");
  console.log("Successfully imported Button component.");
  console.log("Successfully imported Card component.");
  // In a real application, you would now use these
  // components to build your UI, e.g., render <Button />
}

mainApplicationEntry();

Semantische versiebeheer (SemVer) uitgelegd

Pakketbeheerders maken gebruik van Semantic Versioning (SemVer), een standaard voor versienummers zoals MAJOR.MINOR.PATCH (bijvoorbeeld 1.2.3). Hiermee wordt de aard van de wijzigingen in elke release aangegeven:

MAJOR (1.0.0 -> 2.0.0): Geeft API-wijzigingen aan die niet achterwaarts compatibel zijn. Gebruikers moeten mogelijk hun code bijwerken.
MINOR (1.0.0 -> 1.1.0): Er zijn nieuwe functies toegevoegd, maar de versie blijft achterwaarts compatibel. Bestaande code zou moeten blijven werken.
PATCH (1.0.0 -> 1.0.1): Achterwaarts compatibele bugfixes. Geen nieuwe functies en geen wijzigingen die bestaande code breken.

Verhoog je versienummer altijd volgens de regels van SemVer voordat je publiceert!

Korte controle: publiceren en gebruiken

Stel je voor dat je een nieuw applicatieproject hebt en componenten wilt gaan gebruiken uit de gepubliceerde library voor het designsysteem van je bedrijf.

Beantwoord dit in de interactieve les

Samenvatting van de les: pakketbeheer

We hebben bekeken waarom pakketbeheerders zoals NPM en Yarn essentieel zijn voor designsystemen. Ze stellen je in staat om:

Je componentbibliotheek als pakket te initialiseren en configureren.
Verschillende typen afhankelijkheden (dependencies, devDependencies, peerDependencies) effectief te beheren.
Je library te publiceren naar openbare of privére registers, zodat anderen deze kunnen gebruiken.
Gedeelde componenten naadloos in applicaties te gebruiken met eenvoudige installatieopdrachten.
Semantic Versioning (SemVer) te begrijpen en toe te passen voor duidelijke en voorspelbare updates.

Goed pakketbeheer is essentieel voor het onderhouden van een schaalbaar, consistent en eenvoudig te distribueren designsysteem!

Gratis beginnen

Leer Ontwerpsystemen en componentbibliotheken 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: 12
Lessen: 48

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Pakketbeheer (NPM/Yarn)” gratis?

Ja — de volledige tekst van “Pakketbeheer (NPM/Yarn)” 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 Ontwerpsystemen en componentbibliotheken wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Ontwerpsystemen en componentbibliotheken bevat in totaal 4 lessen.

Wat leer ik in “Pakketbeheer (NPM/Yarn)”?

Leer hoe u versies van uw componentenbibliotheek publiceert, gebruikt en beheert met pakketbeheerders die de industriestandaard zijn. Je oefent met Ontwerpsystemen en componentbibliotheken 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 Ontwerpsystemen en componentbibliotheken te beginnen?

Ervaring vooraf is niet nodig. Ontwerpsystemen en componentbibliotheken 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 “Pakketbeheer (NPM/Yarn)”?

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 Ontwerpsystemen en componentbibliotheken?

Ja. Elke les over Ontwerpsystemen en componentbibliotheken 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

← Terug naar Ontwerpsystemen en componentbibliotheken