Designsystemer og komponentbiblioteker · leksjon

Pakkehåndtering (NPM/Yarn)

Lær å publisere, bruke og administrere versjoner av komponentbiblioteket Deres ved hjelp av pakkehåndterere som er bransjestandard.

Leksjon 2 av 411 trinn

Pakkehåndtering (NPM/Yarn) er en gratis leksjon i Designsystemer og komponentbiblioteker 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 Designsystemer og komponentbiblioteker, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Designsystemer og komponentbiblioteker inneholder totalt 4 leksjoner.

Koden din beste venn: Package managere

Package managere som NPM (Node Package Manager) og Yarn er viktige verktøy i moderne programvareutvikling. De automatiserer prosessen med å finne, installere, oppdatere og administrere eksterne kodebiblioteker og avhengigheter.

I stedet for å laste ned filer manuelt forteller du ganske enkelt package manageren hva du trenger, så håndterer den resten!

Hvorfor designsystemer trenger package managere

Designsystemer er samlinger av gjenbrukbare UI-komponenter og retningslinjer. For at disse komponentene virkelig skal kunne «gjenbrukes» på tvers av mange ulike prosjekter og team, må de være enkle å distribuere.

Package managere gir den perfekte løsningen:

Distribusjon: Gjør komponentbiblioteket tilgjengelig for alle applikasjoner.
Konsistens: Sørg for at alle prosjekter bruker godkjente og konsistente versjoner.
Oppdateringer: Rull enkelt ut feilrettinger eller nye funksjoner til brukerne.
Avhengighetshåndtering: Håndter bibliotekets egne krav.

NPM og Yarn: De store aktørene

I JavaScript-økosystemet er NPM og Yarn de to dominerende package managerne. Selv om de har samme mål, har de ulik kommandostruktur og ulike egenskaper når det gjelder ytelse.

NPM: Standard-package manageren for Node.js, med bred utbredelse og høy robusthet.
Yarn: Opprettet av Facebook, og ofte rost for raskere installasjoner og forbedrede sikkerhetsfunksjoner.

Begge administrerer hovedsakelig prosjektets package.json-fil og node_modules-mappen.

Slik starter du en pakke for komponentbiblioteket

For å gjøre komponentbiblioteket ditt om til en delbar pakke trenger du en package.json-fil. Denne filen er manifestet for prosjektet og inneholder metadata som navn, versjon og avhengigheter.

Du kan opprette denne filen interaktivt ved hjelp av følgende kommandoer:

npm init
# or
yarn init -y

Viktige felter i `package.json` for biblioteker

For et komponentbibliotek er bestemte felter i package.json avgjørende for riktig distribusjon og bruk:

name: En unik identifikator for pakken (for eksempel @myorg/design-system).
version: Den gjeldende versjonen, i henhold til semantisk versjonering (SemVer).
main: Angir inngangspunktfilen for pakken (for eksempel dist/index.js).
files: En liste over filer eller kataloger som skal inkluderes når pakken publiseres.
private: true: Hindrer utilsiktet publisering til et offentlig register.

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

Håndtering av avhengigheter: dev, peer, optional

Komponentbiblioteket ditt kan være avhengig av andre pakker. Med package.json kan du angi ulike typer avhengigheter:

dependencies: Pakker som biblioteket trenger for å kjøre (for eksempel et verktøybibliotek).
devDependencies: Pakker som bare trengs under utvikling, testing eller bygging (for eksempel et testrammeverk eller en bundler som Webpack).
peerDependencies: Avhengigheter som *brukerne* forventes å levere (for eksempel React hvis komponentene dine er React-komponenter). Dette hindrer flere versjoner av samme avhengighet.

{
  "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"
  }
}

Publisering av komponentbiblioteket

Når komponentbiblioteket er bygget og konfigurert (for eksempel kompilert til dist/index.js), kan du publisere det. Da blir det tilgjengelig for andre som kan installere det.

Vanligvis publiserer du til et pakkeregister:

Offentlige registre: Som det offisielle npm-registeret, for åpen kildekode eller pakker som skal deles bredt.
Private registre: For interne designsystemer i virksomheter, slik at personvern og kontroll ivaretas (for eksempel GitHub Packages, Azure Artifacts eller private npm).

Logg først inn, bygg deretter biblioteket, og publiser til slutt:

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

Bruk av pakken til designsystemet

I et applikasjonsprosjekt som trenger å bruke designsystemet ditt, er det enkelt å ta i bruk den publiserte pakken. Du installerer den på samme måte som enhver annen avhengighet, ved å bruke navnet.

Når den er installert, kan du importere og bruke komponentene:

// 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();

Semantisk versjonering (SemVer) forklart

Package managere baserer seg på semantisk versjonering (SemVer), en standard for versjonsnumre som MAJOR.MINOR.PATCH (for eksempel 1.2.3). Standarden kommuniserer hva slags endringer hver release inneholder:

MAJOR (1.0.0 -> 2.0.0): Angir API-endringer som ikke er bakoverkompatible. Brukerne kan måtte oppdatere koden sin.
MINOR (1.0.0 -> 1.1.0): Nye funksjoner er lagt til, men de er bakoverkompatible. Eksisterende kode skal fortsatt fungere.
PATCH (1.0.0 -> 1.0.1): Bakoverkompatible feilrettinger. Ingen nye funksjoner og ingen endringer som bryter kompatibiliteten.

Øk alltid versjonsnummeret i henhold til SemVer-reglene før du publiserer!

Hurtigsjekk: Publisering og bruk

Se for deg at du har et nytt applikasjonsprosjekt og ønsker å begynne å bruke komponenter fra virksomhetens publiserte designsystembibliotek.

Besvar den i den interaktive leksjonen

Leksjonsoppsummering: Pakkehåndtering

Vi har utforsket hvordan package managere som NPM og Yarn er avgjørende for designsystemer. De gjør det mulig å:

Initialisere og konfigurere komponentbiblioteket som en pakke.
Håndtere ulike typer avhengigheter (dependencies, devDependencies, peerDependencies) effektivt.
Publisere biblioteket til offentlige eller private registre, slik at andre kan bruke det.
Ta i bruk delte komponenter i applikasjoner på en smidig måte ved hjelp av enkle installasjonskommandoer.
Forstå og bruke semantisk versjonering (SemVer) for tydelige og forutsigbare oppdateringer.

Å mestre pakkehåndtering er avgjørende for å vedlikeholde et skalerbart, konsistent og enkelt distribuerbart designsystem!

Gratis å komme i gang

Lær deg Designsystemer og komponentbiblioteker 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: 12
Leksjoner: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Pakkehåndtering (NPM/Yarn)» gratis?

Ja – hele teksten i «Pakkehåndtering (NPM/Yarn)» 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 Designsystemer og komponentbiblioteker-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Designsystemer og komponentbiblioteker inneholder totalt 4 leksjoner.

Hva lærer jeg i «Pakkehåndtering (NPM/Yarn)»?

Lær å publisere, bruke og administrere versjoner av komponentbiblioteket Deres ved hjelp av pakkehåndterere som er bransjestandard. Du øver på Designsystemer og komponentbiblioteker 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 Designsystemer og komponentbiblioteker?

Ingen tidligere erfaring er nødvendig. Designsystemer og komponentbiblioteker 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 «Pakkehåndtering (NPM/Yarn)»?

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 Designsystemer og komponentbiblioteker-leksjonen?

Ja. Alle Designsystemer og komponentbiblioteker-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

← Tilbake til Designsystemer og komponentbiblioteker