Frontend Academy · Lektion

Versionierung und Veröffentlichung auf npm

Versionierung und Veröffentlichung auf npm ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum auf npm veröffentlichen?

Wenn Ihr Designsystem von mehr als einer App verwendet wird, veröffentlichen Sie es als Paket. Nutzer installieren es mit npm/yarn/pnpm, legen Versionen fest und aktualisieren nach ihrem eigenen Zeitplan.

Semantische Versionierung (SemVer)

Versionen folgen MAJOR.MINOR.PATCH. MAJOR: inkompatible Änderungen. MINOR: neue, abwärtskompatible Funktionen. PATCH: ausschließlich Fehlerbehebungen.

Wann die Versionsnummer erhöht wird

Ein Prop umbenannt? MAJOR. Ein neues optionales Prop hinzugefügt? MINOR. Einen CSS-Fehler behoben? PATCH. Vor-1.0-Releases (0.x.y) können inkompatible Änderungen in MINOR enthalten — gehen Sie dennoch sorgfältig damit um.

package.json — das Manifest

Konfigurieren Sie, wie Ihr Paket auf npm dargestellt wird.

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

Build-Ausgabe

Veröffentlichen Sie CommonJS, ESM und Typdeklarationen. Tools wie tsup oder vite build --lib übernehmen das.

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

Führen Sie React/Vue usw. als peerDependencies auf, damit Nutzer ihre eigene Version verwenden. Wenn Sie sie als reguläre Abhängigkeiten markieren, werden sie zweimal gebündelt — Hooks und Kontext funktionieren dann nicht korrekt.

Tree-Shaking-freundlich

Verwenden Sie ESM-Exports und vermeiden Sie Seiteneffekte, damit Bundler nicht verwendete Komponenten entfernen können. Kennzeichnen Sie dies in package.json mit "sideEffects": false (oder listen Sie bestimmte Dateien wie CSS auf).

Auf npm veröffentlichen

Melden Sie sich einmal an und veröffentlichen Sie anschließend das Paket.

npm login

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

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

Releases mit Changesets automatisieren

Changesets ist das moderne Toolkit für die Veröffentlichung von Monorepos und Bibliotheken. PRs enthalten eine „changeset“-Datei, die die Änderung beschreibt; die Release-CI erhöht die Versionsnummern und veröffentlicht die Pakete.

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

Automatisches Changelog

Changesets erzeugt automatisch für jedes Paket eine CHANGELOG.md aus den Beschreibungen der Changesets — Nutzer können nachlesen, was sich in jeder Version geändert hat.

npm-Dist-Tags

Verwenden Sie Dist-Tags für Vorabversionen: npm publish --tag beta veröffentlicht, ohne latest zu überschreiben. Nutzer entscheiden sich mit npm install @yourorg/design-system@beta dafür.

Private Registries

Für interne Pakete können Sie GitHub Packages, GitLab Package Registry oder das selbst gehostete Verdaccio verwenden. Konfigurieren Sie dies mit .npmrc: @yourorg:registry=https://npm.pkg.github.com.

Alte Versionen abkündigen

Markieren Sie eine Version als veraltet, um Installationen zu warnen.

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

Wissenscheck

Welche SemVer-Erhöhung ist erforderlich, wenn Sie ein Prop einer exportierten Komponente umbenennen?

Zusammenfassung: Versionierung und Veröffentlichung

SemVer: MAJOR.MINOR.PATCH — inkompatible Änderung, Funktion, Fehlerbehebung. Bauen Sie CJS + ESM + Typen (tsup, vite --lib). React/Vue als peerDependencies. sideEffects:false für Tree-Shaking. Mit npm publish veröffentlichen oder mit Changesets automatisieren. CHANGELOG wird automatisch erzeugt. Dist-Tags für Betas. Private Registries für interne Pakete.

Häufig gestellte Fragen

Ist die Lektion „Versionierung und Veröffentlichung auf npm“ kostenlos?

Ja — der vollständige Text von „Versionierung und Veröffentlichung auf npm“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Versionierung und Veröffentlichung auf npm“?

Verwenden Sie semantische Versionierung, automatisieren Sie die Erstellung von Changelogs mit Changesets oder standard-version und veröffentlichen Sie die Bibliothek auf npm oder in einer privaten Re… Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Versionierung und Veröffentlichung auf npm“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Storybook: Stories, Controls und Docs
Design-Tokens mit Style Dictionary
Versionierung und Veröffentlichung auf npm
Ein Designsystem verwenden

← Zurück zu Frontend Academy