React Academy · Oppitunti

Module Federation Webpack 5:llä

Määrittäkää host- ja remote-sovellukset Webpack Module Federationilla komponenttien jakamiseksi ajonaikaisesti.

Oppitunti 2/412 vaihetta

Module Federation Webpack 5:llä on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Module Federationin yleiskatsaus

Webpack 5 Module Federation mahdollistaa JavaScript-moduulien jakamisen erikseen niputettujen sovellusten välillä ajonaikana — yksi sovellus tarjoaa komponentteja ja toinen käyttää niitä ilman koontivaihetta.

Roolit: host ja remote

remote tarjoaa moduuleja. host käyttää moduuleja yhdestä tai useammasta remotesta. Sovellus voi toimia samanaikaisesti sekä hostina että remotena.

Remoten määritys

Käyttäkää remote-sovelluksen webpack.config.js-tiedostossa ModuleFederationPlugin-laajennosta komponenttien tarjoamiseen.

// Remote: apps/products/webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'products',              // remote name
      filename: 'remoteEntry.js',    // entry file
      exposes: {
        './ProductCard': './src/components/ProductCard', // exposed module
        './CartButton': './src/components/CartButton',
      },
      shared: ['react', 'react-dom'], // share deps to avoid duplication
    }),
  ],
};

Hostin määritys

Ilmoittakaa host-sovelluksen webpack-määrityksessä, mitä remoteja käytetään ja mistä ne ladataan.

// Host: apps/shell/webpack.config.js
new ModuleFederationPlugin({
  name: 'shell',
  remotes: {
    products: 'products@http://localhost:3001/remoteEntry.js',
    cart: 'cart@http://localhost:3002/remoteEntry.js',
  },
  shared: ['react', 'react-dom'],
})

Remote-moduulin käyttäminen

Tuokaa remote-moduulit käyttämällä remoten nimeä polun etuliitteenä. Kääritkää ne React.lazy- ja Suspense-rakenteisiin laiskaa latausta varten.

import React, { lazy, Suspense } from 'react';

const ProductCard = lazy(() => import('products/ProductCard'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ProductCard productId="123" />
    </Suspense>
  );
}

Riippuvuuksien jakaminen

Luetelkaa jaetut paketit asetuksella singleton: true, jotta Reactista ladataan vain yksi kopio kaikkien mikrofrontendien kesken.

shared: {
  react: { singleton: true, requiredVersion: '^18.0.0' },
  'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
  '@company/design-system': { singleton: true },
},

Dynaamiset remotet

Ladatkaa remotet ajonaikana dynaamisesti määrityksistä (esimerkiksi manifest-päätepisteestä) sen sijaan, että kovakoodaisitte URL-osoitteet webpack-määritykseen.

async function loadRemote(scope, module) {
  await __webpack_init_sharing__('default');
  const container = window[scope];
  await container.init(__webpack_share_scopes__.default);
  const factory = await container.get(module);
  return factory();
}

const ProductCard = React.lazy(() => loadRemote('products', './ProductCard'));

TypeScript Module Federationin kanssa

Käyttäkää @module-federation/typescript-laajennosta luomaan tyyppimääritykset tarjotuille moduuleille, jotta hostit saavat täydellisen automaattisen täydennyksen.

Virherajat remote-virheiden käsittelyyn

Käärikää remote-komponentit virherajojen sisään. Jos remotea ei voida ladata, host-sovellus jatkaa toimintaansa hallitusti kaatumisen sijaan.

<ErrorBoundary fallback={<div>Product unavailable</div>}>
  <Suspense fallback={<Skeleton />}>
    <ProductCard productId={id} />
  </Suspense>
</ErrorBoundary>

Viten Module Federation

@originjs/vite-plugin-federation-laajennos tuo Module Federationin Vite-pohjaisiin projekteihin samankaltaisella rajapinnalla.

// vite.config.ts (remote)
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    federation({
      name: 'products',
      filename: 'remoteEntry.js',
      exposes: { './ProductCard': './src/ProductCard' },
      shared: ['react'],
    }),
  ],
});

Pikatarkistus

Mitä jaetun paketin asetuksen singleton: true määrittäminen Module Federationissa tekee?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Module Federation käyttää remoteissa ModuleFederationPlugin-laajennosta moduulien tarjoamiseen ja hosteissa niiden käyttämiseen. Tuokaa remote-moduulit lazy()-funktion avulla, jakakaa react singletonina päällekkäisyyden välttämiseksi ja käärikää remotet virherajojen sisään hallittua toiminnan heikkenemistä varten.

Aloita maksutta

Opi React tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 88
Oppitunnit: 324

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Module Federation Webpack 5:llä” ilmainen?

Kyllä – oppitunnin ”Module Federation Webpack 5:llä” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Module Federation Webpack 5:llä”?

Määrittäkää host- ja remote-sovellukset Webpack Module Federationilla komponenttien jakamiseksi ajonaikaisesti. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Module Federation Webpack 5:llä”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?

Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Micro-frontendien käsitteet ja kompromissit
Module Federation Webpack 5:llä
Jaettu tila ja reititys MFE:iden välillä
MFE:iden itsenäinen julkaisu ja CI-putket

← Takaisin: React Academy