Vue Academy · Ders

Vue Eklentilerini Yayınlama ve Türlendirme

Paket yapısı, ComponentCustomProperties için TypeScript genişletmesi ve npm dağıtımı.

Vue Eklentilerini Yayınlama ve Türlendirme, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Bir Eklentiyi npm için Paketleme

Bir Vue eklentisini paylaşmak için onu bir npm paketi olarak yayımlarsınız. Paket doğru bağımlılıkları bildirmeli, uygun bir derleme içermeli, TypeScript türlerini taşımalı ve doğru şekilde yayımlanmalıdır. Bu derste her adım ele alınır.

Vue için peerDependencies

Vue'yu normal bir bağımlılık olarak değil, peerDependency olarak listeleyin. Böylece ana uygulama Vue'yu sağlar ve aynı pakette iki Vue kopyasının bulunması önlenir (bu durum reaktiviteyi bozar).

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

Vite Kitaplık Modu

Paketi Vite'ın kitaplık modu ile derleyin. Giriş noktası, ad ve çıktı biçimlerini (ES + UMD) içerecek şekilde build.lib yapılandırmasını yapın ve Vue'yu pakete dahil edilmemesi için harici olarak işaretleyin.

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

rollupOptions içinde Vue'yu Harici Hâle Getirme

vue öğesini harici olarak işaretleyin ve UMD derlemesi için bir globale eşleyin; böylece kullanıcının Vue sürümü kullanılır.

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

Tür Bildirimleri Oluşturma

Kullanıcıların otomatik tamamlama ve tür denetimi alabilmesi için .d.ts dosyalarını pakete ekleyin. Kitaplık derlemesi sırasında bildirimler oluşturmak için vite-plugin-dts kullanın.

import dts from 'vite-plugin-dts'

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

package.json exports Haritası

exports alanıyla kullanıcıları doğru dosyalara yönlendirin ve ESM derlemesi ile tür bildirimlerini dışa açın. ESM öncelikli paketler için type: module ayarlayın.

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

Tür Genişletmesini Pakete Ekleme

Eklentiniz global özellikler ekliyorsa (örneğin this.$toast), kullanıcıların düzenleyicilerinin bunları otomatik olarak tanıması için ComponentCustomProperties genişletmesini yayımlanan türlerinize dahil edin.

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

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

export {}

Genel Giriş Noktası

src/index.ts giriş noktası, eklentiyi varsayılan olarak ve kullanıcıların ihtiyaç duyduğu bileştirilebilir işlevleri, anahtarları ve türleri dışa aktarmalıdır.

import ToastPlugin from './plugin'
export default ToastPlugin

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

files Alanı

Yalnızca derleme çıktısının yayımlanması için files alanını kullanın; böylece paketi küçük tutup kaynak kodunu ve yapılandırmayı dışarıda bırakırsınız.

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

Köken Doğrulamasıyla Yayımlama

Paketi köken doğrulaması ile npm'e yayımlayın. Bu işlem paketi CI derlemesine ve kaynak kodu kaydına kriptografik olarak bağlar. İşlemi doğru izinlere sahip güvenilir bir CI ortamından (GitHub Actions) çalıştırın.

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

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

Yayımlama Öncesi Kontrol Listesi

Yayımlamadan önce şunları doğrulayın: Vue bir peer bağımlılığıdır, dist ESM ve türleri içerir, exports doğru şekilde çözümlenir, sürüm artırılmıştır ve deneme çalıştırması doğru görünür.

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

# verify the tarball contents
npm pack

Hızlı Kontrol

Vue eklentilerini yayımlamayı ne kadar anladığınızı sınayın.

Özet

Eklentileri yayımlamayı ve türlerini belirtmeyi öğrendiniz:

Yinelenen Vue kopyalarını önlemek için Vue'yu peerDependency olarak listeleyin
Vue'yu harici hâle getirerek Vite kitaplık modu ile derleyin
.d.ts (vite-plugin-dts) oluşturun ve tür genişletmesini pakete ekleyin
exports, files ve type: module yapılandırmalarını yapın
Güvenilir CI ortamından --provenance ile yayımlayın

Sıkça Sorulan Sorular

“Vue Eklentilerini Yayınlama ve Türlendirme” dersi ücretsiz mi?

Evet — “Vue Eklentilerini Yayınlama ve Türlendirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Vue Eklentilerini Yayınlama ve Türlendirme” dersinde ne öğreneceğim?

Paket yapısı, ComponentCustomProperties için TypeScript genişletmesi ve npm dağıtımı. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Vue Eklentilerini Yayınlama ve Türlendirme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Eklenti Mimarisi ve app.use()
Eklentilerde Genel Özellikler ve provide/inject
Bildirim ve Toast Eklentisi Örneği
Vue Eklentilerini Yayınlama ve Türlendirme

← Vue Academy Sayfasına Dön