PricingLoginStart free
Designsystem och komponentbibliotek · Lektion

Pakethantering (NPM/Yarn)

Lär Er att publicera, använda och hantera versioner av Ert komponentbibliotek med branschstandardiserade pakethanterare.

Lektion 2 av 411 steg

Pakethantering (NPM/Yarn) är en gratis lektion i Designsystem och komponentbibliotek 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 Designsystem och komponentbibliotek, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Designsystem och komponentbibliotek innehåller totalt 4 lektioner.

Kodens bästa vän: pakethanterare

Pakethanterare som NPM (Node Package Manager) och Yarn är viktiga verktyg i modern programvaruutveckling. De automatiserar processen med att hitta, installera, uppdatera och hantera externa kodbibliotek och beroenden.

I stället för att ladda ner filer manuellt anger ni helt enkelt vad ni behöver till pakethanteraren, så sköter den resten!

Varför designsystem behöver pakethanterare

Designsystem är samlingar av återanvändbara UI-komponenter och riktlinjer. För att verkligen kunna återanvändas i många olika projekt och team måste dessa komponenter vara enkla att distribuera.

Pakethanterare erbjuder den perfekta lösningen:

  • Distribution: Gör ert komponentbibliotek tillgängligt för alla applikationer.
  • Enhetlighet: Säkerställ att alla projekt använder godkända och enhetliga versioner.
  • Uppdateringar: Rulla enkelt ut felkorrigeringar eller nya funktioner till användarna.
  • Beroendehantering: Hantera bibliotekets egna krav.

NPM och Yarn: de stora aktörerna

I JavaScript-ekosystemet är NPM och Yarn de två dominerande pakethanterarna. Även om de har samma mål skiljer sig deras kommandostrukturer och prestandaegenskaper åt.

  • NPM: Standardpakethanteraren för Node.js, brett använd och robust.
  • Yarn: Skapades av Facebook och uppskattas ofta för snabbare installationer och förbättrade säkerhetsfunktioner.

Båda hanterar främst projektets fil package.json och katalogen node_modules.

Kom igång med ert komponentbibliotek som paket

För att omvandla ert komponentbibliotek till ett delbart paket behöver ni en fil som heter package.json. Filen fungerar som projektets manifest och innehåller metadata som namn, version och beroenden.

Ni kan skapa filen interaktivt med följande kommandon:

npm init
# or
yarn init -y

Viktiga fält i `package.json` för bibliotek

För ett komponentbibliotek är vissa fält i package.json avgörande för korrekt distribution och användning:

  • name: En unik identifierare för ert paket (t.ex. @myorg/design-system).
  • version: Den aktuella versionen enligt Semantic Versioning (SemVer).
  • main: Anger startpunktsfilen för ert paket (t.ex. dist/index.js).
  • files: En lista över filer eller kataloger som ska inkluderas när paketet publiceras.
  • private: true: Förhindrar oavsiktlig publicering till ett offentligt register.
{
  "name": "@myorg/design-system",
  "version": "1.0.0",
  "main": "dist/index.js",
  "files": [
    "dist"
  ],
  "license": "MIT",
  "private": false
}

Hantera beroenden: dev, peer och optional

Ert komponentbibliotek kan vara beroende av andra paket. Med package.json kan ni ange olika typer av beroenden:

  • dependencies: Paket som absolut krävs för att biblioteket ska kunna köras (t.ex. ett verktygsbibliotek).
  • devDependencies: Paket som endast behövs under utveckling, testning eller byggande (t.ex. ett testramverk eller en bundler som Webpack).
  • peerDependencies: Beroenden som era *användare* förväntas tillhandahålla (t.ex. React om era komponenter är React-komponenter). Detta förhindrar flera versioner av samma beroende.
{
  "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"
  }
}

Publicera ert komponentbibliotek

När ert komponentbibliotek har byggts och konfigurerats (t.ex. kompilerats till dist/index.js) kan ni publicera det. Då blir det tillgängligt för andra att installera.

Ni publicerar vanligtvis till ett paketregister:

  • Offentliga register: Till exempel det officiella npm-registret, för paket med öppen källkod eller paket som ska delas brett.
  • Privata register: För interna designsystem inom företag, med sekretess och kontroll (t.ex. GitHub Packages, Azure Artifacts eller privat npm).

Logga först in, bygg sedan biblioteket och publicera slutligen:

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

Använd ert designsystemspaket

I ett applikationsprojekt som behöver använda ert designsystem är det enkelt att använda det publicerade paketet. Ni installerar det precis som vilket annat beroende som helst genom att ange dess namn.

När det har installerats kan ni importera och använda komponenterna:

// 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 versionshantering (SemVer) förklarad

Pakethanterare förlitar sig på Semantic Versioning (SemVer), en standard för versionsnummer som MAJOR.MINOR.PATCH (t.ex. 1.2.3). Den kommunicerar vilken typ av ändringar varje release innehåller:

  • MAJOR (1.0.0 -> 2.0.0): Anger API-ändringar som inte är bakåtkompatibla. Användare kan behöva uppdatera sin kod.
  • MINOR (1.0.0 -> 1.1.0): Nya funktioner har lagts till, men de är bakåtkompatibla. Befintlig kod bör fortfarande fungera.
  • PATCH (1.0.0 -> 1.0.1): Bakåtkompatibla felkorrigeringar. Inga nya funktioner och inga brytande ändringar.

Öka alltid versionsnumret enligt SemVer-reglerna innan ni publicerar!

Snabbkontroll: publicering och användning

Föreställ er att ni har ett nytt applikationsprojekt och vill börja använda komponenter från företagets publicerade designsystembibliotek.

Besvara frågan i den interaktiva lektionen

Lektionssammanfattning: pakethantering

Vi har utforskat hur pakethanterare som NPM och Yarn är avgörande för designsystem. De gör det möjligt för er att:

  • Initiera och konfigurera ert komponentbibliotek som ett paket.
  • Effektivt hantera olika typer av beroenden (dependencies, devDependencies, peerDependencies).
  • Publicera ert bibliotek i offentliga eller privata register så att andra kan använda det.
  • Enkelt använda delade komponenter i applikationer med hjälp av enkla installationskommandon.
  • Förstå och tillämpa Semantic Versioning (SemVer) för tydliga och förutsägbara uppdateringar.

Att behärska pakethantering är avgörande för att underhålla ett skalbart, enhetligt och lättdistribuerat designsystem!

Gratis att börja

Lär dig Designsystem och komponentbibliotek 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
12
Lektioner
48
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”Pakethantering (NPM/Yarn)” gratis?

Ja – hela texten till ”Pakethantering (NPM/Yarn)” 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 Designsystem och komponentbibliotek, kan Ni uppgradera till CoddyKit PRO. Kursen i Designsystem och komponentbibliotek innehåller totalt 4 lektioner.

Vad lär jag mig i ”Pakethantering (NPM/Yarn)”?

Lär Er att publicera, använda och hantera versioner av Ert komponentbibliotek med branschstandardiserade pakethanterare. Ni övar på Designsystem och komponentbibliotek 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 Designsystem och komponentbibliotek?

Du behöver inga förkunskaper. Utbildningen i Designsystem och komponentbibliotek 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 ”Pakethantering (NPM/Yarn)”?

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 Designsystem och komponentbibliotek-lektionen?

Ja. Varje Designsystem och komponentbibliotek-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

  1. Strategier för versionshantering
  2. Pakethantering (NPM/Yarn)
  3. CI/CD för designsystem
  4. Automatiserad visuell regressionstestning
← Tillbaka till Designsystem och komponentbibliotek