Vue Academy · Lektion

Konfigurera Vite i library mode

build.lib i vite.config.ts, entry point, format (es/cjs/umd) och externa beroenden.

Lektion 1 av 413 steg

Konfigurera Vite i library mode är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.

Biblioteksläge

Biblioteksläget i Vite bygger ett paket som ska importeras av andra appar i stället för att köras som en webbplats. Ni konfigurerar det under build.lib i vite.config.ts.

Startpunkten

Filen entry är bibliotekets offentliga gränssnitt – den återexporterar alla komponenter och verktyg som konsumenterna ska använda.

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

Konfigurera build.lib

Ange den filen som build.lib.entry och ge biblioteket ett globalt name som används för UMD-bygget.

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

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

Arrayen formats

formats väljer utdataformat för modulerna. För moderna bibliotek täcker ["es", "cjs"] både ESM-bundlare och Node-/CommonJS-konsumenter.

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

Funktionen fileName

fileName kan vara en funktion som tar emot formatet, så att ni kan skapa olika namn för varje utdatafil.

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

Varför externisera Vue

Ni får inte bunta in Vue i biblioteket – konsumenten har redan Vue. Att bunta in det duplicerar Vue och förstör reaktiviteten. Markera det som externt.

rollupOptions.external

Under build.rollupOptions listar ni vue i external, så att det förblir en import i resultatet i stället för att bäddas in.

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

output.globals för UMD

Om ni även skapar ett UMD-bygge måste webbläsaren känna till det globala variabelnamnet för varje extern modul. Mappa vue till den globala variabeln Vue.

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

Externisera peer dependencies

Alla peer dependencies, till exempel ikonuppsättningar och verktygsbibliotek som konsumenten redan installerar, ska också externiseras och inte buntas in.

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

Bygga

Kör bygget för att skapa de konfigurerade formaten i dist. Samma pluginpipeline, vue och vueJsx, gäller fortfarande för källfilerna.

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

Hålla CSS separat

Komponentstilar kan skapas som en separat CSS-fil som konsumenterna importerar. Då hålls JS-bundeln liten och de kan själva styra vilka stilar som inkluderas.

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

Snabb kontroll

Varför ska vue listas i rollupOptions.external när ni bygger ett Vue-bibliotek?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Vites biblioteksläge konfigureras under build.lib med en entry-barrel-fil, ett name, en formats-array med es och cjs samt en fileName-funktion. Externisera vue och peer dependencies via rollupOptions.external, och mappa UMD-globala variabler med output.globals så att konsumenten tillhandahåller Vue.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 42
Lektioner: 156

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Konfigurera Vite i library mode” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Konfigurera Vite i library mode”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Konfigurera Vite i library mode”?

build.lib i vite.config.ts, entry point, format (es/cjs/umd) och externa beroenden. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Vue Academy?

Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Konfigurera Vite i library mode”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Vue Academy-lektionen?

Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Konfigurera Vite i library mode
TypeScript-deklarationer för komponentbibliotek
Tree-shaking och automatisk import
Publicera till npm och använd Semantic Versioning

← Tillbaka till Vue Academy