0Pricing
Vue Academy · Lektion

Vite-Konfiguration im Library-Modus

build.lib in vite.config.ts, Einstiegspunkt, Formate (es/cjs/umd) und externe Abhängigkeiten

Vite-Konfiguration im Library-Modus ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Bibliotheksmodus

Der Bibliotheksmodus von Vite erstellt ein Paket, das von anderen Apps importiert werden soll, anstatt als Website ausgeführt zu werden. Sie konfigurieren ihn unter build.lib in vite.config.ts.

Der Entry Point

Die entry-Datei ist die öffentliche Oberfläche Ihrer Bibliothek – sie exportiert alle Komponenten und Hilfsfunktionen erneut, auf die Verbraucher zugreifen sollen.

// src/index.ts
export { default as MyButton } from "./MyButton.vue";
export { default as MyCard } from "./MyCard.vue";

build.lib konfigurieren

Verweisen Sie mit build.lib.entry auf diese Datei und geben Sie der Bibliothek einen globalen name (der für den UMD-Build verwendet wird).

import { defineConfig } from "vite";
import { resolve } from "path";

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, "src/index.ts"),
      name: "MyUiLib"
    }
  }
});

Das formats-Array

formats legt die Ausgabeformate für Module fest. Für moderne Bibliotheken deckt ["es", "cjs"] sowohl ESM-Bundler als auch Node-/CommonJS-Verbraucher ab.

lib: {
  entry: resolve(__dirname, "src/index.ts"),
  name: "MyUiLib",
  formats: ["es", "cjs"]
}

Die fileName-Funktion

fileName kann eine Funktion sein, die das Format empfängt. Dadurch können Sie für jede Ausgabe einen eigenen Namen erzeugen.

lib: {
  // ...
  fileName: (format) => "my-ui-lib." + format + ".js"
}

Warum Vue externalisieren

Sie dürfen Vue nicht in Ihre Bibliothek bündeln – der Verbraucher verfügt bereits darüber. Das Bündeln würde Vue duplizieren und die Reaktivität beeinträchtigen. Markieren Sie Vue als extern.

rollupOptions.external

Führen Sie unter build.rollupOptions vue in external auf, damit Vue in der Ausgabe als Import erhalten bleibt, anstatt inline eingefügt zu werden.

build: {
  lib: { /* ... */ },
  rollupOptions: {
    external: ["vue"]
  }
}

output.globals für UMD

Wenn Sie zusätzlich einen UMD-Build erzeugen, muss der Browser den Namen der globalen Variable für jedes externe Modul kennen. Ordnen Sie vue der globalen Variable Vue zu.

rollupOptions: {
  external: ["vue"],
  output: {
    globals: { vue: "Vue" }
  }
}

Peer-Abhängigkeiten externalisieren

Auch jede Peer-Abhängigkeit (etwa Icon-Sammlungen oder Hilfsbibliotheken, die der Verbraucher bereits installiert) sollte externalisiert und nicht gebündelt werden.

external: ["vue", "vue-router", "@vueuse/core"]

Bauen

Führen Sie den Build aus, um die konfigurierten Formate in dist zu erzeugen. Dieselbe Plugin-Pipeline (vue, vueJsx) gilt weiterhin für Quelldateien.

npm run build
# dist/my-ui-lib.es.js, dist/my-ui-lib.cjs.js

CSS getrennt halten

Komponentenstile können als separate CSS-Datei ausgegeben werden, die Verbraucher importieren. Dadurch bleibt das JavaScript-Bundle schlank und sie können selbst steuern, welche Stile eingebunden werden.

// consumer side
import "my-ui-lib/dist/style.css";

Kurztest

Warum wird vue beim Erstellen einer Vue-Bibliothek in rollupOptions.external aufgeführt?

Zusammenfassung

Der Bibliotheksmodus von Vite wird unter build.lib mit einer entry-Barrel-Datei, einem name, einem formats-Array (es und cjs) und einer fileName-Funktion konfiguriert. Externalisieren Sie vue (und Peer-Abhängigkeiten) über rollupOptions.external und ordnen Sie UMD-Globals mit output.globals zu, damit der Verbraucher Vue bereitstellt.

Häufig gestellte Fragen

Ist die Lektion „Vite-Konfiguration im Library-Modus“ kostenlos?

Ja — der vollständige Text von „Vite-Konfiguration im Library-Modus“ 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 „Vite-Konfiguration im Library-Modus“?

build.lib in vite.config.ts, Einstiegspunkt, Formate (es/cjs/umd) und externe Abhängigkeiten 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 1 von 4.

Wie lange dauert die Lektion „Vite-Konfiguration im Library-Modus“?

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

  1. Vite-Konfiguration im Library-Modus
  2. TypeScript-Deklarationen für Komponentenbibliotheken
  3. Tree-Shaking und automatische Importe
  4. Veröffentlichung auf npm und semantische Versionierung
← Zurück zu Vue Academy