Konfigurere verts- og eksterne React-apper

Remote-applikasjonen legger til ModuleFederationPlugin i webpack-konfigurasjonen med tre nøkkel-egenskaper: name (unik identifikator, f.eks. "buttonApp"), filename ("remoteEntry.js" – manifestutdataet) og exposes (en tilordning fra offentlig navn til kildefilsti).

exposes-konfigurasjonen tilordner en offentlig modulbane til en lokal fil: { './Button': './src/Button' }. Det betyr at hosten kan importere 'buttonApp/Button' og motta komponenten fra ./src/Button.tsx. Det er mulig å eksponere flere komponenter, hjelpefunksjoner eller til og med hele sider.

shared-egenskapen forteller Module Federation hvilke moduler som skal deles mellom host og remote i stedet for å dupliseres. For React: shared: { react: { singleton: true, requiredVersion: deps.react }, 'react-dom': { singleton: true } }. singleton:true hindrer at flere instanser lastes inn samtidig.

ModuleFederationPlugin-konfigurasjonen i host-applikasjonen inkluderer en remotes-egenskap: { buttonApp: 'buttonApp@http://localhost:3001/remoteEntry.js' }. Nøkkelen er importnavneområdet, mens verdien er navnet på remoten og URL-en kombinert med @ – dette forteller Webpack hvor remoten skal hentes under kjøring.

I React-koden til hosten importeres remote-komponenten med dynamisk import: const Button = React.lazy(() => import('buttonApp/Button')). Importbanen samsvarer med navneområdet til remoten og navnet på den eksponerte modulen. React.lazy gjør importen kodedelt og asynkront lastet.

Ettersom remote-moduler lastes inn asynkront, bør den lazy-importerte remote-komponenten alltid pakkes inn i en Suspense-grense: Suspense fallback=Loading... /. Reserveinnholdet vises mens Module Federation henter remoteEntry.js og komponentchunken fra URL-en til remoten.

React-hooks (useState, useContext, useEffect) er avhengige av én intern React-instans for å spore komponenttilstand. Hvis både hosten og remoten laster inn sin egen kopi av React, vil hooks utløse feil av typen "invalid hook call". singleton:true tvinger dem til å dele én React-instans, og løser dermed denne typen feil fullstendig.

Når hosten bruker react@18.2.0 og remoten bruker react@18.3.0, forhandler Module Federations shared scope om hvilken versjon som skal brukes. Med singleton:true og requiredVersion bruker den vanligvis den høyeste versjonen hvis den er kompatibel. Ved å angi requiredVersion: '>=18.0.0' i stedet for en fastlåst versjon blir versjonsintervallene mer fleksible.

TypeScript kjenner ikke til remote-moduler under kompilering, så importer som import('buttonApp/Button') utløser typefeil uten deklarasjoner. Bruk @module-federation/typescript, eller opprett .d.ts-filer manuelt for å deklarere modultypene og få typesikkerhet for props til remote-komponenter.

Kjør begge appene samtidig: remoten på port 3001 og hosten på port 3000. Åpne hosten – Module Federation-kjøremiljøet henter http://localhost:3001/remoteEntry.js, finner Button-modulen, laster ned chunken og rendrer den i host-applikasjonen som om den var en lokal komponent.

I produksjon erstattes localhost:3001 med URL-en til den utrullede remoten. Et vanlig mønster er å bruke en miljøvariabel for URL-en til remoten, slik at CI/CD kan sette inn riktig URL for hvert miljø: buttonApp: 'buttonApp@' + process.env.BUTTON_REMOTE_URL + '/remoteEntry.js'.

Konfigurering av Module Federation krever ModuleFederationPlugin både på remoten (med name, filename og exposes) og på hosten (med remotes). Remote-komponenter brukes via React.lazy og dynamisk import, pakket inn i Suspense. React og React DOM må være delte singletoner for å hindre hook-feil forårsaket av flere instanser. TypeScript-deklarasjoner og remote-URL-er fra miljøvariabler fullfører et produksjonsklart oppsett.