0Pricing
Vue Academy · Ders

Vue ile Webpack Module Federation

ModuleFederationPlugin, exposes, remotes, paylaşılan bağımlılıklar ve uzak bileşen yükleme.

Vue ile Webpack Module Federation, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 2. 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.

Webpack'te Module Federation

Webpack 5, Module Federation'ı yerleşik olarak sunar. Bir derlemenin modülleri diğer derlemelere açmasını ve onlardan modülleri çalışma zamanında kullanmasını sağlar — çalışma zamanındaki mikro ön yüzlerin temelidir.

Ana ve Uzak Uygulamalar

İki rol vardır: bir uzak uygulama bileşenleri dışa açar, bir ana uygulama ise bunları kullanır. Bir uygulama her iki rolde de olabilir. Ana uygulama, bir uzağın kodunu derleme zamanında değil, çalışma zamanında HTTP üzerinden yükler.

ModuleFederationPlugin

Federasyonu, webpack plugins dizinize ModuleFederationPlugin ekleyerek yapılandırırsınız. Seçenekleri adı, neleri dışa açtığınızı, neleri kullandığınızı ve paylaşılan bağımlılıkları tanımlar.

const { ModuleFederationPlugin } = require("webpack").container

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "checkout",
    }),
  ],
}

name Seçeneği

name, bu derlemenin benzersiz genel tanımlayıcısıdır. Ana uygulamalar bir uzağa bu adla başvurur.

new ModuleFederationPlugin({
  name: "checkout",
  filename: "remoteEntry.js",
})

exposes Seçeneği (Uzak Uygulama)

Bir uzak uygulama, paylaştığı modülleri exposes içinde listeler. Anahtarlar herkese açık yollardır; değerler yerel dosya yollarıdır.

new ModuleFederationPlugin({
  name: "checkout",
  filename: "remoteEntry.js",
  exposes: {
    "./CartButton": "./src/components/CartButton.vue",
  },
})

remoteEntry Manifestosu

Bir uzak uygulama, dışa açtığı modülleri açıklayan bir remoteEntry.js bildirimi oluşturur. Ana uygulamalar, uzağın kodunu çalışma zamanında keşfedip getirmek için bu dosyayı yükler.

// host loads: https://checkout.example.com/remoteEntry.js

remotes Seçeneği (Ana Uygulama)

Bir ana uygulama, kullandığı uzak uygulamaları remotes içinde tanımlar ve yerel bir takma adı, uzağın adıyla ve remoteEntry.js URL'siyle eşler.

new ModuleFederationPlugin({
  name: "shell",
  remotes: {
    checkout: "checkout@https://checkout.example.com/remoteEntry.js",
  },
})

shared Seçeneği

shared, iki tarafın da paylaşması gereken bağımlılıkları listeler; böylece iki kopyanın yüklenmesi önlenir. Vue gibi bir çatıyı paylaşmanız gerekir; böylece tüm mikro ön yüzler tek bir örneği kullanır.

new ModuleFederationPlugin({
  name: "shell",
  remotes: { /* ... */ },
  shared: ["vue"],
})

Vue için singleton: true

Vue bir tekil örnek olmalıdır — sayfada tam olarak bir kopya bulunmalıdır. İki Vue örneği reaktiviteyi ve component kimliğini bozar. Bir sürüm gereksinimiyle onu tekil olarak işaretleyin.

shared: {
  vue: {
    singleton: true,
    requiredVersion: "^3.4.0",
  },
}

Uzak Bir Component Kullanma

Uzak modülü çalışma zamanında dinamik olarak içe aktarın. Ağ üzerinden yüklendiği için dinamik bir import() kullanın — Vue'da bu genellikle defineAsyncComponent ile sarmalanır.

import { defineAsyncComponent } from "vue"

const CartButton = defineAsyncComponent(() =>
  import("checkout/CartButton")
)

Uzağı Görüntüleme

Eşzamansız component'i şablonunuzdaki diğer component'ler gibi kullanın. Webpack, uzağın kodunu ilk görüntülemede getirir ve önbelleğe alır.

<template>
  <header>
    <CartButton />
  </header>
</template>

Kısa Kontrol

Vue ile Module Federation'ı anlayıp anlamadığınızı kontrol edin.

Özet

Webpack Module Federation'ı öğrendiniz:

  • ModuleFederationPlugin federasyonu yapılandırır; name derlemeyi tanımlar.
  • Uzak uygulama exposes listesini sunar ve bir remoteEntry.js bildirimi oluşturur.
  • Ana uygulama, bir takma adı name@URL/remoteEntry.js ile eşleyen remotes listesini sunar.
  • shared yinelenen bağımlılıkları önler; Vue için singleton: true gerekir.
  • Bir uzağı dinamik import("remote/Module") ile, çoğunlukla defineAsyncComponent kullanarak içe aktarın.

Sıkça Sorulan Sorular

“Vue ile Webpack Module Federation” dersi ücretsiz mi?

Evet — “Vue ile Webpack Module Federation” 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 ile Webpack Module Federation” dersinde ne öğreneceğim?

ModuleFederationPlugin, exposes, remotes, paylaşılan bağımlılıklar ve uzak bileşen yükleme. 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 2. dersidir.

“Vue ile Webpack Module Federation” 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

  1. Mikro Ön Uç Mimarisinin İlkeleri
  2. Vue ile Webpack Module Federation
  3. Vite Federation Eklentisi
  4. Mikro Ön Uçlar Arasında Paylaşılan Durum
← Vue Academy Sayfasına Dön