Configuração do modo de biblioteca do Vite
build.lib em vite.config.ts, ponto de entrada, formatos (es/cjs/umd) e dependências externas.
Configuração do modo de biblioteca do Vite é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
Modo de biblioteca
O modo de biblioteca do Vite compila um pacote destinado a ser importado por outros aplicativos, em vez de ser executado como um site. Você o configura em build.lib no arquivo vite.config.ts.
O ponto de entrada
O arquivo entry é a interface pública da sua biblioteca: ele reexporta cada componente e utilitário que os consumidores devem acessar.
// src/index.ts
export { default as MyButton } from "./MyButton.vue";
export { default as MyCard } from "./MyCard.vue";Configurando build.lib
Aponte build.lib.entry para esse arquivo e atribua à biblioteca um name global, usado na compilação UMD.
import { defineConfig } from "vite";
import { resolve } from "path";
export default defineConfig({
build: {
lib: {
entry: resolve(__dirname, "src/index.ts"),
name: "MyUiLib"
}
}
});A matriz de formatos
formats escolhe os formatos dos módulos de output. Para bibliotecas modernas, ["es", "cjs"] abrange empacotadores ESM e consumidores Node/CommonJS.
lib: {
entry: resolve(__dirname, "src/index.ts"),
name: "MyUiLib",
formats: ["es", "cjs"]
}A função fileName
fileName pode ser uma função que recebe o formato, permitindo produzir nomes distintos por output.
lib: {
// ...
fileName: (format) => "my-ui-lib." + format + ".js"
}Por que externalizar o Vue
Você não deve empacotar o Vue na sua biblioteca: o consumidor já o possui. Empacotá-lo duplica o Vue e rompe a reatividade. Marque-o como externo.
rollupOptions.external
Em build.rollupOptions, liste vue em external para que ele permaneça como uma importação no output, em vez de ser incorporado.
build: {
lib: { /* ... */ },
rollupOptions: {
external: ["vue"]
}
}output.globals para UMD
Se você também gerar uma compilação UMD, o navegador precisa saber o nome da variável global de cada dependência externa. Mapeie vue para a variável global Vue.
rollupOptions: {
external: ["vue"],
output: {
globals: { vue: "Vue" }
}
}Externalizando dependências de pares
Qualquer dependência de par, como conjuntos de ícones e bibliotecas utilitárias que o consumidor já instala, também deve ser externalizada, não empacotada.
external: ["vue", "vue-router", "@vueuse/core"]Compilando
Execute a compilação para gerar os formatos configurados em dist. O mesmo fluxo de plug-ins (vue, vueJsx) continua sendo aplicado aos arquivos de origem.
npm run build
# dist/my-ui-lib.es.js, dist/my-ui-lib.cjs.jsMantendo o CSS separado
Os estilos dos componentes podem ser gerados como um arquivo CSS separado que os consumidores importam, mantendo o pacote JS enxuto e permitindo que controlem a inclusão dos estilos.
// consumer side
import "my-ui-lib/dist/style.css";Verificação rápida
Por que listar vue em rollupOptions.external ao compilar uma biblioteca Vue?
Recapitulação
O modo de biblioteca do Vite é configurado em build.lib com um arquivo agregador entry, um name, uma matriz formats (es e cjs) e uma função fileName. Externalize vue (e as dependências de pares) por meio de rollupOptions.external e mapeie os globais UMD com output.globals, para que o consumidor forneça o Vue.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 42
- Aulas
- 156
Perguntas Frequentes
A aula “Configuração do modo de biblioteca do Vite” é grátis?
Sim — o texto completo de “Configuração do modo de biblioteca do Vite” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “Configuração do modo de biblioteca do Vite”?
build.lib em vite.config.ts, ponto de entrada, formatos (es/cjs/umd) e dependências externas. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Configuração do modo de biblioteca do Vite”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Configuração do modo de biblioteca do Vite
- Declarações TypeScript para bibliotecas de componentes
- Tree-shaking e importação automática
- Publicação no npm e versionamento semântico