Vue Academy · Ders

Vite Kütüphane Modu Yapılandırması

vite.config.ts içinde build.lib, giriş noktası, biçimler (es/cjs/umd) ve harici bağımlılıklar.

Vite Kütüphane Modu Yapılandırması, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. 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.

Kütüphane Modu

Vite'ın kütüphane modu, web sitesi olarak çalıştırılmak yerine diğer uygulamalar tarafından içe aktarılması amaçlanan bir paket oluşturur. Bu modu vite.config.ts içindeki build.lib altında yapılandırırsınız.

Giriş Noktası

entry dosyası, kütüphanenizin herkese açık yüzeyidir; kullanıcıların erişmesi gereken her bileşeni ve yardımcı programı yeniden dışa aktarır.

// src/index.ts
export { default as MyButton } from "./MyButton.vue";
export { default as MyCard } from "./MyCard.vue";

build.lib Yapılandırması

build.lib.entry değerini bu dosyaya yönlendirin ve kütüphaneye genel bir name verin (bu ad UMD derlemesinde kullanılır).

import { defineConfig } from "vite";
import { resolve } from "path";

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, "src/index.ts"),
      name: "MyUiLib"
    }
  }
});

Biçimler Dizisi

formats, output modül biçimlerini seçer. Modern kütüphaneler için ["es", "cjs"], ESM paketleyicileri ve Node/CommonJS kullanıcıları için yeterlidir.

lib: {
  entry: resolve(__dirname, "src/index.ts"),
  name: "MyUiLib",
  formats: ["es", "cjs"]
}

fileName İşlevi

fileName, biçimi alan bir işlev olabilir; böylece her output için farklı adlar oluşturabilirsiniz.

lib: {
  // ...
  fileName: (format) => "my-ui-lib." + format + ".js"
}

Vue'yu Neden Harici Tutmalısınız

Vue'yu kütüphanenizin içine paketlememelisiniz; kütüphaneyi kullanan uygulamada zaten bulunur. Paketlemek Vue'nun iki kopyasını oluşturur ve tepkiselliği bozar. Vue'yu harici olarak işaretleyin.

rollupOptions.external

build.rollupOptions altında external listesine vue ekleyin; böylece Vue output içine satır içi olarak yerleştirilmek yerine içe aktarma olarak kalır.

build: {
  lib: { /* ... */ },
  rollupOptions: {
    external: ["vue"]
  }
}

UMD için output.globals

Bir UMD derlemesi de oluşturursanız tarayıcının her harici bağımlılık için genel değişken adını bilmesi gerekir. vue değerini genel Vue adına eşleyin.

rollupOptions: {
  external: ["vue"],
  output: {
    globals: { vue: "Vue" }
  }
}

Eş Düzey Bağımlılıkları Harici Tutma

Kütüphaneyi kullanan uygulamanın zaten yüklediği simge kümeleri ve yardımcı kütüphaneler gibi tüm eş düzey bağımlılıkları da paketlemek yerine harici tutmalısınız.

external: ["vue", "vue-router", "@vueuse/core"]

Derleme

Yapılandırılan biçimleri dist içine oluşturmak için derlemeyi çalıştırın. Aynı eklenti işlem hattı (vue, vueJsx) kaynak dosyalarına uygulanmaya devam eder.

npm run build
# dist/my-ui-lib.es.js, dist/my-ui-lib.cjs.js

CSS'yi Ayrı Tutma

Bileşen stilleri, kütüphaneyi kullananların içe aktaracağı ayrı bir CSS dosyası olarak oluşturulabilir. Böylece JS paketi yalın kalır ve stil eklemelerini onlar denetleyebilir.

// consumer side
import "my-ui-lib/dist/style.css";

Hızlı Kontrol

Bir Vue kütüphanesi oluştururken vue neden rollupOptions.external listesine eklenir?

Özet

Vite kütüphane modu, build.lib altında bir entry varil dosyası, bir name, bir formats dizisi (es ve cjs) ve bir fileName işleviyle yapılandırılır. vue'yu (ve eş düzey bağımlılıkları) rollupOptions.external üzerinden harici tutun ve tüketicinin Vue'yu sağlaması için UMD genel değişkenlerini output.globals ile eşleyin.

Sıkça Sorulan Sorular

“Vite Kütüphane Modu Yapılandırması” dersi ücretsiz mi?

Evet — “Vite Kütüphane Modu Yapılandırması” 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.

“Vite Kütüphane Modu Yapılandırması” dersinde ne öğreneceğim?

vite.config.ts içinde build.lib, giriş noktası, biçimler (es/cjs/umd) ve harici bağımlılıklar. 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 1. dersidir.

“Vite Kütüphane Modu Yapılandırması” 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

Vite Kütüphane Modu Yapılandırması
Bileşen Kütüphaneleri için TypeScript Bildirimleri
Ağaç Sarsma ve Otomatik İçe Aktarma
npm'ye Yayınlama ve Anlamsal Sürümleme

← Vue Academy Sayfasına Dön