Vue Academy · Aula

Publicação e tipagem de plugins Vue

Estrutura do pacote, extensão TypeScript de ComponentCustomProperties e distribuição pelo npm.

Aula 4 de 413 etapas

Publicação e tipagem de plugins Vue é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 4 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.

Empacotando um plug-in para npm

Para compartilhar um plug-in do Vue, publique-o como um pacote npm. O pacote deve declarar as dependências corretas, incluir uma compilação adequada e tipos do TypeScript, além de ser publicado corretamente. Esta lição aborda cada etapa.

peerDependencies para Vue

Liste o Vue como uma peerDependency, não como uma dependência regular. Isso garante que a aplicação hospedeira forneça o Vue, evitando duas cópias do Vue no mesmo pacote (o que interrompe a reatividade).

{
  "name": "vue-toast-kit",
  "peerDependencies": {
    "vue": "^3.4.0"
  },
  "devDependencies": {
    "vue": "^3.4.0"
  }
}

Modo de biblioteca do Vite

Compile o pacote usando o modo de biblioteca do Vite. Configure build.lib com a entrada, o nome e os formatos de saída (ES + UMD), e marque o Vue como externo para que ele não seja incluído no pacote.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'VueToastKit',
      fileName: 'index',
      formats: ['es', 'umd']
    }
  }
})

Tornando o Vue externo em rollupOptions

Marque vue como externo e associe-o a uma variável global na compilação UMD, para que seja usado o Vue do consumidor.

build: {
  lib: { /* ... */ },
  rollupOptions: {
    external: ['vue'],
    output: {
      globals: { vue: 'Vue' }
    }
  }
}

Gerando declarações de tipos

Distribua arquivos .d.ts para que os consumidores tenham preenchimento automático e verificação de tipos. Use vite-plugin-dts para emitir as declarações durante a compilação da biblioteca.

import dts from 'vite-plugin-dts'

export default defineConfig({
  plugins: [
    vue(),
    dts({ insertTypesEntry: true })
  ]
})

Mapa de exportações de package.json

Direcione os consumidores aos arquivos corretos usando o campo exports, expondo a compilação ESM e as declarações de tipos. Defina type: module para pacotes que priorizam ESM.

{
  "type": "module",
  "main": "./dist/index.umd.cjs",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.js",
      "require": "./dist/index.umd.cjs"
    }
  }
}

Distribuindo a extensão de tipos

Se o seu plug-in adicionar propriedades globais (como this.$toast), inclua a extensão ComponentCustomProperties nos tipos publicados para que os editores dos consumidores a reconheçam automaticamente.

// src/types.d.ts (included in the build)
import type { ToastService } from './toast'

declare module 'vue' {
  interface ComponentCustomProperties {
    $toast: ToastService
  }
}

export {}

O ponto de entrada público

A entrada src/index.ts deve exportar o plug-in como padrão, além de quaisquer composições reutilizáveis, chaves e tipos de que os consumidores precisem.

import ToastPlugin from './plugin'
export default ToastPlugin

export { useToast } from './composable'
export { toastKey } from './toast'
export type { ToastService, Toast } from './toast'

O campo files

Use o campo files para publicar somente o resultado da compilação, mantendo o pacote pequeno e excluindo o código-fonte e a configuração.

{
  "files": ["dist"],
  "sideEffects": false
}

Publicando com proveniência

Publique no npm com proveniência, que vincula criptograficamente o pacote à compilação de CI e ao registro da alteração no código-fonte. Execute a publicação em uma CI confiável (GitHub Actions) com as permissões adequadas.

# in CI (GitHub Actions)
npm publish --provenance --access public

# package.json can also set:
# "publishConfig": { "provenance": true }

Lista de verificação pré-publicação

Antes de publicar, verifique: o Vue é uma dependência de pares, o dist contém ESM + tipos, exports é resolvido corretamente, a versão foi incrementada e uma simulação apresenta o resultado esperado.

# inspect what will be published
npm publish --dry-run

# verify the tarball contents
npm pack

Verificação rápida

Teste sua compreensão da publicação de plug-ins do Vue.

Responda na aula interativa

Recapitulação

Você aprendeu a publicar e tipificar plug-ins:

Liste o Vue como uma peerDependency para evitar cópias duplicadas do Vue
Compile usando o modo de biblioteca do Vite, tornando o Vue externo
Emita .d.ts (vite-plugin-dts) e distribua a extensão de tipos
Configure exports, files e type: module
Publique com --provenance a partir de uma CI confiável

Grátis para começar

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

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Publicação e tipagem de plugins Vue” é grátis?

Sim — o texto completo de “Publicação e tipagem de plugins Vue” é 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 “Publicação e tipagem de plugins Vue”?

Estrutura do pacote, extensão TypeScript de ComponentCustomProperties e distribuição pelo npm. 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 4 de 4.

Quanto tempo leva a aula “Publicação e tipagem de plugins Vue”?

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

Arquitetura de plugins e app.use()
Propriedades globais e provide/inject em plugins
Exemplo de plugin de notificações e toasts
Publicação e tipagem de plugins Vue

← Voltar para Vue Academy