Frontend Academy · Lektion

Versionsstyring og publicering til npm

Brug semantisk versionsstyring, automatisér generering af ændringslogge med Changesets eller standard-version, og publicér biblioteket til npm eller et privat registry.

Lektion 3 af 415 trin

Versionsstyring og publicering til npm er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvorfor udgive til npm?

Hvis dit designsystem bruges af mere end én app, skal du udgive det som en pakke. Forbrugere installerer den med npm/yarn/pnpm, låser sig til versioner og opdaterer efter deres egen tidsplan.

Semantisk versionering (SemVer)

Versioner følger MAJOR.MINOR.PATCH. MAJOR: ændringer, der bryder kompatibiliteten. MINOR: nye funktioner, der er bagudkompatible. PATCH: kun fejlrettelser.

Hvornår versionen skal hæves

Har du omdøbt en prop? MAJOR. Har du tilføjet en ny valgfri prop? MINOR. Har du rettet en CSS-fejl? PATCH. Udgivelser før 1.0 (0.x.y) kan indeholde brud i MINOR — men vær hensynsfuld.

package.json — manifestet

Konfigurer, hvordan din pakke præsenteres 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" }
}

Buildresultat

Udgiv CommonJS, ESM og typeerklæringer. Værktøjer som tsup eller vite build --lib håndterer dette.

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

Angiv React/Vue osv. som peerDependencies, så forbrugerne bruger deres egen version. Hvis du angiver dem som almindelige afhængigheder, bliver de bundtet to gange — hvilket ødelægger hooks og kontekst.

Egnet til tree-shaking

Brug ESM-eksporter, og undgå sideeffekter, så bundlere kan fjerne ubrugte komponenter. Markér det i package.json: "sideEffects": false (eller angiv specifikke filer som CSS).

Udgivelse til npm

Log ind én gang, og udgiv derefter.

npm login

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

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

Automatisér udgivelser med Changesets

Changesets er det moderne værktøj til udgivelse af monorepoer og biblioteker. Pull requests indeholder en changeset-fil, der beskriver ændringen; release-CI'en hæver versionerne og udgiver.

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

Automatisk ændringslog

Changesets genererer automatisk en CHANGELOG.md for hver pakke ud fra beskrivelserne i changesets — forbrugerne kan læse, hvad der er ændret i hver version.

npm-distributionstags

Brug distributionstags til forhåndsudgivelser: npm publish --tag beta udgiver uden at overskrive latest. Forbrugere tilvælger dem med npm install @yourorg/design-system@beta.

Private pakkeregistre

Interne pakker kan bruge GitHub Packages, GitLab Package Registry eller selvhostede Verdaccio. Konfigurer med .npmrc: @yourorg:registry=https://npm.pkg.github.com.

Udfasning af gamle versioner

Markér en version som forældet for at advare dem, der installerer den.

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

Hurtigt tjek

Hvis du omdøber en prop på en eksporteret komponent, hvilken type SemVer-versionforøgelse kræves der?

Besvar den i den interaktive lektion

Opsamling: Versionering og udgivelse

SemVer: MAJOR.MINOR.PATCH — brud, funktion og rettelse. Byg CJS, ESM og typer (tsup, vite --lib). React/Vue som peerDependencies. sideEffects:false til tree-shaking. Udgiv med npm publish, eller automatisér med Changesets. CHANGELOG genereres automatisk. Distributionstags til betaversioner. Private registre til interne pakker.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Versionsstyring og publicering til npm” gratis?

Ja — hele teksten til “Versionsstyring og publicering til npm” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Versionsstyring og publicering til npm”?

Brug semantisk versionsstyring, automatisér generering af ændringslogge med Changesets eller standard-version, og publicér biblioteket til npm eller et privat registry. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Versionsstyring og publicering til npm”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Frontend Academy