Frontend Academy · Lektion

Versionshantering och publicering till npm

Använd semantisk versionshantering, automatisera genereringen av ändringsloggar med Changesets eller standard-version och publicera biblioteket till npm eller ett privat register.

Lektion 3 av 415 steg

Versionshantering och publicering till npm är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 3 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 Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Varför publicera till npm

Om ert designsystem används av mer än en app bör ni publicera det som ett paket. Konsumenter installerar det med npm/yarn/pnpm, låser sig till versioner och uppdaterar enligt sin egen plan.

Semantisk versionshantering (SemVer)

Versioner följer MAJOR.MINOR.PATCH. MAJOR: brytande ändringar. MINOR: nya funktioner som är bakåtkompatibla. PATCH: endast felrättningar.

När versionen ska höjas

Har ni bytt namn på en prop? MAJOR. Har ni lagt till en ny valfri prop? MINOR. Har ni rättat ett CSS-fel? PATCH. Förhandsversioner före 1.0 (0.x.y) kan innehålla brytande ändringar i MINOR — men visa hänsyn.

package.json — manifestet

Konfigurera hur paketet visas på npm.

{
  "name": "@yourorg/design-system",
  "version": "1.4.2",
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "exports": {
    ".": { "import": "./dist/index.esm.js", "require": "./dist/index.cjs.js" },
    "./theme": "./dist/theme.js"
  },
  "files": ["dist", "README.md"],
  "peerDependencies": { "react": "^18.0.0" }
}

Byggutdata

Leverera CommonJS, ESM och typdeklarationer. Verktyg som tsup eller vite build --lib hanterar detta.

// tsup.config.ts
export default {
  entry: ['src/index.ts'],
  format: ['cjs', 'esm'],
  dts: true,
  clean: true,
  external: ['react', 'react-dom']
};

// package.json: "build": "tsup"

peerDependencies

Lista React/Vue och liknande som peerDependencies så att konsumenterna använder sina egna versioner. Om ni markerar dem som vanliga beroenden bundlas de två gånger — vilket leder till trasiga hooks och trasig kontext.

Vänlig för tree-shaking

Använd ESM-exporter och undvik sidoeffekter så att bundlers kan ta bort oanvända komponenter. Markera detta i package.json: "sideEffects": false (eller ange specifika filer, till exempel CSS).

Publicera till npm

Logga in en gång och publicera sedan.

npm login

# Bump version + publish:
npm version patch   # 1.4.2 -> 1.4.3
npm publish

# Or scoped public package:
npm publish --access public

Automatisera releaser med Changesets

Changesets är den moderna verktygslådan för publicering av monorepon och bibliotek. Pull requests innehåller en ”changeset”-fil som beskriver ändringen; release-CI:t höjer versionerna och publicerar.

npm install -D @changesets/cli
npx changeset init

# In each PR:
npx changeset
# pick package, type (major/minor/patch), describe change
# commits .changeset/<random>.md

# CI on main:
npx changeset version  # bumps versions in package.json + generates changelog
npx changeset publish  # publishes to npm

Automatiskt ändringslogg

Changesets genererar automatiskt en CHANGELOG.md per paket från beskrivningarna i changesets — konsumenterna kan läsa vad som ändrades i varje version.

npm-dist-tags

Använd dist-tags för förhandsversioner: npm publish --tag beta publicerar utan att skriva över latest. Konsumenter väljer att använda versionen med npm install @yourorg/design-system@beta.

Privata paketregister

Internt använda paket kan använda GitHub Packages, GitLab Package Registry eller egenhostade Verdaccio. Konfigurera med .npmrc: @yourorg:registry=https://npm.pkg.github.com.

Avveckla gamla versioner

Markera en version som avvecklad för att varna den som installerar den.

npm deprecate @yourorg/design-system@1.0.0 'Use 2.x for React 18 support'

Snabb kontroll

Om ni byter namn på en prop i en exporterad komponent, vilken typ av SemVer-höjning krävs?

Besvara frågan i den interaktiva lektionen

Sammanfattning: versionshantering och publicering

SemVer: MAJOR.MINOR.PATCH — brytande ändring, funktion, felrättning. Bygg CJS + ESM + typer (tsup, vite --lib). React/Vue som peerDependencies. sideEffects:false för tree-shaking. Publicera med npm publish eller automatisera med Changesets. CHANGELOG genereras automatiskt. Dist-tags för betaversioner. Privata register för interna paket.

Gratis att börja

Lär dig HTML 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: 41
Lektioner: 163

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Versionshantering och publicering till npm” gratis?

Ja – hela texten till ”Versionshantering och publicering till npm” 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 Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Versionshantering och publicering till npm”?

Använd semantisk versionshantering, automatisera genereringen av ändringsloggar med Changesets eller standard-version och publicera biblioteket till npm eller ett privat register. Ni övar på Frontend 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 Frontend Academy?

Du behöver inga förkunskaper. Utbildningen i Frontend 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 3 av 4.

Hur lång tid tar lektionen ”Versionshantering och publicering till npm”?

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 Frontend Academy-lektionen?

Ja. Varje Frontend 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

Storybook: stories, Controls och Docs
Designtokens med Style Dictionary
Versionshantering och publicering till npm
Använda ett designsystem

← Tillbaka till Frontend Academy