Vue Academy · Lektion

Publicera och typa Vue-plugins

Paketstruktur, TypeScript-augmentation av ComponentCustomProperties och distribution via npm.

Lektion 4 av 413 steg

Publicera och typa Vue-plugins är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.

Paketera ett plugin för npm

För att dela ett Vue-plugin publicerar ni det som ett npm-paket. Paketet måste ange rätt beroenden, innehålla ett korrekt bygge och TypeScript-typer samt publiceras på rätt sätt. Den här lektionen går igenom varje steg.

peerDependencies för Vue

Ange Vue som en peerDependency, inte som ett vanligt beroende. Då tillhandahåller värdappen Vue, vilket förhindrar att två kopior av Vue hamnar i samma bundle och förstör reaktiviteten.

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

Vites biblioteksläge

Bygg paketet med Vites biblioteksläge. Konfigurera build.lib med entry, namn och utdataformat, ES + UMD, och gör Vue extern så att det inte paketeras.

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

Exkludera Vue i rollupOptions

Markera vue som externt och mappa det till en global variabel för UMD-bygget, så att konsumentens Vue används.

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

Generera typdeklarationer

Skicka med .d.ts-filer så att användare får autokomplettering och typkontroll. Använd vite-plugin-dts för att generera deklarationerna under biblioteksbygget.

import dts from 'vite-plugin-dts'

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

Mappningen exports i package.json

Dirigera användare till rätt filer med fältet exports genom att exponera ESM-bygget och typdeklarationerna. Ange type: module för paket som prioriterar 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"
    }
  }
}

Skicka med typutvidgning

Om pluginet lägger till globala egenskaper, till exempel this.$toast, ska ni inkludera utvidgningen av ComponentCustomProperties i de publicerade typerna så att användarnas editorer känner igen den automatiskt.

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

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

export {}

Den publika ingångspunkten

Ingångspunkten src/index.ts ska exportera pluginet som standard samt alla composables, nycklar och typer som användarna behöver.

import ToastPlugin from './plugin'
export default ToastPlugin

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

Fältet files

Använd fältet files för att endast publicera utdata från bygget. Då hålls paketet litet och källkod samt konfiguration exkluderas.

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

Publicera med provenance

Publicera till npm med provenance, som kryptografiskt kopplar paketet till CI-bygget och källkodens commit. Kör publiceringen från en betrodd CI-miljö, till exempel GitHub Actions, med rätt behörigheter.

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

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

Checklista före publicering

Kontrollera före publicering att Vue är ett peer-beroende, att dist innehåller ESM och typer, att exports löses korrekt, att versionen har höjts och att en provkörning ser korrekt ut.

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

# verify the tarball contents
npm pack

Snabbtest

Testa era kunskaper om publicering av Vue-plugin.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni lärde er hur plugin publiceras och typas:

Ange Vue som en peerDependency för att undvika dubbla Vue-kopior
Bygg med Vites biblioteksläge och gör Vue extern
Generera .d.ts med vite-plugin-dts och skicka med typutvidgning
Konfigurera exports, files och type: module
Publicera med --provenance från en betrodd CI-miljö

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 42
Lektioner: 156

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Publicera och typa Vue-plugins” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Publicera och typa Vue-plugins”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Publicera och typa Vue-plugins”?

Paketstruktur, TypeScript-augmentation av ComponentCustomProperties och distribution via npm. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Vue Academy?

Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Publicera och typa Vue-plugins”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Vue Academy-lektionen?

Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Pluginarkitektur och app.use()
Globala egenskaper och provide/inject i plugins
Exempel på notis- och toast-plugin
Publicera och typa Vue-plugins

← Tillbaka till Vue Academy