2025. augusztus 16.Magyar

Fedezze fel a mikro-frontendek erejét a JavaScript Module Federation segítségével a Webpack 5-ben. Tanulja meg, hogyan építhet skálázható, karbantartható és független webalkalmazásokat.

JavaScript Module Federation a Webpack 5-ben: Átfogó útmutató a mikro-frontendekhez

A webfejlesztés folyamatosan fejlődő világában a nagy és összetett alkalmazások építése ijesztő feladat lehet. A hagyományos monolitikus architektúrák gyakran megnövekedett fejlesztési időhöz, telepítési szűk keresztmetszetekhez és a kódminőség fenntartásának kihívásaihoz vezetnek. A mikro-frontendek erőteljes architekturális mintaként jelentek meg ezen kihívások kezelésére, lehetővé téve a csapatok számára, hogy egy nagyobb webalkalmazás független részeit építsék és telepítsék. A mikro-frontendek megvalósítására az egyik legígéretesebb technológia a JavaScript Module Federation, amelyet a Webpack 5-ben vezettek be.

Mik azok a mikro-frontendek?

A mikro-frontendek egy olyan architekturális stílus, ahol egy frontend alkalmazást kisebb, független egységekre bontanak, amelyeket különböző csapatok önállóan fejleszthetnek, tesztelhetnek és telepíthetnek. Minden mikro-frontend egy adott üzleti területért vagy funkcióért felelős, és ezek futásidőben állnak össze a teljes felhasználói felület létrehozásához.

Gondoljunk rá úgy, mint egy cégre: egyetlen óriási fejlesztőcsapat helyett több kisebb csapat van, amelyek meghatározott területekre összpontosítanak. Minden csapat önállóan dolgozhat, ami gyorsabb fejlesztési ciklusokat és könnyebb karbantartást tesz lehetővé. Vegyünk egy nagy e-kereskedelmi platformot, mint az Amazon; különböző csapatok kezelhetik a termékkatalógust, a bevásárlókosarat, a fizetési folyamatot és a felhasználói fiókok kezelését. Ezek mind független mikro-frontendek lehetnek.

A mikro-frontendek előnyei:

Független telepítések: A csapatok önállóan telepíthetik a mikro-frontendjeiket anélkül, hogy az alkalmazás más részeit befolyásolnák. Ez csökkenti a telepítési kockázatot és gyorsabb kiadási ciklusokat tesz lehetővé.
Technológiafüggetlen: A különböző mikro-frontendek különböző technológiákkal vagy keretrendszerekkel (pl. React, Angular, Vue.js) is épülhetnek. Ez lehetővé teszi a csapatok számára, hogy a sajátos igényeiknek legmegfelelőbb technológiát válasszák, és hogy fokozatosan vezessenek be új technológiákat anélkül, hogy az egész alkalmazást újra kellene írni. Képzeljük el, hogy az egyik csapat Reactot használ a termékkatalógushoz, egy másik Vue.js-t a marketing céloldalakhoz, egy harmadik pedig Angulart a fizetési folyamathoz.
Nagyobb csapat-autonómia: A csapatok teljes felelősséggel bírnak a saját mikro-frontendjeik felett, ami növeli az autonómiát, gyorsabb döntéshozatalt és jobb fejlesztői termelékenységet eredményez.
Fokozott skálázhatóság: A mikro-frontendek lehetővé teszik az alkalmazás horizontális skálázását az egyes mikro-frontendek különböző szervereken történő telepítésével.
Kód újrafelhasználhatósága: A megosztott komponensek és könyvtárak könnyen megoszthatók a mikro-frontendek között.
Könnyebb karbantartás: A kisebb kódbázisokat általában könnyebb megérteni, karbantartani és hibakeresést végezni rajtuk.

A mikro-frontendek kihívásai:

Megnövekedett komplexitás: Több mikro-frontend kezelése növelheti az általános architektúra bonyolultságát, különösen a kommunikáció, az állapotkezelés és a telepítés terén.
Teljesítménybeli többletterhelés: Több mikro-frontend betöltése teljesítménybeli többletterhelést okozhat, különösen, ha nincsenek megfelelően optimalizálva.
Átfogó szempontok kezelése: Az átfogó szempontok, mint a hitelesítés, engedélyezés és a témázás kezelése kihívást jelenthet egy mikro-frontend architektúrában.
Működési többletterhelés: Érett DevOps gyakorlatokat és infrastruktúrát igényel a több mikro-frontend telepítésének és monitorozásának kezeléséhez.

Mi az a JavaScript Module Federation?

A JavaScript Module Federation a Webpack 5 egyik funkciója, amely lehetővé teszi a kód megosztását külön lefordított JavaScript alkalmazások között futásidőben. Lehetővé teszi, hogy az alkalmazás részeit „modulokként” tegye közzé, amelyeket más alkalmazások felhasználhatnak anélkül, hogy egy központi tárolóba, például az npm-be kellene publikálni őket.

Gondoljunk a Module Federationre úgy, mint egy módra, amellyel egy föderált alkalmazás-ökoszisztémát hozhatunk létre, ahol minden alkalmazás hozzájárulhat a saját funkcionalitásával, és felhasználhatja más alkalmazások funkcionalitását. Ez szükségtelenné teszi a build-idejű függőségeket, és lehetővé teszi a valóban független telepítéseket.

Például egy design system csapat közzétehet UI komponenseket modulokként, és a különböző alkalmazásfejlesztő csapatok közvetlenül a design system alkalmazásból használhatják ezeket a komponenseket anélkül, hogy npm csomagként telepítenék őket. Amikor a design system csapat frissíti a komponenseket, a változások automatikusan megjelennek az összes felhasználó alkalmazásban.

A Module Federation kulcsfogalmai:

Fogadó (Host): A fő alkalmazás, amely a távoli modulokat használja.
Távoli (Remote): Egy alkalmazás, amely modulokat tesz közzé más alkalmazások számára.
Megosztott modulok: Olyan modulok, amelyek meg vannak osztva a fogadó és a távoli alkalmazások között (pl. React, Lodash). A Module Federation automatikusan kezeli a megosztott modulok verziókezelését és deduplikációját, hogy biztosítsa, hogy minden modulból csak egy verzió töltődjön be.
Közzétett modulok: Egy távoli alkalmazásból származó specifikus modulok, amelyek elérhetővé válnak más alkalmazások számára.
RemoteEntry.js: A Webpack által generált fájl, amely a távoli alkalmazás közzétett moduljainak metaadatait tartalmazza. A fogadó alkalmazás ezt a fájlt használja a távoli modulok felderítésére és betöltésére.

A Module Federation beállítása a Webpack 5-tel: Gyakorlati útmutató

Nézzünk végig egy gyakorlati példát a Module Federation beállítására a Webpack 5 segítségével. Két egyszerű alkalmazást hozunk létre: egy Fogadó (Host) alkalmazást és egy Távoli (Remote) alkalmazást. A Távoli alkalmazás közzétesz egy komponenst, a Fogadó alkalmazás pedig felhasználja azt.

1. Projekt beállítása

Hozzon létre két külön könyvtárat az alkalmazások számára: `host` és `remote`.

```bash mkdir host remote cd host npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom cd ../remote npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom ```

2. A távoli alkalmazás konfigurálása

A `remote` könyvtárban hozza létre a következő fájlokat:

`src/index.js`: Az alkalmazás belépési pontja.
`src/RemoteComponent.jsx`: A komponens, amelyet közzéteszünk.
`webpack.config.js`: A Webpack konfigurációs fájl.

src/index.js:

```javascript import React from 'react'; import ReactDOM from 'react-dom/client'; import RemoteComponent from './RemoteComponent'; const App = () => (

Remote Application

); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

src/RemoteComponent.jsx:

```javascript import React from 'react'; const RemoteComponent = () => (

This is a Remote Component!

Rendered from the Remote Application.

); export default RemoteComponent; ```

webpack.config.js:

```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3001, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'remote', filename: 'remoteEntry.js', exposes: { './RemoteComponent': './src/RemoteComponent', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```

Hozzon létre egy `public/index.html` fájlt alapvető HTML szerkezettel. Fontos, hogy tartalmazza a `

` elemet.

3. A fogadó alkalmazás konfigurálása

A `host` könyvtárban hozza létre a következő fájlokat:

`src/index.js`: Az alkalmazás belépési pontja.
`webpack.config.js`: A Webpack konfigurációs fájl.

src/index.js:

```javascript import React, { Suspense } from 'react'; import ReactDOM from 'react-dom/client'; const RemoteComponent = React.lazy(() => import('remote/RemoteComponent')); const App = () => (

Host Application

Loading Remote Component...

); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

webpack.config.js:

```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3000, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'host', remotes: { remote: 'remote@http://localhost:3001/remoteEntry.js', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```

Hozzon létre egy `public/index.html` fájlt alapvető HTML szerkezettel (hasonlóan a távoli alkalmazáshoz). Fontos, hogy tartalmazza a `

` elemet.

4. A Babel telepítése

Mind a `host`, mind a `remote` könyvtárban telepítse a Babel függőségeit:

```bash npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader ```

5. Az alkalmazások futtatása

Mind a `host`, mind a `remote` könyvtárban adja hozzá a következő szkriptet a `package.json` fájlhoz:

```json "scripts": { "start": "webpack serve" } ```

Most indítsa el mindkét alkalmazást:

```bash cd remote npm start cd ../host npm start ```

Nyissa meg a böngészőjét, és navigáljon a `http://localhost:3000` címre. Látnia kell a Fogadó alkalmazást, benne a Távoli komponenst megjelenítve.

A legfontosabb konfigurációs opciók magyarázata:

`name`: Az alkalmazás egyedi neve.
`filename`: Annak a fájlnak a neve, amely a közzétett modulok metaadatait tartalmazza (pl. `remoteEntry.js`).
`exposes`: Egy leképezés a modulnevek és a fájlútvonalak között, amely meghatározza, mely modulokat kell közzétenni.
`remotes`: Egy leképezés a távoli alkalmazásnevek és URL-ek között, amely meghatározza, hol található az egyes távoli alkalmazások remoteEntry.js fájlja.
`shared`: Azon modulok listája, amelyeket meg kell osztani a fogadó és a távoli alkalmazások között. A `singleton: true` opció biztosítja, hogy minden megosztott modulból csak egy példány töltődjön be. Az `eager: true` opció biztosítja, hogy a megosztott modul mohón (azaz minden más modul előtt) töltődjön be.

Haladó Module Federation technikák

A Module Federation számos haladó funkciót kínál, amelyek segítségével még kifinomultabb mikro-frontend architektúrákat építhet.

Dinamikus távoli modulok (Remotes)

Ahelyett, hogy a távoli alkalmazások URL-jeit keményen bekódolná a Webpack konfigurációba, dinamikusan is betöltheti őket futásidőben. Ez lehetővé teszi a távoli alkalmazások helyének egyszerű frissítését anélkül, hogy újra kellene buildelni a fogadó alkalmazást.

Például tárolhatja a távoli alkalmazások URL-jeit egy konfigurációs fájlban vagy egy adatbázisban, és dinamikusan betöltheti őket JavaScript segítségével.

```javascript // A webpack.config.js-ben remotes: { remote: `promise new Promise(resolve => { const urlParams = new URLSearchParams(window.location.search); const remoteUrl = urlParams.get('remote'); // Tegyük fel, hogy a remoteUrl valami ilyesmi: 'http://localhost:3001/remoteEntry.js' const script = document.createElement('script'); script.src = remoteUrl; script.onload = () => { // a module federation kulcsa, hogy a távoli alkalmazás // a távoli alkalmazás nevével érhető el resolve(window.remote); }; document.head.appendChild(script); })`, }, ```

Most már betöltheti a fogadó alkalmazást egy `?remote=http://localhost:3001/remoteEntry.js` lekérdezési paraméterrel.

Verziózott megosztott modulok

A Module Federation automatikusan kezeli a megosztott modulok verziókezelését és deduplikációját, hogy biztosítsa, hogy minden modulból csak egy kompatibilis verzió töltődjön be. Ez különösen fontos nagy és összetett alkalmazások esetében, amelyeknek sok függőségük van.

A Webpack konfigurációban megadhatja az egyes megosztott modulok verziótartományát.

```javascript // A webpack.config.js-ben shared: { react: { singleton: true, eager: true, requiredVersion: '^18.0.0' }, 'react-dom': { singleton: true, eager: true, requiredVersion: '^18.0.0' }, }, ```

Egyéni modulbetöltők

A Module Federation lehetővé teszi egyéni modulbetöltők definiálását, amelyekkel különböző forrásokból vagy különböző formátumokban tölthet be modulokat. Ez hasznos lehet modulok CDN-ről vagy egyéni modultárolóból történő betöltéséhez.

Állapotmegosztás a mikro-frontendek között

A mikro-frontend architektúrák egyik kihívása az állapotmegosztás a különböző mikro-frontendek között. Számos megközelítést alkalmazhat e kihívás kezelésére:

URL-alapú állapotkezelés: Tárolja az állapotot az URL-ben, és használja az URL-t a mikro-frontendek közötti kommunikációra. Ez egy egyszerű és egyértelmű megközelítés, de bonyolult állapotok esetén nehézkessé válhat.
Egyéni események (Custom events): Használjon egyéni eseményeket az állapotváltozások közvetítésére a mikro-frontendek között. Ez laza csatolást tesz lehetővé a mikro-frontendek között, de az eseményfeliratkozások kezelése nehézkes lehet.
Megosztott állapotkezelő könyvtár: Használjon egy megosztott állapotkezelő könyvtárat, mint a Redux vagy a MobX, az egész alkalmazás állapotának kezelésére. Ez központosított és következetes módot biztosít az állapotkezelésre, de függőséget vezethet be egy adott állapotkezelő könyvtárral szemben.
Üzenetközvetítő (Message Broker): Használjon egy üzenetközvetítőt, mint a RabbitMQ vagy a Kafka, a kommunikáció és az állapotmegosztás megkönnyítésére a mikro-frontendek között. Ez egy bonyolultabb megoldás, de nagyfokú rugalmasságot és skálázhatóságot kínál.

Bevált gyakorlatok a mikro-frontendek Module Federation-nel történő megvalósításához

Íme néhány bevált gyakorlat, amelyet érdemes szem előtt tartani a mikro-frontendek Module Federation-nel történő megvalósítása során:

Határozzon meg egyértelmű határokat minden mikro-frontend számára: Minden mikro-frontendnek egy adott üzleti területért vagy funkcióért kell felelősnek lennie, és jól definiált interfészekkel kell rendelkeznie.
Használjon következetes technológiai vermet: Bár a Module Federation lehetővé teszi különböző technológiák használatát a különböző mikro-frontendekhez, általában jó ötlet következetes technológiai vermet használni a komplexitás csökkentése és a karbantarthatóság javítása érdekében.
Hozzon létre egyértelmű kommunikációs protokollokat: Határozzon meg egyértelmű kommunikációs protokollokat arra vonatkozóan, hogy a mikro-frontendek hogyan lépjenek kapcsolatba egymással.
Automatizálja a telepítési folyamatot: Automatizálja a telepítési folyamatot annak biztosítása érdekében, hogy a mikro-frontendek függetlenül és megbízhatóan telepíthetők legyenek. Fontolja meg a CI/CD pipeline-ok és az infrastruktúra-mint-kód eszközök használatát.
Figyelje a mikro-frontendek teljesítményét: Figyelje a mikro-frontendek teljesítményét a teljesítménybeli szűk keresztmetszetek azonosítása és kezelése érdekében. Használjon olyan eszközöket, mint a Google Analytics, a New Relic vagy a Datadog.
Implementáljon robusztus hibakezelést: Implementáljon robusztus hibakezelést annak biztosítása érdekében, hogy az alkalmazása ellenálló legyen a hibákkal szemben.
Alkalmazzon decentralizált irányítási modellt: Adjon hatalmat a csapatoknak, hogy döntéseket hozzanak a saját mikro-frontendjeikről, miközben fenntartja az általános következetességet és minőséget.

Valós példák a Module Federation működésére

Bár a konkrét esettanulmányok gyakran bizalmasak, íme néhány általánosított forgatókönyv, ahol a Module Federation rendkívül hasznos lehet:

E-kereskedelmi platformok: Ahogy korábban említettük, a nagy e-kereskedelmi platformok a Module Federation segítségével független mikro-frontendeket építhetnek a termékkatalógushoz, a bevásárlókosárhoz, a fizetési folyamathoz és a felhasználói fiókok kezeléséhez. Ez lehetővé teszi, hogy a különböző csapatok egymástól függetlenül dolgozzanak ezeken a funkciókon, és anélkül telepítsék őket, hogy az alkalmazás más részeit befolyásolnák. Egy globális platform távoli modulokon keresztül testreszabhatja a funkciókat a különböző régiók számára.
Pénzügyi szolgáltatási alkalmazások: A pénzügyi szolgáltatási alkalmazásoknak gyakran összetett felhasználói felületeik vannak, sok különböző funkcióval. A Module Federation segítségével független mikro-frontendeket lehet építeni a különböző számlatípusokhoz, kereskedési platformokhoz és jelentési műszerfalakhoz. Bizonyos országokra jellemző megfelelőségi funkciókat a Module Federation segítségével lehet szállítani.
Egészségügyi portálok: Az egészségügyi portálok a Module Federation segítségével független mikro-frontendeket építhetnek a betegkezeléshez, időpontfoglaláshoz és orvosi nyilvántartásokhoz való hozzáféréshez. Különböző biztosítókhoz vagy régiókhoz tartozó különböző modulok dinamikusan betölthetők.
Tartalomkezelő rendszerek (CMS): Egy CMS a Module Federation segítségével lehetővé teheti a felhasználók számára, hogy egyéni funkcionalitást adjanak a webhelyeikhez harmadik féltől származó fejlesztők távoli moduljainak betöltésével. Különböző témák, bővítmények és widgetek független mikro-frontendekként terjeszthetők.
Tanuláskezelő rendszerek (LMS): Egy LMS kínálhat egymástól függetlenül fejlesztett és a Module Federation révén egy egységes platformba integrált kurzusokat. Az egyes kurzusok frissítései nem igényelnek platformszintű újratelepítést.

Összegzés

A JavaScript Module Federation a Webpack 5-ben egy erőteljes és rugalmas módot kínál a mikro-frontend architektúrák építésére. Lehetővé teszi a kód megosztását külön lefordított JavaScript alkalmazások között futásidőben, ami független telepítéseket, technológiai sokszínűséget és jobb csapat-autonómiát tesz lehetővé. Az ebben az útmutatóban vázolt bevált gyakorlatok követésével kihasználhatja a Module Federation előnyeit skálázható, karbantartható és innovatív webalkalmazások építéséhez.

A frontend fejlesztés jövője kétségtelenül a moduláris és elosztott architektúrák felé hajlik. A Module Federation kulcsfontosságú eszközt biztosít ezeknek a modern rendszereknek az építéséhez, lehetővé téve a csapatok számára, hogy nagyobb sebességgel, rugalmassággal és ellenálló képességgel hozzanak létre összetett alkalmazásokat. Ahogy a technológia érik, még több innovatív felhasználási eset és bevált gyakorlat megjelenésére számíthatunk.