PricingLoginStart free
React Academy · leksjon

Module Federation med Webpack 5

Konfigurer en host- og en remote-app med Webpack Module Federation for å dele komponenter ved runtime.

Leksjon 2 av 412 trinn

Module Federation med Webpack 5 er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Oversikt over Module Federation

Webpack 5 Module Federation lar Dem dele JavaScript-moduler mellom separat bund lede applikasjoner ved kjøring – én app eksponerer komponenter, og en annen bruker dem uten et byggetrinn.

Roller: Host kontra remote

En remote eksponerer moduler. En host bruker moduler fra én eller flere remotes. En app kan være både host og remote samtidig.

Konfigurasjon av remote

I webpack.config.js for remote-appen bruker De ModuleFederationPlugin til å eksponere komponenter.

// Remote: apps/products/webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'products',              // remote name
      filename: 'remoteEntry.js',    // entry file
      exposes: {
        './ProductCard': './src/components/ProductCard', // exposed module
        './CartButton': './src/components/CartButton',
      },
      shared: ['react', 'react-dom'], // share deps to avoid duplication
    }),
  ],
};

Konfigurasjon av host

I webpack-konfigurasjonen for host-appen deklarerer De hvilke remotes som skal brukes, og hvor de skal lastes inn fra.

// Host: apps/shell/webpack.config.js
new ModuleFederationPlugin({
  name: 'shell',
  remotes: {
    products: 'products@http://localhost:3001/remoteEntry.js',
    cart: 'cart@http://localhost:3002/remoteEntry.js',
  },
  shared: ['react', 'react-dom'],
})

Bruke en remote-modul

Importer remote-moduler ved å bruke remote-navnet som prefiks i banen. Pakk dem inn i React.lazy og Suspense for lazy loading.

import React, { lazy, Suspense } from 'react';

const ProductCard = lazy(() => import('products/ProductCard'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ProductCard productId="123" />
    </Suspense>
  );
}

Deling av avhengigheter

Oppgi delte pakker med singleton: true slik at bare én kopi av React lastes inn på tvers av alle micro-frontends.

shared: {
  react: { singleton: true, requiredVersion: '^18.0.0' },
  'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
  '@company/design-system': { singleton: true },
},

Dynamiske remotes

Last inn remotes dynamisk ved kjøring fra konfigurasjon (for eksempel et manifest-endepunkt) i stedet for å hardkode URL-er i webpack-konfigurasjonen.

async function loadRemote(scope, module) {
  await __webpack_init_sharing__('default');
  const container = window[scope];
  await container.init(__webpack_share_scopes__.default);
  const factory = await container.get(module);
  return factory();
}

const ProductCard = React.lazy(() => loadRemote('products', './ProductCard'));

TypeScript med Module Federation

Bruk programtillegget @module-federation/typescript til å generere typedeklarasjoner for eksponerte moduler, slik at host-ene får full autoutfylling.

Error boundaries ved feil i remotes

Pakk remote-komponenter inn i error boundaries. Hvis en remote ikke kan lastes inn, håndterer host-en feilen på en kontrollert måte i stedet for å krasje.

<ErrorBoundary fallback={<div>Product unavailable</div>}>
  <Suspense fallback={<Skeleton />}>
    <ProductCard productId={id} />
  </Suspense>
</ErrorBoundary>

Vite Module Federation

Programtillegget @originjs/vite-plugin-federation gir Module Federation til Vite-baserte prosjekter med et lignende API.

// vite.config.ts (remote)
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    federation({
      name: 'products',
      filename: 'remoteEntry.js',
      exposes: { './ProductCard': './src/ProductCard' },
      shared: ['react'],
    }),
  ],
});

Hurtigsjekk

Hva gjør det å angi singleton: true for en delt pakke i Module Federation?

Besvar den i den interaktive leksjonen

Oppsummering

Module Federation bruker ModuleFederationPlugin i remotes (for å eksponere) og host-er (for å bruke). Importer remote-moduler med lazy(), del react som en singleton for å unngå duplisering, og pakk remotes inn i error boundaries for kontrollert degradering.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs
88
Leksjoner
324
Start læringen gratisSe hele kurset

Ofte stilte spørsmål

Er leksjonen «Module Federation med Webpack 5» gratis?

Ja – hele teksten i «Module Federation med Webpack 5» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Module Federation med Webpack 5»?

Konfigurer en host- og en remote-app med Webpack Module Federation for å dele komponenter ved runtime. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Module Federation med Webpack 5»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

  1. Mikrofrontend-konsepter og avveininger
  2. Module Federation med Webpack 5
  3. Delt state og ruting mellom MFE-er
  4. Uavhengig utrulling og CI-pipelines for MFE-er
← Tilbake til React Academy