Vue Academy · Lekcja

Publikowanie i typowanie wtyczek Vue

Struktura pakietu, rozszerzanie ComponentCustomProperties w TypeScript oraz dystrybucja w npm.

Publikowanie i typowanie wtyczek Vue to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Pakowanie wtyczki dla npm

Aby udostępnić wtyczkę Vue, należy opublikować ją jako pakiet npm. Pakiet musi deklarować odpowiednie zależności, zawierać prawidłowy build i typy TypeScript oraz zostać poprawnie opublikowany. W tej lekcji omówiono każdy z tych etapów.

peerDependencies dla Vue

Vue należy umieścić jako peerDependency, a nie zwykłą zależność. Dzięki temu aplikacja hostująca dostarcza Vue, co pozwala uniknąć dwóch kopii Vue w jednym bundlu (które psują reaktywność).

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

Tryb biblioteki Vite

Pakiet należy budować w trybie biblioteki Vite. Należy skonfigurować build.lib, podając punkt wejścia, nazwę i formaty wyjściowe (ES + UMD), oraz oznaczyć Vue jako zewnętrzną zależność, aby nie była dołączana do bundla.

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

Externalizing Vue w rollupOptions

Należy oznaczyć vue jako zewnętrzną zależność i przypisać ją do globalnej zmiennej na potrzeby kompilacji UMD, aby używany był Vue z aplikacji konsumenta.

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

Generowanie deklaracji typów

Należy dostarczyć pliki .d.ts, aby użytkownicy otrzymali autouzupełnianie i sprawdzanie typów. Do generowania deklaracji podczas budowania biblioteki należy użyć vite-plugin-dts.

import dts from 'vite-plugin-dts'

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

Mapa exports w package.json

Pole exports powinno kierować użytkowników do właściwych plików, udostępniając build ESM i deklaracje typów. Dla pakietów zorientowanych przede wszystkim na ESM należy ustawić type: module.

{
  "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"
    }
  }
}

Publikowanie rozszerzenia typów

Jeśli wtyczka dodaje właściwości globalne, takie jak this.$toast, należy dołączyć rozszerzenie ComponentCustomProperties do publikowanych typów, aby edytory użytkowników rozpoznawały je automatycznie.

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

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

export {}

Publiczny punkt wejścia

Punkt wejścia src/index.ts powinien eksportować wtyczkę jako wartość domyślną oraz wszystkie composables, klucze i typy potrzebne użytkownikom.

import ToastPlugin from './plugin'
export default ToastPlugin

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

Pole files

Należy użyć pola files, aby publikować wyłącznie wynik kompilacji, zachowując niewielki rozmiar pakietu i wykluczając źródła oraz konfigurację.

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

Publikowanie z provenance

Pakiet należy publikować w npm z funkcją provenance, która kryptograficznie łączy pakiet z kompilacją CI i zatwierdzeniem w repozytorium źródłowym. Publikację należy uruchomić z zaufanego środowiska CI (GitHub Actions) z odpowiednimi uprawnieniami.

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

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

Lista kontrolna przed publikacją

Przed publikacją należy sprawdzić, czy Vue jest zależnością peer, katalog dist zawiera ESM i typy, exports działa poprawnie, numer wersji został zwiększony, a wynik próbnej publikacji wygląda prawidłowo.

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

# verify the tarball contents
npm pack

Szybkie sprawdzenie

Proszę sprawdzić zrozumienie publikowania wtyczek Vue.

Podsumowanie

W tej lekcji poznali Państwo publikowanie i typowanie wtyczek:

Vue należy wymienić jako peerDependency, aby uniknąć zduplikowanych kopii Vue
Należy budować w trybie biblioteki Vite, oznaczając Vue jako zewnętrzną zależność
Należy generować pliki .d.ts (vite-plugin-dts) i dostarczać rozszerzenie typów
Należy skonfigurować pola exports, files oraz type: module
Należy publikować z opcją --provenance z zaufanego środowiska CI

Często zadawane pytania

Czy lekcja „Publikowanie i typowanie wtyczek Vue” jest bezpłatna?

Tak — pełny tekst „Publikowanie i typowanie wtyczek Vue” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Publikowanie i typowanie wtyczek Vue”?

Struktura pakietu, rozszerzanie ComponentCustomProperties w TypeScript oraz dystrybucja w npm. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Publikowanie i typowanie wtyczek Vue”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Architektura wtyczek i app.use()
Właściwości globalne oraz provide/inject we wtyczkach
Przykład wtyczki powiadomień i toastów
Publikowanie i typowanie wtyczek Vue

← Powrót do Vue Academy