Mikrofrontend-arkitektur med Module Federation · leksjon

Dele moduler og komponenter

Lær å eksponere komponenter fra en fjernapplikasjon og bruke dem i en host-applikasjon.

Leksjon 2 av 411 trinn

Dele moduler og komponenter er en gratis leksjon i Mikrofrontend-arkitektur med Module Federation 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 Mikrofrontend-arkitektur med Module Federation, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Mikrofrontend-arkitektur med Module Federation inneholder totalt 4 leksjoner.

Introduksjon til moduldeling

I denne leksjonen skal vi se nærmere på kjernen i Micro Frontends: å dele kode!

Vi lærer hvordan én applikasjon kan «eksponere» komponentene eller modulene sine, og hvordan en annen applikasjon kan «konsumere» dem. Dette er avgjørende for å bygge fødererte applikasjoner som er virkelig uavhengige, men som likevel kan samarbeide.

Forstå eksponerte moduler

En eksponert modul er en del av koden, for eksempel en React-komponent, en hjelpefunksjon eller til og med et datalager, som én Micro Frontend-applikasjon velger å gjøre tilgjengelig for andre applikasjoner.

Tenk på det som å publisere et bibliotek.
Applikasjonen som gjør den tilgjengelig, kalles remote-applikasjonen.
Dette konfigureres i remotens Webpack-oppsett.

Slik eksponerer en remote

For å eksponere en modul konfigurerer du ModuleFederationPlugin i remote-applikasjonens webpack.config.js. Det er egenskapen exposes som gjør dette mulig.

Du definerer et offentlig navn for modulen og peker det til den lokale banen.

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ... other webpack config ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button.jsx',
        './Header': './src/components/Header.jsx'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

Eksempel: vår delte knapp

Se for deg en enkel React-knappkomponent som remote-applikasjonen vår vil dele. Denne komponenten ligger i ./src/components/Button.jsx.

Det er bare en vanlig React-komponent helt til vi eksponerer den.

// src/components/Button.jsx
import React from 'react';

const Button = ({ onClick, children }) => {
  return (
    <button
      onClick={onClick}
      style={{
        padding: '10px 20px',
        backgroundColor: '#007bff',
        color: 'white',
        border: 'none',
        borderRadius: '5px',
        cursor: 'pointer'
      }}
    >
      {children}
    </button>
  );
};

export default Button;

Konsumere remote-moduler

På den andre siden er en remote-modul en modul som en applikasjon vil bruke, men som ligger på en annen føderert applikasjon.

Applikasjonen som konsumerer den, kalles vertsapplikasjonen.
Verten må vite hvor den finner remote-applikasjonens eksponerte moduler.

Slik konsumerer en vert

Vertsapplikasjonen bruker også ModuleFederationPlugin. Her definerer du egenskapen remotes og knytter et lokalt alias til remote-applikasjonens entry-punkt.

Entry-punktet er vanligvis remoteEntry.js, som genereres av remote-appens Webpack-bygg.

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ... other webpack config ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'hostApp',
      remotes: {
        remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

Importere og bruke delte komponenter

Når oppsettet er klart, kan vertsapplikasjonen importere remote-komponenten som om den var en lokal modul. Webpack håndterer, via Module Federation, den dynamiske innlastingen fra remote-URL-en.

Prøv å kjøre dette enkle eksempelet:

// This simulates a host app importing a remote component.
// In a real setup, 'remoteApp/Button' would resolve to the
// component exposed by the 'remoteApp' through Module Federation.
import React from 'react';
import ReactDOM from 'react-dom/client';

// Imagine 'remoteApp/Button' is the component we exposed earlier
// This import is resolved by Webpack's Module Federation Plugin
const RemoteButton = React.lazy(() => import('remoteApp/Button'));

function App() {
  return (
    <div>
      <h1>Host Application</h1>
      <React.Suspense fallback={<div>Loading Remote Button...</div>}>
        <RemoteButton onClick={() => alert('Button Clicked!')}>
          Click Me From Remote!
        </RemoteButton>
      </React.Suspense>
    </div>
  );
}

// Full entry point for a runnable React app
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Bak kulissene: dynamisk innlasting

Når vertsapplikasjonen prøver å importere remoteApp/Button, leter ikke Webpack etter den i den lokale node_modules-mappen. I stedet bruker den remotes-konfigurasjonen til å:

Hente remoteEntry.js fra den angitte URL-en.
Laste inn den eksponerte Button-modulen fra denne remote entry-filen.
Dette skjer dynamisk under kjøring, slik at applikasjonene kan distribueres uavhengig av hverandre!

Beste praksis for deling

Når du definerer exposes og remotes, bør du ha disse tipsene i bakhodet:

Tydelig navngivning: Bruk beskrivende navn på de eksponerte modulene (for eksempel ./UserProfileCard).
Konsekvente aliaser: Sørg for at remote-aliasene i verten er enkle å forstå (for eksempel marketingApp).
Relative stier: Bruk relative stier (./src/...) for eksponerte moduler i remote-applikasjonen.

Test forståelsen din

Du har lært hvordan du eksponerer og bruker moduler. La oss sjekke forståelsen din av den grunnleggende konfigurasjonen!

Besvar den i den interaktive leksjonen

Oppsummering av leksjonen og neste steg

Godt jobbet! Du har lært de grunnleggende mekanismene for å dele moduler med Webpack Module Federation:

Eksponering: Remote-applikasjoner bruker exposes for å gjøre komponenter offentlige.
Bruk: Vertsapplikasjoner bruker remotes for å importere og bruke disse komponentene.
Denne dynamiske innlastingen gjør det mulig å utvikle og distribuere applikasjonene uavhengig av hverandre.

Deretter skal vi bygge en enkel federert applikasjon fra grunnen av og bruke disse konseptene i praksis!

Gratis å komme i gang

Lær deg JavaScript 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: 12
Leksjoner: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Dele moduler og komponenter» gratis?

Ja – hele teksten i «Dele moduler og komponenter» 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 Mikrofrontend-arkitektur med Module Federation-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Mikrofrontend-arkitektur med Module Federation inneholder totalt 4 leksjoner.

Hva lærer jeg i «Dele moduler og komponenter»?

Lær å eksponere komponenter fra en fjernapplikasjon og bruke dem i en host-applikasjon. Du øver på Mikrofrontend-arkitektur med Module Federation 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 Mikrofrontend-arkitektur med Module Federation?

Ingen tidligere erfaring er nødvendig. Mikrofrontend-arkitektur med Module Federation 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 «Dele moduler og komponenter»?

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 Mikrofrontend-arkitektur med Module Federation-leksjonen?

Ja. Alle Mikrofrontend-arkitektur med Module Federation-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

Prosjektoppsett og konfigurasjon
Dele moduler og komponenter
Bygge en enkel føderert app
Kjøre og feilsøke den federerte appen lokalt

← Tilbake til Mikrofrontend-arkitektur med Module Federation