Isäntä- ja etäisten React-sovellusten määrittäminen

Remote-sovellus lisää ModuleFederationPluginin webpack-määritykseensä ja määrittää kolme keskeistä ominaisuutta: name (yksilöivä tunniste, esimerkiksi "buttonApp"), filename ("remoteEntry.js" — manifestin tulostiedosto) ja exposes (julkisesta nimestä lähdetiedostopolkuun muodostuva kartta).

exposes-määritys yhdistää julkisen moduulipolun paikalliseen tiedostoon: { './Button': './src/Button' }. Tämä tarkoittaa, että host voi tuoda moduulin 'buttonApp/Button' ja saada komponentin tiedostosta ./src/Button.tsx. Voitte tarjota useita komponentteja, apuohjelmia tai jopa kokonaisia sivuja.

shared-ominaisuus kertoo Module Federationille, mitkä moduulit jaetaan hostin ja remoten kesken sen sijaan, että ne monistettaisiin. Reactille käytetään määritystä shared: { react: { singleton: true, requiredVersion: deps.react }, 'react-dom': { singleton: true } }. singleton:true estää useita instansseja latautumasta samanaikaisesti.

Host-sovelluksen ModuleFederationPlugin-määritys sisältää remotes-ominaisuuden: { buttonApp: 'buttonApp@http://localhost:3001/remoteEntry.js' }. Avain on import-nimiavaruus, ja arvo yhdistää remoten nimen ja URL-osoitteen @-merkillä — näin Webpack tietää, mistä remote noudetaan ajonaikana.

Hostin React-koodissa remote-komponentti tuodaan dynaamisella importilla: const Button = React.lazy(() => import('buttonApp/Button')). Import-polku vastaa remoten nimiavaruutta ja exposattua moduulinimeä. React.lazy mahdollistaa importin koodin pilkkomisen ja lataa sen asynkronisesti.

Koska remote-moduulit ladataan asynkronisesti, käärikää lazy-importattu remote-komponentti aina Suspense-rajauksen sisään: Suspense fallback=Loading... /. Fallback näytetään, kun Module Federation noutaa remoteEntry.js-tiedoston ja komponentin chunkin remoten URL-osoitteesta.

Reactin hookit (useState, useContext, useEffect) tarvitsevat yhden sisäisen React-instanssin komponentin tilan seuraamiseen. Jos sekä host että remote lataavat oman React-kopionsa, hookit aiheuttavat "invalid hook call" -virheitä. singleton:true pakottaa ne käyttämään samaa React-instanssia ja ratkaisee tämän virheluokan kokonaan.

Kun host käyttää react@18.2.0 ja remote käyttää react@18.3.0, Module Federationin shared scope neuvottelee käytettävästä versiosta. singleton:true- ja requiredVersion-asetuksilla se käyttää yleensä suurempaa versiota, jos se on yhteensopiva. Asetus requiredVersion: '>=18.0.0' kiinteän version sijaan mahdollistaa joustavat versioalueet.

TypeScript ei tunne remote-moduuleja käännösaikana, joten importit kuten import('buttonApp/Button') aiheuttavat tyyppivirheitä ilman määrityksiä. Käyttäkää @module-federation/typescript-pakettia tai luokaa manuaalisesti .d.ts-tiedostoja, jotka ilmoittavat moduulien tyypit. Näin saatte tyyppiturvallisuuden remote-komponenttien propseille.

Käynnistäkää molemmat sovellukset samanaikaisesti: remote portissa 3001 ja host portissa 3000. Avatkaa host — sen Module Federation -runtime noutaa osoitteesta http://localhost:3001/remoteEntry.js Button-moduulin, lataa sen chunkin ja renderöi sen host-sovelluksessa aivan kuin kyseessä olisi paikallinen komponentti.

Korvatkaa tuotannossa localhost:3001 käyttöönotetun remoten URL-osoitteella. Yleinen käytäntö on käyttää ympäristömuuttujaa remoten URL-osoitteelle, jotta CI/CD voi välittää oikean URL-osoitteen kuhunkin ympäristöön: buttonApp: 'buttonApp@' + process.env.BUTTON_REMOTE_URL + '/remoteEntry.js'.

Module Federationin määrittäminen edellyttää ModuleFederationPluginia sekä remotessa (name, filename, exposes) että hostissa (remotes). Käyttäkää remote-komponentteja React.lazy + dynamic import -yhdistelmällä ja käärikää ne Suspenseen. React ja React DOM on jaettava singleton-moduuleina, jotta usean instanssin hook-virheet vältetään. TypeScript-määritykset ja ympäristömuuttujista saatavat remoten URL-osoitteet täydentävät tuotantovalmiin määrityksen.