16. august 2025Eesti

Avage mikro-frontendide võimsus JavaScript Module Federationi abil Webpack 5-s. Õppige, kuidas ehitada skaleeritavaid, hooldatavaid ja iseseisvaid veebirakendusi.

JavaScript Module Federation Webpack 5-ga: Põhjalik Juhend Mikro-frontendidest

Pidevalt arenevas veebiarenduse maastikul võib suurte ja keerukate rakenduste ehitamine olla hirmutav ülesanne. Traditsioonilised monoliitsed arhitektuurid toovad sageli kaasa pikema arendusaja, juurutamise kitsaskohad ja väljakutsed koodikvaliteedi säilitamisel. Mikro-frontendid on esile kerkinud võimsa arhitektuurimustrina, et neid väljakutseid lahendada, võimaldades meeskondadel ehitada ja juurutada suurema veebirakenduse iseseisvaid osi. Üks lootustandvamaid tehnoloogiaid mikro-frontendide rakendamiseks on JavaScript Module Federation, mis tutvustati Webpack 5-s.

Mis on mikro-frontendid?

Mikro-frontendid on arhitektuuristiil, kus frontend-rakendus jaotatakse väiksemateks, iseseisvateks üksusteks, mida erinevad meeskonnad saavad autonoomselt arendada, testida ja juurutada. Iga mikro-frontend vastutab konkreetse ärivaldkonna või funktsiooni eest ning need koostatakse käitusajal kokku, et moodustada täielik kasutajaliides.

Mõelge sellest kui ettevõttest: selle asemel, et omada üht hiiglaslikku arendusmeeskonda, on teil mitu väiksemat meeskonda, mis keskenduvad konkreetsetele valdkondadele. Iga meeskond saab töötada iseseisvalt, mis võimaldab kiiremaid arendustsükleid ja lihtsamat hooldust. Kujutage ette suurt e-kaubanduse platvormi nagu Amazon; erinevad meeskonnad võivad hallata tootekataloogi, ostukorvi, kassaprotsessi ja kasutajakonto haldust. Need kõik võiksid olla iseseisvad mikro-frontendid.

Mikro-frontendide eelised:

Sõltumatud juurutused: Meeskonnad saavad oma mikro-frontende iseseisvalt juurutada, mõjutamata rakenduse teisi osi. See vähendab juurutamisriski ja võimaldab kiiremaid väljalasketsükleid.
Tehnoloogiast sõltumatu: Erinevaid mikro-frontende saab ehitada erinevate tehnoloogiate või raamistike abil (nt React, Angular, Vue.js). See võimaldab meeskondadel valida oma konkreetsete vajaduste jaoks parima tehnoloogia ja järk-järgult kasutusele võtta uusi tehnoloogiaid, ilma et peaks kogu rakendust ümber kirjutama. Kujutage ette, et üks meeskond kasutab Reacti tootekataloogi jaoks, teine Vue.js-i turunduse sihtlehtede jaoks ja kolmas Angularit kassaprotsessi jaoks.
Parem meeskonna autonoomia: Meeskondadel on täielik omandiõigus oma mikro-frontendide üle, mis toob kaasa suurema autonoomia, kiirema otsustusprotsessi ja parema arendaja tootlikkuse.
Suurenenud skaleeritavus: Mikro-frontendid võimaldavad teil oma rakendust horisontaalselt skaleerida, juurutades üksikuid mikro-frontende erinevatesse serveritesse.
Koodi taaskasutatavus: Jagatud komponente ja teeke saab hõlpsasti mikro-frontendide vahel jagada.
Lihtsam hooldada: Väiksemaid koodibaase on üldiselt lihtsam mõista, hooldada ja siluda.

Mikro-frontendide väljakutsed:

Suurenenud keerukus: Mitme mikro-frontendi haldamine võib lisada üldisele arhitektuurile keerukust, eriti suhtluse, olekuhalduse ja juurutamise osas.
Jõudluse lisakulu: Mitme mikro-frontendi laadimine võib tekitada jõudluse lisakulu, eriti kui neid ei ole korralikult optimeeritud.
Läbivad mured: Läbivate murede, nagu autentimine, autoriseerimine ja teemade haldamine, võib mikro-frontend arhitektuuris olla keeruline.
Operatiivne lisakulu: Nõuab küpseid DevOps-praktikaid ja taristut, et hallata mitme mikro-frontendi juurutamist ja jälgimist.

Mis on JavaScript Module Federation?

JavaScript Module Federation on Webpack 5 funktsioon, mis võimaldab teil käitusajal jagada koodi eraldi kompileeritud JavaScripti rakenduste vahel. See võimaldab teil paljastada oma rakenduse osi "moodulitena", mida teised rakendused saavad tarbida, ilma et peaksite neid avaldama kesksesse hoidlasse nagu npm.

Mõelge Module Federationist kui viisist luua födereeritud rakenduste ökosüsteem, kus iga rakendus saab panustada oma funktsionaalsusega ja tarbida funktsionaalsust teistelt rakendustelt. See välistab vajaduse kompileerimisaegsete sõltuvuste järele ja võimaldab tõeliselt iseseisvaid juurutusi.

Näiteks saab disainisüsteemi meeskond paljastada UI komponente moodulitena ja erinevad rakenduste meeskonnad saavad neid komponente tarbida otse disainisüsteemi rakendusest, ilma et peaksid neid npm-pakettidena installima. Kui disainisüsteemi meeskond komponente uuendab, kajastuvad muudatused automaatselt kõigis tarbivates rakendustes.

Module Federationi põhimõisted:

Host: Peamine rakendus, mis tarbib kaugel asuvaid mooduleid (remote modules).
Remote: Rakendus, mis paljastab mooduleid teiste rakenduste poolt tarbimiseks.
Jagatud moodulid (Shared Modules): Moodulid, mida jagatakse host- ja remote-rakenduste vahel (nt React, Lodash). Module Federation suudab automaatselt hallata jagatud moodulite versioonimist ja dubleerimise vältimist, et tagada ainult ühe versiooni laadimine igast moodulist.
Paljastatud moodulid (Exposed Modules): Konkreetsed moodulid remote-rakendusest, mis on tehtud kättesaadavaks teiste rakenduste poolt tarbimiseks.
RemoteEntry.js: Webpacki genereeritud fail, mis sisaldab metaandmeid remote-rakenduse paljastatud moodulite kohta. Host-rakendus kasutab seda faili kaugel asuvate moodulite avastamiseks ja laadimiseks.

Module Federationi seadistamine Webpack 5-ga: Praktiline juhend

Vaatame läbi praktilise näite Module Federationi seadistamisest Webpack 5-ga. Loome kaks lihtsat rakendust: Host rakenduse ja Remote rakenduse. Remote-rakendus paljastab komponendi ja Host-rakendus tarbib seda.

1. Projekti seadistamine

Looge oma rakenduste jaoks kaks eraldi kataloogi: `host` ja `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. Remote-rakenduse seadistamine

Kataloogis `remote` looge järgmised failid:

`src/index.js`: Rakenduse sisenemispunkt.
`src/RemoteComponent.jsx`: Komponent, mis paljastatakse.
`webpack.config.js`: Webpacki seadistusfail.

src/index.js:

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

Remote Rakendus

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

src/RemoteComponent.jsx:

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

See on Remote Komponent!

Renderdatud Remote-rakendusest.

); 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'], }, }; ```

Looge `public/index.html` fail põhilise HTML struktuuriga. Oluline on `

3. Host-rakenduse seadistamine

Kataloogis `host` looge järgmised failid:

`src/index.js`: Rakenduse sisenemispunkt.
`webpack.config.js`: Webpacki seadistusfail.

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 Rakendus

Laen Remote Komponenti...

); 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'], }, }; ```

Looge `public/index.html` fail põhilise HTML struktuuriga (sarnaselt remote-rakendusele). Oluline on `

4. Installi Babel

Nii `host` kui ka `remote` kataloogides installige Babeli sõltuvused:

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

5. Käivitage rakendused

Nii `host` kui ka `remote` kataloogides lisage `package.json` faili järgmine skript:

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

Nüüd käivitage mõlemad rakendused:

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

Avage oma brauser ja navigeerige aadressile `http://localhost:3000`. Peaksite nägema Host-rakendust, mille sees on renderdatud Remote-komponent.

Põhiseadistusvalikute selgitus:

`name`: Rakenduse unikaalne nimi.
`filename`: Faili nimi, mis sisaldab metaandmeid paljastatud moodulite kohta (nt `remoteEntry.js`).
`exposes`: Moodulite nimede ja failiteede vastavus, mis määrab, millised moodulid peaksid olema paljastatud.
`remotes`: Remote-rakenduste nimede ja URL-ide vastavus, mis määrab, kust leida iga remote-rakenduse remoteEntry.js fail.
`shared`: Moodulite loend, mida tuleks jagada host- ja remote-rakenduste vahel. Valik `singleton: true` tagab, et igast jagatud moodulist laaditakse ainult üks eksemplar. Valik `eager: true` tagab, et jagatud moodul laaditakse innukalt (st enne mis tahes muid mooduleid).

Edasijõudnud Module Federation tehnikad

Module Federation pakub palju edasijõudnud funktsioone, mis aitavad teil ehitada veelgi keerukamaid mikro-frontend arhitektuure.

Dünaamilised remote'id

Selle asemel, et remote-rakenduste URL-e Webpacki seadistuses kõvakodeerida, saate neid käitusajal dünaamiliselt laadida. See võimaldab teil hõlpsasti uuendada remote-rakenduste asukohta, ilma et peaksite host-rakendust uuesti ehitama.

Näiteks võite salvestada remote-rakenduste URL-id konfiguratsioonifaili või andmebaasi ja laadida need dünaamiliselt JavaScripti abil.

```javascript // In webpack.config.js remotes: { remote: `promise new Promise(resolve => { const urlParams = new URLSearchParams(window.location.search); const remoteUrl = urlParams.get('remote'); // Eeldame, et remoteUrl on midagi sarnast 'http://localhost:3001/remoteEntry.js' const script = document.createElement('script'); script.src = remoteUrl; script.onload = () => { // module federationi võti on see, et remote-rakendus on // kättesaadav remote'is määratud nime kaudu resolve(window.remote); }; document.head.appendChild(script); })`, }, ```

Nüüd saate laadida host-rakenduse päringu parameetriga `?remote=http://localhost:3001/remoteEntry.js`

Versioonitud jagatud moodulid

Module Federation suudab automaatselt hallata jagatud moodulite versioonimist ja dubleerimise vältimist, et tagada ainult ühe ühilduva versiooni laadimine igast moodulist. See on eriti oluline suurte ja keerukate rakenduste puhul, millel on palju sõltuvusi.

Saate määrata iga jagatud mooduli versioonivahemiku Webpacki seadistuses.

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

Kohandatud moodulilaadijad

Module Federation võimaldab teil määratleda kohandatud moodulilaadijaid, mida saab kasutada moodulite laadimiseks erinevatest allikatest või erinevates vormingutes. See võib olla kasulik moodulite laadimiseks CDN-ist või kohandatud mooduliregistrist.

Oleku jagamine mikro-frontendide vahel

Üks mikro-frontend arhitektuuride väljakutseid on oleku jagamine erinevate mikro-frontendide vahel. Selle väljakutse lahendamiseks on mitu lähenemisviisi:

URL-põhine olekuhaldus: Salvestage olek URL-i ja kasutage URL-i mikro-frontendide vahel suhtlemiseks. See on lihtne ja otsekohene lähenemine, kuid see võib muutuda keerulise oleku puhul kohmakaks.
Kohandatud sündmused: Kasutage kohandatud sündmusi olekumuudatuste edastamiseks mikro-frontendide vahel. See võimaldab mikro-frontendide vahel lõdva sidumise, kuid sündmuste tellimuste haldamine võib olla keeruline.
Jagatud olekuhalduse teek: Kasutage jagatud olekuhalduse teeki nagu Redux või MobX kogu rakenduse oleku haldamiseks. See pakub tsentraliseeritud ja järjepidevat viisi oleku haldamiseks, kuid see võib tekitada sõltuvuse konkreetsest olekuhalduse teegist.
Sõnumivahendaja (Message Broker): Kasutage sõnumivahendajat nagu RabbitMQ või Kafka, et hõlbustada suhtlust ja oleku jagamist mikro-frontendide vahel. See on keerulisem lahendus, kuid pakub suurt paindlikkust ja skaleeritavust.

Parimad praktikad mikro-frontendide rakendamiseks Module Federationiga

Siin on mõned parimad praktikad, mida meeles pidada mikro-frontendide rakendamisel Module Federationiga:

Määratlege iga mikro-frontendi jaoks selged piirid: Iga mikro-frontend peaks vastutama konkreetse ärivaldkonna või funktsiooni eest ja omama hästi määratletud liideseid.
Kasutage järjepidevat tehnoloogiapaketti: Kuigi Module Federation võimaldab teil kasutada erinevate mikro-frontendide jaoks erinevaid tehnoloogiaid, on üldiselt hea mõte kasutada järjepidevat tehnoloogiapaketti, et vähendada keerukust ja parandada hooldatavust.
Kehtestage selged suhtlusprotokollid: Määratlege selged suhtlusprotokollid selle kohta, kuidas mikro-frontendid peaksid omavahel suhtlema.
Automatiseerige juurutamisprotsess: Automatiseerige juurutamisprotsess, et tagada mikro-frontendide iseseisev ja usaldusväärne juurutamine. Kaaluge CI/CD torujuhtmete ja infrastruktuur-koodina tööriistade kasutamist.
Jälgige oma mikro-frontendide jõudlust: Jälgige oma mikro-frontendide jõudlust, et tuvastada ja lahendada jõudluse kitsaskohti. Kasutage tööriistu nagu Google Analytics, New Relic või Datadog.
Rakendage robustne veakäsitlus: Rakendage robustne veakäsitlus, et tagada teie rakenduse vastupidavus riketele.
Võtke omaks detsentraliseeritud juhtimismudel: Andke meeskondadele volitused teha otsuseid oma mikro-frontendide kohta, säilitades samal ajal üldise järjepidevuse ja kvaliteedi.

Reaalse maailma näited Module Federationi kasutamisest

Kuigi konkreetsed juhtumiuuringud on sageli konfidentsiaalsed, on siin mõned üldistatud stsenaariumid, kus Module Federation võib olla uskumatult kasulik:

E-kaubanduse platvormid: Nagu varem mainitud, saavad suured e-kaubanduse platvormid kasutada Module Federationi iseseisvate mikro-frontendide ehitamiseks tootekataloogi, ostukorvi, kassaprotsessi ja kasutajakonto halduse jaoks. See võimaldab erinevatel meeskondadel nende funktsioonide kallal iseseisvalt töötada ja neid juurutada, mõjutamata rakenduse teisi osi. Globaalne platvorm võiks kohandada funktsioone erinevate piirkondade jaoks remote-moodulite kaudu.
Finantsteenuste rakendused: Finantsteenuste rakendustel on sageli keerukad kasutajaliidesed paljude erinevate funktsioonidega. Module Federationi saab kasutada iseseisvate mikro-frontendide ehitamiseks erinevate kontotüüpide, kauplemisplatvormide ja aruandlusarmatuurlaudade jaoks. Teatud riikidele omaseid vastavusfunktsioone saab tarnida Module Federationi kaudu.
Tervishoiuportaalid: Tervishoiuportaalid saavad kasutada Module Federationi iseseisvate mikro-frontendide ehitamiseks patsientide haldamiseks, vastuvõtuaegade broneerimiseks ja meditsiiniliste andmete juurdepääsuks. Erinevate kindlustusandjate või piirkondade jaoks mõeldud erinevaid mooduleid saab dünaamiliselt laadida.
Sisuhaldussüsteemid (CMS): CMS saab kasutada Module Federationi, et võimaldada kasutajatel lisada oma veebisaitidele kohandatud funktsionaalsust, laadides remote-mooduleid kolmandate osapoolte arendajatelt. Erinevaid teemasid, pistikprogramme ja vidinaid saab levitada iseseisvate mikro-frontendidena.
Õpihaldussüsteemid (LMS): LMS saab pakkuda kursusi, mis on arendatud iseseisvalt ja integreeritud ühtsesse platvormi Module Federationi kaudu. Üksikute kursuste uuendused не nõua platvormiülest uuesti juurutamist.

Kokkuvõte

JavaScript Module Federation Webpack 5-s pakub võimsat ja paindlikku viisi mikro-frontend arhitektuuride ehitamiseks. See võimaldab teil jagada koodi eraldi kompileeritud JavaScripti rakenduste vahel käitusajal, võimaldades iseseisvaid juurutusi, tehnoloogilist mitmekesisust ja paremat meeskonna autonoomiat. Järgides selles juhendis toodud parimaid praktikaid, saate Module Federationi abil ehitada skaleeritavaid, hooldatavaid ja uuenduslikke veebirakendusi.

Frontend-arenduse tulevik kaldub kahtlemata modulaarsete ja hajutatud arhitektuuride poole. Module Federation pakub olulist tööriista nende kaasaegsete süsteemide ehitamiseks, võimaldades meeskondadel luua keerukaid rakendusi suurema kiiruse, paindlikkuse ja vastupidavusega. Tehnoloogia küpsedes võime oodata veelgi uuenduslikumate kasutusjuhtude ja parimate praktikate esilekerkimist.