Vue Academy · Ders

Vite Federation Eklentisi

@originjs/vite-plugin-federation, üretici/tüketici kurulumu ve uzak bileşenleri dinamik içe aktarma.

Vite Federation Eklentisi, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 3. 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.

Vite'ta Federasyon

Module Federation Webpack'te başladı, ancak birçok Vue uygulaması Vite kullanır. Topluluk eklentisi @originjs/vite-plugin-federation, federasyonu Vite tabanlı üretici ve tüketici uygulamalarına getirir.

Eklentiyi Kurma

Eklentiyi hem üretici uygulamaya (uzak uygulamaya) hem de tüketici uygulamaya (ana uygulamaya) ekleyin.

// terminal
// npm install -D @originjs/vite-plugin-federation

Üretici Yapılandırması

Üreticide (uzak uygulamada) vite.config.ts dosyasına, bir name ve herkese açık adları yerel dosyalarla eşleyen bir exposes nesnesiyle birlikte federation ekleyin.

import federation from "@originjs/vite-plugin-federation"

export default {
  plugins: [
    federation({
      name: "remote_app",
      filename: "remoteEntry.js",
      exposes: {
        "./Widget": "./src/components/Widget.vue",
      },
    }),
  ],
}

Federasyon için Derleme Ayarları

Eklenti, modern bir derleme hedefi ve bazı kurulumlarda modüllerin küçültülmesinin devre dışı bırakılmasını gerektirir. Dinamik içe aktarmaların ve üst düzey await ifadelerinin çalışması için derleme hedefini ayarlayın.

export default {
  plugins: [federation({ /* ... */ })],
  build: {
    target: "esnext",
  },
}

exposes Nesnesi

Webpack'te olduğu gibi anahtarlar, tüketicilerin kullandığı herkese açık içe aktarma yollarıdır; değerler yerel kaynak dosyalarının yollarıdır. Yalnızca diğer ekiplerin ihtiyaç duyduğu şeyleri dışa açın.

exposes: {
  "./Widget": "./src/components/Widget.vue",
  "./useCart": "./src/composables/useCart.ts",
}

Tüketici Yapılandırması

Tüketicide (ana uygulamada), bir takma adı uzağın remoteEntry.js URL'siyle eşleyen bir remotes nesnesiyle birlikte federation ekleyin.

import federation from "@originjs/vite-plugin-federation"

export default {
  plugins: [
    federation({
      name: "host_app",
      remotes: {
        remote_app: "https://remote.example.com/assets/remoteEntry.js",
      },
    }),
  ],
}

remotes URL'si

Değer, oluşturulmuş remoteEntry.js dosyasının tam URL'sidir. Geliştirme sırasında uzağın önizleme sunucusunu, üretimde ise dağıtılmış CDN yolunu gösterin.

remotes: {
  remote_app: "https://remote.example.com/assets/remoteEntry.js",
}

Paylaşılan Bağımlılıklar

Ana uygulamanın ve uzağın ortak kitaplıkların tek bir kopyasını kullanması için bir shared dizisi ekleyin. vue listelemek, tek bir Vue örneğini korumak için gereklidir.

federation({
  name: "host_app",
  remotes: { /* ... */ },
  shared: ["vue", "pinia"],
})

Uzak Bir Component Kullanma

Takma ad ile dışa açılan adı birlikte kullanarak içe aktarın. Kod çalışma zamanında getirildiği için defineAsyncComponent ile dinamik içe aktarma kullanın.

import { defineAsyncComponent } from "vue"

const Widget = defineAsyncComponent(() =>
  import("remote_app/Widget")
)

Uzak Uygulamalar için Tür Bildirimleri

TypeScript, uzak modüllerin türlerini bilmez. İçe aktarmaların tür denetiminden geçmesi için bunları bildirin.

// remotes.d.ts
declare module "remote_app/Widget" {
  import type { DefineComponent } from "vue"
  const component: DefineComponent
  export default component
}

Uzak Uygulamalar için Dev Değil, Önizleme

Federasyon, Vite geliştirme sunucusunun aynı şekilde üretmediği derlenmiş remoteEntry.js dosyasına ihtiyaç duyar. Uzağı derleyin ve ana uygulamanın onu getirebilmesi için vite preview ile sunun.

// remote terminal
// vite build && vite preview --port 5001

Kısa Kontrol

Vite federasyon eklentisini anlayıp anlamadığınızı kontrol edin.

Özet

Vite federasyonunu öğrendiniz:

@originjs/vite-plugin-federation, Module Federation'ı Vite'a getirir.
Üretici yapılandırması name ile bir exposes nesnesi (herkese açık ad ile yerel dosya eşlemesi) tanımlar.
Tüketici yapılandırması, bir takma adı uzağın remoteEntry.js URL'siyle eşleyen bir remotes nesnesi tanımlar.
Paylaşılan bağımlılıkları ( vue dahil) shared içinde listeleyin.
Dinamik import("alias/Module") ile kullanın; uzağı derleyip vite preview ile sunun.

Sıkça Sorulan Sorular

“Vite Federation Eklentisi” dersi ücretsiz mi?

Evet — “Vite Federation Eklentisi” 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 Federation Eklentisi” dersinde ne öğreneceğim?

@originjs/vite-plugin-federation, üretici/tüketici kurulumu ve uzak bileşenleri dinamik içe aktarma. 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 3. dersidir.

“Vite Federation Eklentisi” 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

Mikro Ön Uç Mimarisinin İlkeleri
Vue ile Webpack Module Federation
Vite Federation Eklentisi
Mikro Ön Uçlar Arasında Paylaşılan Durum

← Vue Academy Sayfasına Dön