0Pricing
Vue Academy · Lekcja

Wtyczka Vite Federation

@originjs/vite-plugin-federation, konfiguracja producenta i konsumenta oraz dynamiczny import remotes.

Wtyczka Vite Federation to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 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.

Federacja w Vite

Module Federation powstało w Webpack, ale wiele aplikacji Vue korzysta z Vite. Społecznościowa wtyczka @originjs/vite-plugin-federation udostępnia federację aplikacjom opartym na Vite, zarówno producentom, jak i konsumentom.

Instalowanie wtyczki

Należy dodać wtyczkę zarówno do aplikacji producenta (remote'a), jak i do aplikacji konsumenta (hosta).

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

Konfiguracja producenta

W aplikacji producenta (remote'a), w pliku vite.config.ts, należy dodać federation z opcjami name i exposes, którego obiekt mapuje nazwy publiczne na lokalne pliki.

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

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

Ustawienia budowania dla federacji

Wtyczka wymaga nowoczesnego celu budowania, a w niektórych konfiguracjach także wyłączonej minifikacji modułów. Należy ustawić cel budowania tak, aby działały dynamiczne importy i top-level await.

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

Obiekt exposes

Podobnie jak w Webpack, klucze to publiczne ścieżki importu używane przez konsumentów, a wartości to ścieżki do lokalnych plików źródłowych. Należy udostępniać tylko to, czego potrzebują inne zespoły.

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

Konfiguracja konsumenta

W aplikacji konsumenta (hosta) należy dodać federation z obiektem remotes, który mapuje alias na adres URL pliku remoteEntry.js remote'a.

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

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

Adres URL w remotes

Wartością jest pełny adres URL do zbudowanego pliku remoteEntry.js. W środowisku deweloperskim należy wskazać serwer podglądu remote'a, a na produkcji — jego wdrożoną ścieżkę CDN.

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

Współdzielone zależności

Należy dodać tablicę shared, aby host i remote korzystały z jednej kopii wspólnych bibliotek. Wymienienie vue jest niezbędne, aby zachować jedną instancję Vue.

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

Korzystanie ze zdalnego komponentu

Należy importować moduł za pomocą aliasu i udostępnionej nazwy. Trzeba użyć dynamicznego importu z defineAsyncComponent, ponieważ kod jest pobierany w czasie działania.

import { defineAsyncComponent } from "vue"

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

Deklaracje typów dla remote'ów

TypeScript nie zna typów zdalnych modułów. Należy je zadeklarować, aby importy przechodziły sprawdzanie typów.

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

Preview, nie Dev, dla remote'ów

Federacja wymaga zbudowanego pliku remoteEntry.js, którego serwer deweloperski Vite nie generuje w taki sam sposób. Należy zbudować remote'a i udostępnić go za pomocą vite preview, aby host mógł go pobrać.

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

Szybkie sprawdzenie

Proszę sprawdzić swoją wiedzę na temat wtyczki federacji dla Vite.

Podsumowanie

Poznali Państwo federację w Vite:

  • @originjs/vite-plugin-federation udostępnia Module Federation w Vite.
  • Konfiguracja producenta ustawia name i obiekt exposes (nazwę publiczną mapującą na lokalny plik).
  • Konfiguracja konsumenta ustawia obiekt remotes, który mapuje alias na adres URL pliku remoteEntry.js remote'a.
  • Współdzielone zależności, w tym vue, należy wymienić w shared.
  • Z komponentu remote'a korzysta się za pomocą dynamicznego import("alias/Module"); remote'a należy zbudować i uruchomić za pomocą vite preview.

Często zadawane pytania

Czy lekcja „Wtyczka Vite Federation” jest bezpłatna?

Tak — pełny tekst „Wtyczka Vite Federation” 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 „Wtyczka Vite Federation”?

@originjs/vite-plugin-federation, konfiguracja producenta i konsumenta oraz dynamiczny import remotes. Ć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 3 z 4.

Ile czasu zajmuje lekcja „Wtyczka Vite Federation”?

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

  1. Zasady architektury mikrofrontendów
  2. Webpack Module Federation z Vue
  3. Wtyczka Vite Federation
  4. Współdzielony stan między mikrofrontendami
← Powrót do Vue Academy