Vue Academy · Lektion

Webpack Module Federation med Vue

ModuleFederationPlugin, exposes, remotes, delte afhængigheder og indlæsning af remote-komponenter

Lektion 2 af 413 trin

Webpack Module Federation med Vue er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vue Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vue Academy-kurset indeholder 4 lektioner i alt.

Module Federation i Webpack

Webpack 5 leveres med Module Federation indbygget. Det gør det muligt for én byggeproces at eksponere moduler for andre byggeprocesser og bruge moduler fra dem under kørsel — grundlaget for mikrofrontends med integration ved kørselstid.

Værter og fjernapps

Der er to roller: En fjernapp eksponerer komponenter, og en værtsapp bruger dem. En app kan have begge roller. En værtsapp indlæser en fjernapps kode over HTTP under kørsel, ikke under byggetid.

Pluginet ModuleFederationPlugin

Du konfigurerer funktionen ved at føje ModuleFederationPlugin til dit webpack-plugins-array. Dets indstillinger definerer navnet, hvad du eksponerer, hvad du bruger, og hvilke afhængigheder der deles.

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

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

Indstillingen name

name er den globalt entydige identifikator for denne byggeproces. Værtsapps henviser til en fjernapp ved hjælp af dette navn.

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

Indstillingen exposes (fjernapp)

En fjernapp angiver de moduler, den deler, i exposes. Nøglerne er offentlige stier, og værdierne er lokale filstier.

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

Manifestet remoteEntry

En fjernapp bygger et remoteEntry.js-manifest, der beskriver dens eksponerede moduler. Værtsapps indlæser denne fil for at finde og hente fjernappens kode under kørsel.

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

Indstillingen remotes (værtsapp)

En værtsapp angiver, hvilke fjernapps den bruger, i remotes ved at knytte et lokalt alias til fjernappens navn samt dens remoteEntry.js-URL.

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

Indstillingen shared

shared angiver de afhængigheder, som begge sider bør dele for at undgå at indlæse to kopier. For et rammeværk som Vue skal du dele det, så alle mikrofrontends bruger den samme instans.

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

singleton: true for Vue

Vue skal være en singleton — præcis én kopi på siden. To Vue-instanser ødelægger reaktiviteten og komponenternes identitet. Markér den som singleton med et versionskrav.

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

Brug af en fjernkomponent

Importér fjernmodulet dynamisk under kørsel. Da det indlæses over netværket, skal du bruge en dynamisk import() — typisk pakket ind i defineAsyncComponent i Vue.

import { defineAsyncComponent } from "vue"

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

Gengivelse af fjernappen

Brug den asynkrone komponent som enhver anden i din skabelon. Webpack henter fjernappens kode ved den første gengivelse og gemmer den i cachen.

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

Hurtigt tjek

Tjek din forståelse af Module Federation med Vue.

Besvar den i den interaktive lektion

Opsummering

Du har lært Webpack Module Federation:

ModuleFederationPlugin konfigurerer føderationen; name identificerer byggeprocessen.
En fjernapp angiver exposes og udsender et remoteEntry.js-manifest.
En værtsapp angiver remotes og knytter et alias til name@URL/remoteEntry.js.
shared forhindrer duplikerede afhængigheder; Vue kræver singleton: true.
Brug en fjernapp via dynamisk import("remote/Module"), ofte sammen med defineAsyncComponent.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 42
Lektioner: 156

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Webpack Module Federation med Vue” gratis?

Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “Webpack Module Federation med Vue”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vue Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Webpack Module Federation med Vue”?

ModuleFederationPlugin, exposes, remotes, delte afhængigheder og indlæsning af remote-komponenter Du øver dig i Vue Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Vue Academy?

Der kræves ingen tidligere erfaring. Vue Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Webpack Module Federation med Vue”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Vue Academy-lektion?

Ja. Alle Vue Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Principper for micro-frontend-arkitektur
Webpack Module Federation med Vue
Vite Federation Plugin
Delt state på tværs af micro-frontends

← Tilbage til Vue Academy