Vue Academy · Lección

Publicación y tipado de plugins de Vue

Estructura del paquete, ampliación de ComponentCustomProperties con TypeScript y distribución en npm

Lección 4 de 413 pasos

Publicación y tipado de plugins de Vue es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

Empaquetar un plugin para npm

Para compartir un plugin de Vue, publíquelo como un paquete de npm. El paquete debe declarar las dependencias correctas, incluir una compilación adecuada y los tipos de TypeScript, y publicarse correctamente. Esta lección cubre cada paso.

peerDependencies para Vue

Declare Vue como una peerDependency, no como una dependencia normal. Esto garantiza que la aplicación anfitriona proporcione Vue y evita incluir dos copias de Vue en un mismo bundle, lo que rompe la reactividad.

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

Modo de biblioteca de Vite

Compile el paquete con el modo de biblioteca de Vite. Configure build.lib con la entrada, el nombre y los formatos de salida (ES + UMD), y marque Vue como externa para que no se incluya en el bundle.

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']
    }
  }
})

Externalizar Vue en rollupOptions

Marque vue como externa y asígnela a un global para la compilación UMD, de modo que se utilice la instancia de Vue del consumidor.

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

Generar declaraciones de tipos

Incluya archivos .d.ts para que los consumidores obtengan autocompletado y comprobación de tipos. Use vite-plugin-dts para emitir las declaraciones durante la compilación de la biblioteca.

import dts from 'vite-plugin-dts'

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

Mapa de exports de package.json

Dirija a los consumidores a los archivos correctos mediante el campo exports, exponiendo la compilación ESM y las declaraciones de tipos. Establezca type: module para paquetes orientados principalmente a 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"
    }
  }
}

Distribuir la ampliación de tipos

Si su plugin añade propiedades globales, como this.$toast, incluya la ampliación de ComponentCustomProperties en los tipos publicados para que los editores de los consumidores la reconozcan automáticamente.

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

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

export {}

El punto de entrada público

La entrada src/index.ts debe exportar el plugin como valor predeterminado, además de cualquier composable, clave y tipo que necesiten los consumidores.

import ToastPlugin from './plugin'
export default ToastPlugin

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

El campo files

Use el campo files para publicar únicamente el resultado de la compilación, mantener pequeño el paquete y excluir el código fuente y la configuración.

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

Publicar con provenance

Publique en npm con provenance, que vincula criptográficamente el paquete con la compilación de CI y el commit del código fuente. Ejecute la publicación desde una CI de confianza, como GitHub Actions, con los permisos adecuados.

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

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

Lista de comprobación previa a la publicación

Antes de publicar, verifique que Vue sea una dependencia externa, que dist contenga ESM y tipos, que exports se resuelva correctamente, que se haya incrementado la versión y que una ejecución de prueba tenga el resultado esperado.

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

# verify the tarball contents
npm pack

Comprobación rápida

Compruebe su comprensión de la publicación de plugins de Vue.

Responde en la lección interactiva

Resumen

Ha aprendido a publicar plugins y a añadirles tipos:

Declare Vue como peerDependency para evitar copias duplicadas de Vue
Compile con el modo de biblioteca de Vite y marque Vue como externa
Emita archivos .d.ts (vite-plugin-dts) e incluya la ampliación de tipos
Configure exports, files y type: module
Publique con --provenance desde una CI de confianza

Gratis para empezar

Aprende HTML con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos: 42
Lecciones: 156

Empezar a aprender gratis Ver el curso completo

Preguntas frecuentes

¿La lección «Publicación y tipado de plugins de Vue» es gratis?

Sí — el texto completo de «Publicación y tipado de plugins de Vue» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Publicación y tipado de plugins de Vue»?

Estructura del paquete, ampliación de ComponentCustomProperties con TypeScript y distribución en npm Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Publicación y tipado de plugins de Vue»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Arquitectura de plugins y app.use()
Propiedades globales y provide/inject en plugins
Ejemplo de plugin de notificaciones y toasts
Publicación y tipado de plugins de Vue

← Volver a Vue Academy