Vue Academy · Pelajaran

Mempublikasikan dan Mengetik Plugin Vue

Struktur package, augmentasi TypeScript pada ComponentCustomProperties, serta distribusi npm.

Pelajaran 4 dari 413 langkah

Mempublikasikan dan Mengetik Plugin Vue adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Mengemas Pengaya untuk npm

Untuk membagikan pengaya Vue, publikasikan pengaya tersebut sebagai paket npm. Paket harus mendeklarasikan dependensi yang tepat, menyertakan hasil build yang benar, menyertakan tipe TypeScript, dan dipublikasikan dengan benar. Pelajaran ini membahas setiap langkahnya.

peerDependencies untuk Vue

Daftarkan Vue sebagai peerDependency, bukan dependensi biasa. Dengan begitu, aplikasi induk menyediakan Vue dan terhindar dari dua salinan Vue dalam satu bundel (yang merusak reaktivitas).

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

Mode Pustaka Vite

Bangun paket dengan mode pustaka Vite. Konfigurasikan build.lib dengan titik masuk, nama, dan format keluaran (ES + UMD), lalu jadikan Vue sebagai eksternal agar tidak disertakan dalam bundel.

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

Menjadikan Vue Eksternal dalam rollupOptions

Tandai vue sebagai eksternal dan petakan ke global untuk build UMD, sehingga Vue milik pengguna paket yang digunakan.

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

Menghasilkan Deklarasi Tipe

Sertakan berkas .d.ts agar pengguna memperoleh pelengkapan otomatis dan pemeriksaan tipe. Gunakan vite-plugin-dts untuk menghasilkan deklarasi selama build pustaka.

import dts from 'vite-plugin-dts'

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

Peta Ekspor package.json

Arahkan pengguna ke berkas yang tepat dengan bidang exports, dengan mengekspos build ESM dan deklarasi tipe. Tetapkan type: module untuk paket yang mengutamakan 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"
    }
  }
}

Menyertakan Augmentasi Tipe

Jika pengaya Anda menambahkan properti global (seperti this.$toast), sertakan augmentasi ComponentCustomProperties dalam tipe yang dipublikasikan agar editor pengguna mengenalinya secara otomatis.

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

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

export {}

Titik Masuk Publik

Titik masuk src/index.ts harus mengekspor pengaya sebagai default, serta komposabel, kunci, dan tipe apa pun yang dibutuhkan pengguna.

import ToastPlugin from './plugin'
export default ToastPlugin

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

Bidang files

Gunakan bidang files untuk hanya memublikasikan hasil build, sehingga paket tetap kecil dan kode sumber serta konfigurasi tidak disertakan.

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

Mempublikasikan dengan Provenans

Publikasikan ke npm dengan provenans, yang mengaitkan paket secara kriptografis dengan build CI dan commit sumber. Jalankan dari CI tepercaya (GitHub Actions) dengan izin yang tepat.

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

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

Daftar Periksa Sebelum Publikasi

Sebelum memublikasikan, verifikasi bahwa: Vue merupakan dependensi rekan, dist berisi ESM dan tipe, exports terselesaikan dengan benar, versi telah dinaikkan, dan simulasi publikasi terlihat benar.

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

# verify the tarball contents
npm pack

Pemeriksaan Cepat

Uji pemahaman Anda tentang publikasi pengaya Vue.

Jawab di pelajaran interaktif

Rangkuman

Anda telah mempelajari publikasi dan pemberian tipe pada pengaya:

Daftarkan Vue sebagai peerDependency untuk menghindari salinan Vue ganda
Bangun dengan mode pustaka Vite dan jadikan Vue eksternal
Hasilkan .d.ts (vite-plugin-dts) dan sertakan augmentasi tipe
Konfigurasikan exports, files, dan type: module
Publikasikan dengan --provenance dari CI tepercaya

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 42
Pelajaran: 156

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mempublikasikan dan Mengetik Plugin Vue” gratis?

Ya — teks lengkap “Mempublikasikan dan Mengetik Plugin Vue” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mempublikasikan dan Mengetik Plugin Vue”?

Struktur package, augmentasi TypeScript pada ComponentCustomProperties, serta distribusi npm. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Mempublikasikan dan Mengetik Plugin Vue” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Arsitektur Plugin dan app.use()
Properti Global dan provide/inject dalam Plugin
Contoh Plugin Notifikasi dan Toast
Mempublikasikan dan Mengetik Plugin Vue

← Kembali ke Vue Academy