Vue Academy · Lektion

Vue-Plugins veröffentlichen und typisieren

Paketstruktur, TypeScript-Erweiterung von ComponentCustomProperties und npm-Distribution

Lektion 4 von 413 Schritte

Vue-Plugins veröffentlichen und typisieren 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.

Ein Plugin für npm paketieren

Um ein Vue-Plugin gemeinsam zu nutzen, veröffentlichen Sie es als npm-Paket. Das Paket muss die richtigen Abhängigkeiten deklarieren, einen geeigneten Build ausliefern, TypeScript-Typen enthalten und korrekt veröffentlicht werden. Diese Lektion behandelt jeden Schritt.

peerDependencies für Vue

Führen Sie Vue als peerDependency und nicht als reguläre Abhängigkeit auf. Dadurch stellt die Host-App Vue bereit und verhindert, dass zwei Vue-Kopien in einem Bundle enthalten sind, was die Reaktivität beeinträchtigt.

{
  "name": "vue-toast-kit",
  "peerDependencies": {
    "vue": "^3.4.0"
  },
  "devDependencies": {
    "vue": "^3.4.0"
  }
}

Vite Library Mode

Erstellen Sie das Paket mit dem Library Mode von Vite. Konfigurieren Sie build.lib mit dem Einstiegspunkt, dem Namen und den Ausgabeformaten (ES + UMD), und schließen Sie Vue aus dem Bundle aus.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'VueToastKit',
      fileName: 'index',
      formats: ['es', 'umd']
    }
  }
})

Vue in rollupOptions auslagern

Markieren Sie vue als extern und ordnen Sie es für den UMD-Build einer globalen Variable zu, damit die Vue-Version des Verwenders genutzt wird.

build: {
  lib: { /* ... */ },
  rollupOptions: {
    external: ['vue'],
    output: {
      globals: { vue: 'Vue' }
    }
  }
}

Typdeklarationen generieren

Liefern Sie .d.ts-Dateien aus, damit Verwender Autovervollständigung und Typprüfung erhalten. Verwenden Sie vite-plugin-dts, um die Deklarationen während des Library-Builds zu erzeugen.

import dts from 'vite-plugin-dts'

export default defineConfig({
  plugins: [
    vue(),
    dts({ insertTypesEntry: true })
  ]
})

Die exports-Zuordnung in package.json

Verweisen Sie mit dem Feld exports auf die richtigen Dateien und stellen Sie den ESM-Build sowie die Typdeklarationen bereit. Setzen Sie type: module für ESM-orientierte Pakete.

{
  "type": "module",
  "main": "./dist/index.umd.cjs",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.js",
      "require": "./dist/index.umd.cjs"
    }
  }
}

Typ-Augmentation ausliefern

Wenn Ihr Plugin globale Eigenschaften hinzufügt (etwa this.$toast), nehmen Sie die Augmentation von ComponentCustomProperties in Ihre veröffentlichten Typen auf, damit die Editoren der Verwender sie automatisch erkennen.

// src/types.d.ts (included in the build)
import type { ToastService } from './toast'

declare module 'vue' {
  interface ComponentCustomProperties {
    $toast: ToastService
  }
}

export {}

Der öffentliche Einstiegspunkt

Der Einstiegspunkt src/index.ts sollte das Plugin als Default-Export sowie alle Composables, Schlüssel und Typen exportieren, die Verwender benötigen.

import ToastPlugin from './plugin'
export default ToastPlugin

export { useToast } from './composable'
export { toastKey } from './toast'
export type { ToastService, Toast } from './toast'

Das files-Feld

Verwenden Sie das Feld files, um nur die Build-Ausgabe zu veröffentlichen. So bleibt das Paket klein und Quellcode sowie Konfiguration werden ausgeschlossen.

{
  "files": ["dist"],
  "sideEffects": false
}

Mit Provenance veröffentlichen

Veröffentlichen Sie das Paket mit Provenance auf npm. Dadurch wird das Paket kryptografisch mit dem CI-Build und dem Quell-Commit verknüpft. Führen Sie die Veröffentlichung aus einer vertrauenswürdigen CI-Umgebung (GitHub Actions) mit den richtigen Berechtigungen aus.

# in CI (GitHub Actions)
npm publish --provenance --access public

# package.json can also set:
# "publishConfig": { "provenance": true }

Checkliste vor der Veröffentlichung

Überprüfen Sie vor der Veröffentlichung: Vue ist eine Peer-Abhängigkeit, dist enthält ESM und Typen, exports wird korrekt aufgelöst, die Version wurde erhöht und ein Probelauf sieht korrekt aus.

# inspect what will be published
npm publish --dry-run

# verify the tarball contents
npm pack

Kurzer Test

Testen Sie Ihr Verständnis der Veröffentlichung von Vue-Plugins.

Beantworte es in der interaktiven Lektion

Zusammenfassung

Sie haben gelernt, wie Plugins veröffentlicht und typisiert werden:

Führen Sie Vue als peerDependency auf, um doppelte Vue-Kopien zu vermeiden
Erstellen Sie den Build mit Vites Library Mode und lagern Sie Vue aus
Erzeugen Sie .d.ts-Dateien (vite-plugin-dts) und liefern Sie die Typ-Augmentation aus
Konfigurieren Sie exports, files und type: module
Veröffentlichen Sie mit --provenance aus einer vertrauenswürdigen CI-Umgebung

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 42
Lektionen: 156

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Vue-Plugins veröffentlichen und typisieren“ kostenlos?

Ja — der vollständige Text von „Vue-Plugins veröffentlichen und typisieren“ 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 „Vue-Plugins veröffentlichen und typisieren“?

Paketstruktur, TypeScript-Erweiterung von ComponentCustomProperties und npm-Distribution 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 „Vue-Plugins veröffentlichen und typisieren“?

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

Plugin-Architektur und app.use()
Globale Eigenschaften und provide/inject in Plugins
Beispiel für ein Benachrichtigungs- und Toast-Plugin
Vue-Plugins veröffentlichen und typisieren

← Zurück zu Vue Academy