Mikrofrontendarkitektur med Module Federation · Lektion

Deling af moduler og komponenter

Lær at eksponere komponenter fra en remote-applikation og anvende dem i en host-applikation.

Lektion 2 af 411 trin

Deling af moduler og komponenter er en gratis Mikrofrontendarkitektur med Module Federation-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Mikrofrontendarkitektur med Module Federation, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Mikrofrontendarkitektur med Module Federation-kurset indeholder 4 lektioner i alt.

Introduktion til deling af moduler

I denne lektion går vi ind i kernen af Micro Frontends: deling af kode!

Vi lærer, hvordan én applikation kan »eksponere« sine komponenter eller moduler, og hvordan en anden applikation kan »bruge« dem. Det er afgørende for at bygge fødererede apps, der både er virkelig uafhængige og kan samarbejde.

Forstå eksponerede moduler

Et eksponeret modul er et stykke kode (f.eks. en React-komponent, en hjælpefunktion eller endda et datalager), som én Micro Frontend-applikation vælger at gøre tilgængeligt for andre applikationer.

Tænk på det som at udgive et bibliotek.
Applikationen, der gør det tilgængeligt, kaldes fjernapplikationen.
Det konfigureres i fjernapplikationens Webpack-opsætning.

Sådan eksponerer en fjernapplikation

Hvis du vil eksponere et modul, konfigurerer du ModuleFederationPlugin i fjernapplikationens webpack.config.js. Det er egenskaben exposes, der gør arbejdet.

Du definerer et offentligt navn for modulet og angiver dets lokale sti.

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: Vores delte knap

Lad os forestille os en enkel React-knapkomponent, som vores fjernapplikation vil dele. Denne komponent ligger i ./src/components/Button.jsx.

Det er blot en almindelig React-komponent, indtil 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;

Brug af moduler fra fjernapplikationer

Omvendt er et fjernmodul et modul, som en applikation vil bruge, men som hostes af en anden fødereret applikation.

Applikationen, der bruger det, kaldes værtsapplikationen.
Værten skal vide, hvor den finder fjernapplikationens eksponerede moduler.

Sådan bruger en vært moduler

Værtsapplikationen bruger også ModuleFederationPlugin. Her definerer du egenskaben remotes, som knytter et lokalt alias til fjernapplikationens entry point.

Entry pointet er typisk remoteEntry.js, som genereres af fjernappens Webpack-build.

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']
    })
  ]
};

Import og brug af delte komponenter

Når konfigurationen er på plads, kan værtsapplikationen importere fjernkomponenten, som om den var et lokalt modul. Webpack håndterer (via Module Federation) den dynamiske indlæsning fra fjernapplikationens URL.

Prøv at køre dette enkle eksempel:

// 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 />);

Bag kulisserne: Dynamisk indlæsning

Når værtsapplikationen forsøger at importere remoteApp/Button, leder Webpack ikke efter den i den lokale node_modules. I stedet bruger den konfigurationen remotes til at:

Hente remoteEntry.js fra den angivne URL.
Indlæse modulet Button, som er gjort tilgængeligt fra den pågældende fjernindgang.
Dette sker dynamisk under kørsel, så applikationerne kan installeres uafhængigt af hinanden!

Bedste praksis for deling

Husk disse råd, når du definerer exposes og remotes:

Tydelig navngivning: Brug beskrivende navne til de moduler, du gør tilgængelige (f.eks. ./UserProfileCard).
Ensartede aliaser: Sørg for, at aliaserne for fjernapplikationer i værtsapplikationen er nemme at forstå (f.eks. marketingApp).
Relative stier: Brug relative stier (./src/...) til moduler, der gøres tilgængelige i fjernapplikationen.

Test din forståelse

Du har lært, hvordan du gør moduler tilgængelige og bruger dem. Lad os kontrollere din forståelse af kernekonfigurationen!

Besvar den i den interaktive lektion

Opsummering af lektionen og næste trin

Godt gået! Du har lært de grundlæggende mekanismer til at dele moduler med Webpack Module Federation:

At gøre tilgængelig: Fjernapplikationer bruger exposes til at gøre komponenter offentligt tilgængelige.
At bruge: Værtsapplikationer bruger remotes til at importere og bruge disse komponenter.
Denne dynamiske indlæsning gør det muligt at udvikle og installere applikationer uafhængigt af hinanden.

Som det næste bygger vi en enkel federeret applikation fra bunden og omsætter disse begreber til praksis!

Gratis at komme i gang

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

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Deling af moduler og komponenter” gratis?

Ja — hele teksten til “Deling af moduler og komponenter” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Mikrofrontendarkitektur med Module Federation-kurset, skal du opgradere til CoddyKit PRO. Mikrofrontendarkitektur med Module Federation-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Deling af moduler og komponenter”?

Lær at eksponere komponenter fra en remote-applikation og anvende dem i en host-applikation. Du øver dig i Mikrofrontendarkitektur med Module Federation 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å Mikrofrontendarkitektur med Module Federation?

Der kræves ingen tidligere erfaring. Mikrofrontendarkitektur med Module Federation 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 “Deling af moduler og komponenter”?

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 Mikrofrontendarkitektur med Module Federation-lektion?

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

Projektopsætning og konfiguration
Deling af moduler og komponenter
Opbygning af en simpel federeret app
Kørsel og fejlfinding af Deres federerede app lokalt

← Tilbage til Mikrofrontendarkitektur med Module Federation