Mikrofrontendarkitektur med Module Federation · Lektion

Projektopsætning og konfiguration

Opsæt et nyt projekt fra bunden, og konfigurer Webpack og Module Federation til flere applikationer.

Lektion 1 af 412 trin

Projektopsætning og konfiguration er en gratis Mikrofrontendarkitektur med Module Federation-lektion på CoddyKit. Dette er lektion 1 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.

Velkommen til fødererede apps!

Er du klar til at bygge din første Micro Frontend-applikation? Denne lektion guider dig gennem opsætningen af en værts- og en fjernapplikation ved hjælp af Webpacks Module Federation.

Vi starter fra bunden og gennemgår projektstruktur, grundlæggende Webpack-konfiguration og integration af det effektive Module Federation Plugin.

Værts- og fjernapps

I Module Federation har vi to primære typer applikationer:

Værtsapplikation: Dette er din hovedapplikation, som bruger (indlæser) komponenter eller moduler fra andre applikationer. Tænk på den som koordinatoren.
Fjernapplikation: Dette er en uafhængig applikation, som eksponerer (deler) sine komponenter eller moduler, så andre kan bruge dem.

Vi sætter begge op i vores projekt!

Projektets mappestruktur

Lad os organisere projektet. Vi opretter en hovedmappe og derefter undermapper til værts- og fjernapplikationerne. Det holder dem adskilt, men i det samme arbejdsområde, så de er nemme at udvikle.

my-federated-app/
├── host/
│   ├── src/
│   └── public/
└── remote/
    ├── src/
    └── public/

Initialiser og installer Webpack

Gå først ind i mapperne host og remote, og initialiser npm. Installer derefter Webpack og dets kommandolinjegrænseflade (CLI) som udviklingsafhængigheder sammen med udviklingsserveren og HTML-pluginnet.

// In host/ and remote/ directories:
npm init -y
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
npm install react react-dom --save

Værtsapp: Entry og HTML

Værtsapplikationen skal have et entry point. Vi opretter en enkel index.js-fil, der fungerer som hovedscriptet for vores vært. Det er her, applikationen starter.

// host/src/index.js
console.log('Host application is now running!');

// host/public/index.html
<!DOCTYPE html>
<html>
  <head><title>Host App</title></head>
  <body>
    <div id="root"></div>
  </body>
</html>

Fjernapp: Komponent og entry

Vores fjernapplikation eksponerer en enkel React-komponent. Lad os oprette en App.js til komponenten og en index.js til at gengive den under lokal udvikling. Vi antager, at React allerede er installeret.

// remote/src/App.js
import React from 'react';

const App = () => {
  return (
    <div style={{ padding: '10px', border: '1px solid blue' }}>
      <h3>Remote App Component</h3>
      <p>Hello from the remote!</p>
    </div>
  );
};

export default App;

// remote/src/index.js (for local dev)
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Webpack-konfiguration: Grundlag for værten

Lad os nu oprette en grundlæggende webpack.config.js til værten. Denne konfiguration fortæller Webpack, hvor bundlingen skal starte, hvor den færdige bundle skal placeres, og opsætter en udviklingsserver.

// host/webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  devServer: {
    port: 8080,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

Webpack-konfiguration: Grundlag for fjernapplikationen

Ligesom værten skal fjernappen også have sin egen Webpack-konfiguration. Vi opsætter dens entry point, output, port til udviklingsserveren og HTML-plugin.

// remote/webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  devServer: {
    port: 8081,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

ModuleFederationPlugin

Dette er kernen i vores opsætning! Webpacks ModuleFederationPlugin gør det muligt for applikationer at indlæse kode dynamisk fra andre applikationer. Det giver dig mulighed for at definere:

name: Et entydigt navn til din applikation.
remotes: De fjernapplikationer, som denne app bruger.
exposes: De moduler, som denne app tilbyder andre.
shared: Fælles afhængigheder, der skal deles.

Konfiguration af værten med MF

Lad os nu opdatere værtens webpack.config.js, så den bruger ModuleFederationPlugin. Værten definerer sit eget name og angiver de remotes, den vil hente moduler fra.

// host/webpack.config.js (with MF)
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  devServer: { port: 8080 },
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        remoteApp: 'remote@http://localhost:8081/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({ template: './public/index.html' }),
  ],
};

Hurtigt tjek: Module Federation

Når du konfigurerer ModuleFederationPlugin for en værtsapplikation, hvilken egenskab bruges så til at definere de fjernapplikationer, den vil bruge?

Besvar den i den interaktive lektion

Opsummering: Projektopsætningen er færdig!

Godt gået! Du har opsat den grundlæggende projektstruktur og konfigureret Webpack med Module Federation Plugin for både en værts- og en fjernapplikation.

Vi initialiserede npm og installerede Webpack.
Vi konfigurerede grundlæggende Webpack for begge apps.
Vi integrerede ModuleFederationPlugin og definerede værtens name og remotes samt fjernapplikationens name, filename og exposes.

Derefter lærer vi, hvordan vi faktisk deler og bruger komponenter mellem disse applikationer!

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 “Projektopsætning og konfiguration” gratis?

Ja — hele teksten til “Projektopsætning og konfiguration” 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 “Projektopsætning og konfiguration”?

Opsæt et nyt projekt fra bunden, og konfigurer Webpack og Module Federation til flere applikationer. 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 1 af 4.

Hvor lang tid tager lektionen “Projektopsætning og konfiguration”?

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