Vue Academy · Lektion

Veröffentlichung auf npm und semantische Versionierung

package.json-Felder (main, module, exports), Changelogs, semantic-release und npm-Publish-Ablauf

Veröffentlichung auf npm und semantische Versionierung ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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 Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Auf die Veröffentlichung vorbereiten

Durch die Veröffentlichung wird Ihre Bibliothek über npm install installierbar. Zuvor muss package.json die Einstiegspunkte korrekt deklarieren, und Sie müssen festlegen, welche Dateien ausgeliefert werden.

main und module

main verweist für ältere Tools auf den CommonJS-Build; module verweist auf den ESM-Build, damit moderne Bundler die für Tree-Shaking geeignete Version auswählen.

{
  "main": "./dist/my-ui-lib.cjs.js",
  "module": "./dist/my-ui-lib.es.js"
}

Die exports-Map

Das moderne Feld exports definiert bedingte Einstiegspunkte. Es hat Vorrang vor main/module und steuert den Zugriff auf Unterpfade.

{
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/my-ui-lib.es.js",
      "require": "./dist/my-ui-lib.cjs.js"
    },
    "./style.css": "./dist/style.css"
  }
}

Bedingte Exporte

Mit den Bedingungen import, require und types können Node und Bundler jeweils die passende Datei für ESM, CommonJS und TypeScript auflösen.

Veröffentlichte Dateien steuern

Verwenden Sie das Feld files, um eine Allowlist der ausgelieferten Dateien festzulegen, oder eine .npmignore als Blocklist. Wenn Sie dist ausliefern und Quellcode sowie Tests ausschließen, bleibt das Paket klein.

{
  "files": ["dist"]
}

.npmignore

Wenn Sie eine Blocklist bevorzugen, schließt .npmignore Dateien aus, selbst wenn kein Feld files gesetzt ist. Ohne eines von beiden veröffentlicht npm nahezu alles.

# .npmignore
src
tests
vite.config.ts
*.log

Vorschau mit npm pack

Führen Sie npm pack aus, um ein Tarball zu erstellen und genau zu prüfen, was veröffentlicht würde – eine wichtige Sicherheitskontrolle vor der Veröffentlichung.

npm pack
# inspect the listed files; nothing secret should appear

Semantische Versionierung

SemVer verwendet MAJOR.MINOR.PATCH. Erhöhen Sie patch für abwärtskompatible Fehlerbehebungen, minor für abwärtskompatible Funktionen und major für inkompatible Änderungen.

npm-version-Befehle

Der Befehl npm version erhöht die Version in package.json und erstellt in einem Schritt ein Git-Tag.

npm version patch   # 1.0.0 -> 1.0.1
npm version minor   # 1.0.1 -> 1.1.0
npm version major   # 1.1.0 -> 2.0.0

npm publish

npm publish lädt das Paket hoch. Für öffentliche Pakete mit Scope ist beim ersten Mal das Flag --access public erforderlich.

npm publish --access public

prepublishOnly und dist-tag

Ein prepublishOnly-Skript stellt sicher, dass vor der Veröffentlichung ein aktueller Build ausgeführt wird. Mit --tag next veröffentlichen Sie Vorabversionen, ohne das Tag latest zu verschieben.

{
  "scripts": {
    "prepublishOnly": "npm run build"
  }
}
// npm publish --tag next

Kurztest

Sie fügen ein neues optionales Prop hinzu, ohne die bestehende Verwendung zu beeinträchtigen. Welche Versionserhöhung ist erforderlich?

Zusammenfassung

Konfigurieren Sie main, module und eine bedingte exports-Map (import/require/types) und steuern Sie die ausgelieferten Dateien mit files oder .npmignore. Erstellen Sie mit npm pack eine Vorschau, erhöhen Sie anschließend die Version gemäß SemVer mit npm version patch/minor/major und veröffentlichen Sie sie mit npm publish (für Pakete mit Scope zusätzlich mit --access public).

Häufig gestellte Fragen

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

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

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

package.json-Felder (main, module, exports), Changelogs, semantic-release und npm-Publish-Ablauf Du übst Vue 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 Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue 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 4 von 4.

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

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 Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue 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

Vite-Konfiguration im Library-Modus
TypeScript-Deklarationen für Komponentenbibliotheken
Tree-Shaking und automatische Importe
Veröffentlichung auf npm und semantische Versionierung

← Zurück zu Vue Academy