Frontend Academy · leksjon

Versjonering og publisering til npm

Bruk semantisk versjonering, automatiser generering av endringslogger med Changesets eller standard-version, og publiser biblioteket til npm eller et privat register.

Leksjon 3 av 415 trinn

Versjonering og publisering til npm er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 3 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 Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hvorfor publisere til npm?

Hvis designsystemet ditt brukes av mer enn én app, publiserer du det som en pakke. Konsumenter installerer den med npm/yarn/pnpm, låser den til bestemte versjoner og oppdaterer etter sin egen tidsplan.

Semantisk versjonering (SemVer)

Versjoner følger MAJOR.MINOR.PATCH. MAJOR: brytende endringer. MINOR: nye funksjoner, bakoverkompatible. PATCH: bare feilrettinger.

Når versjonen skal økes

Har du gitt en prop nytt navn? MAJOR. Har du lagt til en ny valgfri prop? MINOR. Har du rettet en CSS-feil? PATCH. Utgivelser før 1.0 (0.x.y) kan inneholde brytende endringer i MINOR — men vis hensyn.

package.json — manifestet

Konfigurer hvordan pakken din ser ut 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" }
}

Byggeutdata

Lever CommonJS, ESM og typedefinisjoner. Verktøy 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

Oppgi React/Vue og så videre som peerDependencies, slik at konsumentene bruker sin egen versjon. Hvis du oppgir dem som vanlige avhengigheter, blir de bundlet to ganger — ødelagte hooks og ødelagt kontekst.

Tilpasset tree-shaking

Bruk ESM-eksporter og unngå sideeffekter, slik at bundlere kan fjerne ubrukte komponenter. Marker dette i package.json: "sideEffects": false (eller oppgi bestemte filer, for eksempel CSS).

Publisere til npm

Logg inn én gang, og publiser deretter.

npm login

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

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

Automatisere utgivelser med Changesets

Changesets er det moderne verktøysettet for publisering av monorepoer og biblioteker. Pull requests inneholder en «changeset»-fil som beskriver endringen; release-CI-en øker versjonsnumrene og publiserer.

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 endringslogg

Changesets genererer automatisk en CHANGELOG.md for hver pakke basert på beskrivelsene i changeset-filene — konsumenter kan lese hva som er endret i hver versjon.

npm-distributionstagger

Bruk dist-tags for forhåndsutgivelser: npm publish --tag beta publiserer uten å overskrive latest. Konsumenter velger dette aktivt med npm install @yourorg/design-system@beta.

Private registre

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

Avvikle gamle versjoner

Merk en versjon som avviklet for å advare installasjonsverktøy.

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

Kort sjekk

Hvis du gir en prop på en eksportert komponent nytt navn, hvilken type SemVer-økning kreves?

Besvar den i den interaktive leksjonen

Oppsummering: Versjonering og publisering

SemVer: MAJOR.MINOR.PATCH — brytende endring, funksjon, feilretting. Bygg CJS + ESM + typer (tsup, vite --lib). React/Vue som peerDependencies. sideEffects:false for tree-shaking. Publiser med npm publish eller automatiser med Changesets. CHANGELOG genereres automatisk. Dist-tags for betaversjoner. Private registre for interne pakker.

Gratis å komme i gang

Lær deg HTML 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: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Versjonering og publisering til npm» gratis?

Ja – hele teksten i «Versjonering og publisering til npm» 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 Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Versjonering og publisering til npm»?

Bruk semantisk versjonering, automatiser generering av endringslogger med Changesets eller standard-version, og publiser biblioteket til npm eller et privat register. Du øver på Frontend Academy 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 Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend Academy 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 3 av 4.

Hvor lang tid tar leksjonen «Versjonering og publisering til npm»?

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

Ja. Alle Frontend Academy-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 Frontend Academy