Vue Academy · Lektion

Konfiguration af Vites library mode

build.lib i vite.config.ts, entry point, formater (es/cjs/umd) og eksterne afhængigheder

Lektion 1 af 413 trin

Konfiguration af Vites library mode er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vue Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vue Academy-kurset indeholder 4 lektioner i alt.

Biblioteksmodus

Vites biblioteksmodus bygger en pakke, der er beregnet til at blive importeret af andre apps i stedet for at blive kørt som et websted. Du konfigurerer den under build.lib i vite.config.ts.

Indgangspunktet

entry-filen er dit biblioteks offentlige grænseflade – den eksporterer alle komponenter og hjælpefunktioner, som brugerne skal have adgang til.

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

Konfiguration af build.lib

Angiv den fil i build.lib.entry, og giv biblioteket et globalt name (som bruges til UMD-buildet).

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

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

formats-arrayet

formats vælger outputmodulformaterne. For moderne biblioteker dækker ["es", "cjs"] både ESM-bundlere og Node/CommonJS-brugere.

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

fileName-funktionen

fileName kan være en funktion, der modtager formatet, så du kan oprette forskellige navne for hvert output.

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

Hvorfor Vue skal være ekstern

Du må ikke inkludere Vue i dit bibliotek – brugeren har allerede Vue. Hvis du inkluderer det, får du en dobbelt kopi af Vue, og reaktiviteten går i stykker. Angiv det som eksternt.

rollupOptions.external

Under build.rollupOptions skal du angive vue i external, så det forbliver en import i outputtet i stedet for at blive indlejret.

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

output.globals til UMD

Hvis du også genererer et UMD-build, skal browseren kende det globale variabelnavn for hver ekstern afhængighed. Knyt vue til det globale Vue.

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

Eksterne peer-afhængigheder

Alle peer-afhængigheder, f.eks. ikonsæt og hjælpebiblioteker, som brugeren allerede installerer, bør også gøres eksterne i stedet for at blive inkluderet.

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

Bygning

Kør buildet for at generere de konfigurerede formater i dist. Det samme plugin-forløb (vue, vueJsx) gælder stadig for kildefilerne.

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

Hold CSS adskilt

Komponenttypografier kan genereres som en separat CSS-fil, som brugerne importerer. Det holder JS-bundlet slankt og lader dem styre, hvilke typografier der inkluderes.

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

Hurtigt tjek

Hvorfor skal du angive vue i rollupOptions.external, når du bygger et Vue-bibliotek?

Besvar den i den interaktive lektion

Opsummering

Vites biblioteksmodus konfigureres under build.lib med en entry-samlefil, et name, et formats-array (es og cjs) og en fileName-funktion. Gør vue (og peer-afhængigheder) eksterne via rollupOptions.external, og knyt UMD-globale navne med output.globals, så brugeren leverer Vue.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 42
Lektioner: 156

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Konfiguration af Vites library mode” gratis?

Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “Konfiguration af Vites library mode”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vue Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Konfiguration af Vites library mode”?

build.lib i vite.config.ts, entry point, formater (es/cjs/umd) og eksterne afhængigheder Du øver dig i Vue Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Vue Academy?

Der kræves ingen tidligere erfaring. Vue Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Konfiguration af Vites library mode”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Vue Academy-lektion?

Ja. Alle Vue Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Konfiguration af Vites library mode
TypeScript-deklarationer til komponentbiblioteker
Tree-shaking og automatisk import
Publicering til npm og semantisk versionsstyring

← Tilbage til Vue Academy