0Pricing
Vue Academy · Leçon

Publier et typer des plugins Vue

Structure du paquet, extension TypeScript de ComponentCustomProperties et distribution npm

Publier et typer des plugins Vue est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Empaqueter une extension pour npm

Pour partager une extension Vue, vous la publiez sous forme de paquet npm. Le paquet doit déclarer les bonnes dépendances, fournir une compilation correcte, inclure les types TypeScript et être publié correctement. Cette leçon couvre chaque étape.

peerDependencies pour Vue

Déclarez Vue comme une peerDependency, et non comme une dépendance ordinaire. Ainsi, l’application hôte fournit Vue, ce qui évite d’avoir deux copies de Vue dans un même paquet (ce qui romprait la réactivité).

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

Mode bibliothèque de Vite

Compilez le paquet avec le mode bibliothèque de Vite. Configurez build.lib avec le point d’entrée, le nom et les formats de sortie (ES + UMD), puis externalisez Vue afin qu’elle ne soit pas incluse dans le paquet.

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

Externaliser Vue dans rollupOptions

Marquez vue comme externe et associez-le à une valeur globale pour la compilation UMD, afin d’utiliser le Vue du consommateur.

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

Générer des déclarations de types

Fournissez des fichiers .d.ts afin que les utilisateurs bénéficient de la complétion automatique et de la vérification des types. Utilisez vite-plugin-dts pour produire les déclarations pendant la compilation de la bibliothèque.

import dts from 'vite-plugin-dts'

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

Carte des exportations de package.json

Dirigez les utilisateurs vers les bons fichiers avec le champ exports, en exposant la compilation ESM et les déclarations de types. Définissez type: module pour les paquets axés sur 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"
    }
  }
}

Publier l’augmentation de types

Si votre extension ajoute des propriétés globales, comme this.$toast, incluez l’augmentation ComponentCustomProperties dans les types publiés afin que les éditeurs des utilisateurs la reconnaissent automatiquement.

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

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

export {}

Le point d’entrée public

Le point d’entrée src/index.ts doit exporter l’extension par défaut, ainsi que toutes les fonctions composables, clés et types dont les utilisateurs ont besoin.

import ToastPlugin from './plugin'
export default ToastPlugin

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

Le champ des fichiers

Utilisez le champ files pour ne publier que le résultat de la compilation, afin de garder le paquet léger et d’exclure le code source et la configuration.

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

Publier avec une provenance

Publiez sur npm avec une provenance, qui relie cryptographiquement le paquet à la compilation CI et à la validation du code source. Exécutez cette opération depuis une CI de confiance (GitHub Actions) disposant des autorisations appropriées.

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

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

Liste de contrôle avant publication

Avant de publier, vérifiez que Vue est une dépendance homologue, que dist contient ESM et les types, que exports se résout correctement, que la version a été augmentée et qu’une simulation donne le résultat attendu.

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

# verify the tarball contents
npm pack

Vérification rapide

Vérifiez votre compréhension de la publication des extensions Vue.

Récapitulatif

Vous avez appris à publier et à typer des extensions :

  • Déclarez Vue comme une peerDependency pour éviter les copies en double de Vue
  • Compilez avec le mode bibliothèque de Vite en externalisant Vue
  • Produisez .d.ts (vite-plugin-dts) et publiez l’augmentation de types
  • Configurez exports, files et type: module
  • Publiez avec --provenance depuis une CI de confiance

Questions Fréquemment Posées

La leçon « Publier et typer des plugins Vue » est-elle gratuite ?

Oui — le texte complet de « Publier et typer des plugins Vue » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Publier et typer des plugins Vue » ?

Structure du paquet, extension TypeScript de ComponentCustomProperties et distribution npm Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Publier et typer des plugins Vue » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Architecture des plugins et app.use()
  2. Propriétés globales et provide/inject dans les plugins
  3. Exemple de plugin de notifications et de toasts
  4. Publier et typer des plugins Vue
← Retour à Vue Academy