Configurazione della modalità libreria di Vite
build.lib in vite.config.ts, entry point, formati (es/cjs/umd), dipendenze esterne.
Configurazione della modalità libreria di Vite è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.
Modalità libreria
La modalità libreria di Vite crea un pacchetto destinato all'importazione da parte di altre app, anziché all'esecuzione come sito web. La si configura in build.lib in vite.config.ts.
Il punto di ingresso
Il file entry rappresenta l'interfaccia pubblica della libreria: riesporta ogni componente e utility a cui i consumer dovrebbero accedere.
// src/index.ts
export { default as MyButton } from "./MyButton.vue";
export { default as MyCard } from "./MyCard.vue";Configurare build.lib
Imposti build.lib.entry su quel file e assegni alla libreria un name globale, utilizzato per la build UMD.
import { defineConfig } from "vite";
import { resolve } from "path";
export default defineConfig({
build: {
lib: {
entry: resolve(__dirname, "src/index.ts"),
name: "MyUiLib"
}
}
});L'array formats
formats seleziona i formati dei moduli di output. Per le librerie moderne, ["es", "cjs"] copre i bundler ESM e i consumer Node/CommonJS.
lib: {
entry: resolve(__dirname, "src/index.ts"),
name: "MyUiLib",
formats: ["es", "cjs"]
}La funzione fileName
fileName può essere una funzione che riceve il formato, consentendo di produrre nomi distinti per ogni output.
lib: {
// ...
fileName: (format) => "my-ui-lib." + format + ".js"
}Perché esternalizzare Vue
Non deve includere Vue nella libreria: il consumer lo possiede già. Includerlo duplica Vue e interrompe la reattività. Lo contrassegni come external.
rollupOptions.external
In build.rollupOptions, inserisca vue in external, così rimarrà un import nell'output anziché essere incluso direttamente.
build: {
lib: { /* ... */ },
rollupOptions: {
external: ["vue"]
}
}output.globals per UMD
Se emette anche una build UMD, il browser deve conoscere il nome della variabile globale per ogni external. Mappi vue alla globale Vue.
rollupOptions: {
external: ["vue"],
output: {
globals: { vue: "Vue" }
}
}Esternalizzare le dipendenze peer
Anche qualsiasi dipendenza peer, come set di icone e librerie di utility già installate dal consumer, dovrebbe essere esternalizzata anziché inclusa nel bundle.
external: ["vue", "vue-router", "@vueuse/core"]Eseguire la build
Esegua la build per generare i formati configurati nella cartella dist. La stessa pipeline di plugin (vue, vueJsx) continua ad applicarsi ai file sorgente.
npm run build
# dist/my-ui-lib.es.js, dist/my-ui-lib.cjs.jsMantenere separato il CSS
Gli stili dei componenti possono essere generati in un file CSS separato che i consumer importano, mantenendo leggero il bundle JS e lasciando loro il controllo sull'inclusione degli stili.
// consumer side
import "my-ui-lib/dist/style.css";Verifica rapida
Perché bisogna inserire vue in rollupOptions.external quando si crea una libreria Vue?
Riepilogo
La modalità libreria di Vite si configura in build.lib con un file entry barrel, un name, un array formats (es e cjs) e una funzione fileName. Esternalizzi vue e le dipendenze peer tramite rollupOptions.external e mappi le globali UMD con output.globals, così sarà il consumer a fornire Vue.
Domande Frequenti
La lezione «Configurazione della modalità libreria di Vite» è gratuita?
Sì — il testo completo di «Configurazione della modalità libreria di Vite» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.
Cosa imparerò in «Configurazione della modalità libreria di Vite»?
build.lib in vite.config.ts, entry point, formati (es/cjs/umd), dipendenze esterne. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Configurazione della modalità libreria di Vite»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Vue Academy?
Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Configurazione della modalità libreria di Vite
- Dichiarazioni TypeScript per librerie di componenti
- Tree-shaking e import automatici
- Pubblicazione su npm e versionamento semantico