Vue Academy · Lekcja

Webpack Module Federation z Vue

ModuleFederationPlugin, exposes, remotes, współdzielone zależności oraz ładowanie zdalnych komponentów.

Webpack Module Federation z Vue to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Module Federation w Webpack

Webpack 5 ma wbudowaną obsługę Module Federation. Pozwala jednemu procesowi budowania udostępniać moduły innym procesom budowania oraz pobierać moduły z innych procesów w czasie działania — to podstawa mikrofrontendów integrowanych w czasie działania.

Hosty i remote'y

Istnieją dwie role: remote udostępnia komponenty, a host z nich korzysta. Aplikacja może pełnić obie role. Host ładuje kod remote'a przez HTTP w czasie działania, a nie na etapie budowania.

ModuleFederationPlugin

Federację konfiguruje się, dodając ModuleFederationPlugin do tablicy plugins w webpacku. Jego opcje określają nazwę, udostępniane i używane elementy oraz współdzielone zależności.

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

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

Opcja name

name to unikatowy globalny identyfikator tej kompilacji. Hosty odwołują się do remote'a za pomocą tej nazwy.

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

Opcja exposes (remote)

Remote wymienia udostępniane moduły w opcji exposes. Klucze to ścieżki publiczne, a wartości — lokalne ścieżki do plików.

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

Manifest remoteEntry

Remote podczas budowania tworzy manifest remoteEntry.js opisujący udostępniane moduły. Hosty ładują ten plik, aby wykryć i pobrać kod remote'a w czasie działania.

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

Opcja remotes (host)

Host deklaruje używane remote'y w opcji remotes, mapując lokalny alias na nazwę remote'a wraz z adresem URL jego pliku remoteEntry.js.

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

Opcja shared

shared zawiera zależności, które obie strony powinny współdzielić, aby uniknąć ładowania dwóch kopii. W przypadku frameworka takiego jak Vue trzeba go współdzielić, aby wszystkie mikrofrontendy korzystały z jednej instancji.

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

singleton: true dla Vue

Vue musi być singletonem — w dokumencie może znajdować się dokładnie jedna kopia. Dwie instancje Vue powodują problemy z reaktywnością i tożsamością komponentów. Należy oznaczyć Vue jako singleton i określić wymaganie dotyczące wersji.

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

Korzystanie ze zdalnego komponentu

Należy dynamicznie importować zdalny moduł w czasie działania. Ponieważ jest on ładowany przez sieć, należy użyć dynamicznego import() — w Vue zazwyczaj opakowuje się go w defineAsyncComponent.

import { defineAsyncComponent } from "vue"

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

Renderowanie remote'a

Należy używać komponentu asynchronicznego w szablonie tak samo jak każdego innego komponentu. Webpack pobiera kod remote'a podczas pierwszego renderowania i zapisuje go w pamięci podręcznej.

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

Szybkie sprawdzenie

Proszę sprawdzić swoją wiedzę na temat Module Federation w Vue.

Podsumowanie

Poznali Państwo Module Federation w Webpack:

ModuleFederationPlugin konfiguruje federację, a name identyfikuje kompilację.
Remote wymienia moduły w exposes i generuje manifest remoteEntry.js.
Host wymienia remote'y w remotes, mapując alias na name@URL/remoteEntry.js.
shared zapobiega duplikowaniu zależności; Vue wymaga ustawienia singleton: true.
Remote'a używa się za pomocą dynamicznego import("remote/Module"), często w połączeniu z defineAsyncComponent.

Często zadawane pytania

Czy lekcja „Webpack Module Federation z Vue” jest bezpłatna?

Tak — pełny tekst „Webpack Module Federation z Vue” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Webpack Module Federation z Vue”?

ModuleFederationPlugin, exposes, remotes, współdzielone zależności oraz ładowanie zdalnych komponentów. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Webpack Module Federation z Vue”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Zasady architektury mikrofrontendów
Webpack Module Federation z Vue
Wtyczka Vite Federation
Współdzielony stan między mikrofrontendami

← Powrót do Vue Academy