npm install webpack webpack-cli webpack-dev-server --save-dev
            

              
                Copy
              
            
          

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index',
 output: {
 publicPath: 'http://localhost:3000/',
 },
 devServer: {
 port: 3000,
 hot: true,
 historyApiFallback: true, // For single page application routing
 },
 module: {
  rules: [
  {
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
    loader: 'babel-loader',
    options: {
     presets: ['@babel/preset-env', '@babel/preset-react']
    }
   }
  },
  {
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
  }
 ]
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'Host',
 filename: 'remoteEntry.js',
 remotes: {
 // Määratlege kaugrakendused siin, nt 'RemoteApp': 'RemoteApp@http://localhost:3001/remoteEntry.js'
 'RemoteApp': 'RemoteApp@http://localhost:3001/remoteEntry.js'
 },
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Lisage siia teised jagatud sõltuvused
 },
 }),
 // ... teised pluginad
 ],
};

            

              
                Copy
              
            
          

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index',
 output: {
 publicPath: 'http://localhost:3001/',
 },
 devServer: {
 port: 3001,
 hot: true,
 historyApiFallback: true, // For single page application routing
 },
 module: {
  rules: [
  {
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
    loader: 'babel-loader',
    options: {
     presets: ['@babel/preset-env', '@babel/preset-react']
    }
   }
  },
  {
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
  }
 ]
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'RemoteApp',
 filename: 'remoteEntry.js',
 exposes: {
 './Widget': './src/Widget',
 // Lisage siia teised eksponeeritud moodulid
 },
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Lisage siia teised jagatud sõltuvused
 },
 }),
 // ... teised pluginad
 ],
};

            

              
                Copy
              
            
          

            import React from 'react';

const Widget = () => {
 return (
  

  
Remote Widget
  
This is a widget from the RemoteApp.
  
 );
};

export default Widget;

            

              
                Copy
              
            
          

            import React, { useState, useEffect } from 'react';

const RemoteWidget = React.lazy(() => import('RemoteApp/Widget'));

const App = () => {
 const [isWidgetLoaded, setIsWidgetLoaded] = useState(false);

 useEffect(() => {
  setIsWidgetLoaded(true);
 }, []);

 return (
  

  
Host Application
  
This is the host application.
  {isWidgetLoaded ? (
   Loading Widget...
}>
   
   
  ) : (
   
Loading...
  )}
  

Selgitus:

• React.lazy(() => import('RemoteApp/Widget')): See impordib dünaamiliselt Widget mooduli RemoteApp'ist. Nimi RemoteApp vastab võõrustaja Webpacki konfiguratsiooni remotes jaotises määratletud nimele. Widget vastab kaugrakenduse Webpacki konfiguratsiooni exposes jaotises määratletud mooduli nimele.
• React.Suspense: Seda kasutatakse kaugmooduli asünkroonse laadimise haldamiseks. fallback atribuut määrab komponendi, mida renderdada mooduli laadimise ajal.

6. Käivitage rakendused:

Käivitage nii võõrustaja- kui ka kaugrakendus, kasutades käsku npm start (või oma eelistatud meetodit). Veenduge, et kaugrakendus töötab *enne* võõrustajarakendust.

Nüüd peaksite nägema kaugvidinat renderdatuna võõrustajarakenduses.

Täiustatud Module Federationi tehnikad

Lisaks põhilisele seadistusele pakub Module Federation mitmeid täiustatud tehnikaid keerukate mikro-esirakenduste arhitektuuride loomiseks.

1. Versioonihaldus ja jagamine:

Jagatud sõltuvuste tõhus haldamine on stabiilsuse säilitamiseks ja konfliktide vältimiseks ülioluline. Module Federation pakub mehhanisme versioonivahemike ja jagatud moodulite üksikute eksemplaride määramiseks. shared omaduse kasutamine Webpacki konfiguratsioonis võimaldab teil kontrollida, kuidas jagatud mooduleid laaditakse ja hallatakse.

Näide:

            shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 lodash: { eager: true, version: '4.17.21' }
}

            

              
                Copy
              
            
          

• singleton: true: Tagab, et laaditakse ainult üks mooduli eksemplar, vältides dubleerimist ja vähendades paketi suurust. See on eriti oluline teekide puhul nagu React ja ReactDOM.
• requiredVersion: Määrab versioonivahemiku, mida rakendus nõuab. Webpack proovib laadida ühilduva versiooni moodulist.
• eager: true: Laadib mooduli kohe, mitte laisalt. See võib mõnel juhul parandada jõudlust, kuid võib suurendada ka algset paketi suurust.

2. Dünaamiline Module Federation:

Selle asemel, et kaugrakenduste URL-e koodi sisse kirjutada, saate neid dünaamiliselt laadida konfiguratsioonifailist või API lõpp-punktist. See võimaldab teil uuendada mikro-esirakenduste arhitektuuri ilma võõrustajarakendust uuesti juurutamata.

Näide:

Looge konfiguratsioonifail (nt remote-config.json), mis sisaldab kaugrakenduste URL-e:

            {
 "RemoteApp": "http://localhost:3001/remoteEntry.js",
 "AnotherRemoteApp": "http://localhost:3002/remoteEntry.js"
}

            

              
                Copy
              
            
          

Võõrustajarakenduses laadige konfiguratsioonifail ja looge dünaamiliselt remotes objekt:

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');
const fs = require('fs');

module.exports = {
 // ... other configurations
 plugins: [
 new ModuleFederationPlugin({
 name: 'Host',
 filename: 'remoteEntry.js',
 remotes: new Promise(resolve => {
  fs.readFile(path.resolve(__dirname, 'remote-config.json'), (err, data) => {
  if (err) {
  console.error('Error reading remote-config.json:', err);
  resolve({});
  } else {
  try {
  const remotesConfig = JSON.parse(data.toString());
  resolve(remotesConfig);
  } catch (parseError) {
  console.error('Error parsing remote-config.json:', parseError);
  resolve({});
  }
  }
  });
 }),
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Add other shared dependencies here
 },
 }),
 // ... other plugins
 ],
};

            

              
                Copy
              
            
          

Oluline märkus: Kaaluge tootmiskeskkonnas kaugkonfiguratsiooni hankimiseks robustsema meetodi kasutamist, näiteks API lõpp-punkti või spetsiaalset konfiguratsiooniteenust. Ülaltoodud näide kasutab lihtsuse huvides fs.readFile, kuid see ei sobi üldiselt tootmiskasutuseks.

3. Kohandatud laadimisstrateegiad:

Module Federation võimaldab teil kohandada, kuidas kaugmooduleid laaditakse. Saate rakendada kohandatud laadimisstrateegiaid jõudluse optimeerimiseks või spetsiifiliste stsenaariumide käsitlemiseks, näiteks moodulite laadimine CDN-ist või teenustöötaja (service worker) kasutamine.

Webpack eksponeerib konksud (hooks), mis võimaldavad teil moodulite laadimisprotsessi vahele segada ja seda muuta. See võimaldab peenekoelist kontrolli selle üle, kuidas kaugmooduleid hangitakse ja lähtestatakse.

4. CSS-i ja stiilide käsitlemine:

CSS-i ja stiilide jagamine mikro-esirakenduste vahel võib olla keeruline. Module Federation toetab erinevaid lähenemisi stiilide käsitlemiseks, sealhulgas:

• CSS moodulid: Kasutage CSS mooduleid, et kapseldada stiilid iga mikro-esirakenduse sisse, vältides konflikte ja tagades ühtsuse.
• Stiilitud komponendid: Kasutage stiilitud komponente või teisi CSS-in-JS teeke, et hallata stiile komponentide endi sees.
• Globaalsed stiilid: Laadige globaalsed stiilid jagatud teegist või CDN-ist. Olge selle lähenemisega ettevaatlik, kuna see võib põhjustada konflikte, kui stiilidel pole korralikku nimeruumi.

Näide CSS moodulite kasutamisest:

Seadistage Webpack kasutama CSS mooduleid:

            module: {
 rules: [
 {
 test: /\.module\.css$/,
 use: [
 'style-loader',
 {
 loader: 'css-loader',
 options: {
 modules: {
 localIdentName: '[name]__[local]--[hash:base64:5]',
 },
 importLoaders: 1,
 },
 },
 'postcss-loader',
 ],
 },
 // ... other rules
],
}

            

              
                Copy
              
            
          

Importige CSS moodulid oma komponentidesse:

            import React from 'react';
import styles from './Widget.module.css';

const Widget = () => {
 return (
  

  
Remote Widget
  
This is a widget from the RemoteApp.
  
 );
};

export default Widget;

            

              
                Copy
              
            
          

5. Kommunikatsioon mikro-esirakenduste vahel:

Mikro-esirakendused peavad sageli omavahel suhtlema, et vahetada andmeid või käivitada toiminguid. Selle saavutamiseks on mitu viisi:

• Jagatud sündmused: Kasutage globaalset sündmustesiini (event bus) sündmuste avaldamiseks ja tellimiseks. See võimaldab mikro-esirakendustel suhelda asünkroonselt ilma otseste sõltuvusteta.
• Kohandatud sündmused: Kasutage kohandatud DOM-sündmusi suhtlemiseks mikro-esirakenduste vahel samal lehel.
• Jagatud olekuhaldus: Kasutage jagatud olekuhalduse teeki (nt Redux, Zustand), et tsentraliseerida olekut ja hõlbustada andmete jagamist.
• Otsesed moodulite impordid: Kui mikro-esirakendused on tihedalt seotud, saate mooduleid otse üksteisest importida, kasutades Module Federationi. Seda lähenemist tuleks siiski kasutada säästlikult, et vältida sõltuvuste loomist, mis õõnestavad mikro-esirakenduste eeliseid.
• API-d ja teenused: Mikro-esirakendused saavad omavahel suhelda API-de ja teenuste kaudu, mis võimaldab lõtva sidusust ja suuremat paindlikkust. See on eriti kasulik, kui mikro-esirakendused on juurutatud erinevatesse domeenidesse või neil on erinevad turvanõuded.

Module Federationi kasutamise eelised mikro-esirakenduste jaoks

• Parem skaleeritavus: Mikro-esirakendusi saab skaleerida iseseisvalt, mis võimaldab teil suunata ressursse sinna, kus neid kõige rohkem vaja on.
• Suurenenud hooldatavus: Väiksemaid koodibaase on lihtsam mõista ja hooldada, mis vähendab vigade riski ja parandab arendajate produktiivsust.
• Kiiremad juurutustsüklid: Mikro-esirakendusi saab juurutada iseseisvalt, mis võimaldab kiiremaid iteratsioonitsükleid ja uute funktsioonide kiiremat väljastamist.
• Tehnoloogiline mitmekesisus: Meeskonnad saavad valida tehnoloogiaid ja raamistikke, mis nende vajadustele kõige paremini sobivad, soodustades innovatsiooni ja võimaldades kasutada spetsialiseeritud oskusi.
• Suurem meeskondade autonoomia: Iga mikro-esirakenduse eest vastutab pühendunud meeskond, mis edendab omanditunnet ja vastutust.
• Lihtsustatud sisseelamine: Uued arendajad saavad kiiresti kurssi viia väiksemate ja paremini hallatavate koodibaasidega.

Module Federationi kasutamise väljakutsed

• Suurenenud keerukus: Mikro-esirakenduste arhitektuurid võivad olla keerukamad kui traditsioonilised monoliitsed arhitektuurid, nõudes hoolikat planeerimist ja koordineerimist.
• Jagatud sõltuvuste haldamine: Jagatud sõltuvuste haldamine võib olla keeruline, eriti kui erinevad mikro-esirakendused kasutavad sama teegi erinevaid versioone.
• Kommunikatsiooni lisakulu: Mikro-esirakenduste vaheline suhtlus võib tekitada lisakulu ja latentsust.
• Integratsioonitestimine: Mikro-esirakenduste integratsiooni testimine võib olla keerukam kui monoliitse rakenduse testimine.
• Algse seadistamise lisakulu: Module Federationi konfigureerimine ja esialgse infrastruktuuri ülesseadmine võib nõuda märkimisväärset pingutust.

Reaalse maailma näited ja kasutusjuhud

Module Federationit kasutab üha rohkem ettevõtteid suurte ja keerukate veebirakenduste ehitamiseks. Siin on mõned reaalse maailma näited ja kasutusjuhud:

• E-kaubanduse platvormid: Suured e-kaubanduse platvormid kasutavad sageli mikro-esirakendusi veebisaidi erinevate osade, näiteks tootekataloogi, ostukorvi ja kassaprotsessi haldamiseks. Näiteks võib Saksa jaemüüja kasutada eraldi mikro-esirakendust toodete kuvamiseks saksa keeles, samas kui Prantsuse jaemüüja kasutab teist mikro-esirakendust prantsuse toodete jaoks, mõlemad integreerituna ühte võõrustajarakendusse.
• Finantsasutused: Pangad ja finantsasutused kasutavad mikro-esirakendusi keerukate pangarankenduste, näiteks internetipankade, investeerimisplatvormide ja kauplemissüsteemide ehitamiseks. Globaalsel pangal võivad olla meeskonnad erinevates riikides, kes arendavad mikro-esirakendusi erinevatele piirkondadele, igaüks kohandatud kohalikele regulatsioonidele ja kliendi eelistustele.
• Sisuhaldussüsteemid (CMS): CMS-platvormid saavad kasutada mikro-esirakendusi, et võimaldada kasutajatel kohandada oma veebisaitide välimust ja funktsionaalsust. Näiteks võib Kanadas asuv CMS-teenuseid pakkuv ettevõte lubada kasutajatel lisada või eemaldada oma veebisaidile erinevaid mikro-esirakendusi (vidinaid), et kohandada selle funktsionaalsust.
• Armatuurlauad ja analüütikaplatvormid: Mikro-esirakendused sobivad hästi armatuurlaudade ja analüütikaplatvormide ehitamiseks, kus erinevad meeskonnad saavad panustada erinevate vidinate ja visualiseeringutega.
• Tervishoiurakendused: Tervishoiuteenuse osutajad kasutavad mikro-esirakendusi patsiendiportaalide, elektrooniliste tervisekaartide (EHR) süsteemide ja telemeditsiini platvormide ehitamiseks.

Parimad praktikad Module Federationi rakendamiseks

Module Federationi rakendamise edukuse tagamiseks järgige neid parimaid praktikaid:

• Planeerige hoolikalt: Enne alustamist planeerige hoolikalt oma mikro-esirakenduse arhitektuur ja määratlege selged piirid erinevate rakenduste vahel.
• Looge selged suhtluskanalid: Looge selged suhtluskanalid meeskondade vahel, kes vastutavad erinevate mikro-esirakenduste eest.
• Automatiseerige juurutamine: Automatiseerige juurutusprotsess, et tagada mikro-esirakenduste kiire ja usaldusväärne juurutamine.
• Jälgige jõudlust: Jälgige oma mikro-esirakenduse arhitektuuri jõudlust, et tuvastada ja lahendada kõik kitsaskohad.
• Rakendage robustne veatöötlus: Rakendage robustne veatöötlus, et vältida ahelreaktsioonina tekkivaid tõrkeid ja tagada rakenduse vastupidavus.
• Kasutage ühtset koodistiili: Jõustage ühtne koodistiil kõigis mikro-esirakendustes, et parandada hooldatavust.
• Dokumenteerige kõik: Dokumenteerige oma arhitektuur, sõltuvused ja suhtlusprotokollid, et tagada süsteemi hea mõistetavus ja hooldatavus.
• Kaaluge turvalisuse mõjusid: Kaaluge hoolikalt oma mikro-esirakenduse arhitektuuri turvalisuse mõjusid ja rakendage asjakohaseid turvameetmeid. Tagage vastavus globaalsetele andmekaitse määrustele nagu GDPR ja CCPA.

Kokkuvõte

JavaScript Module Federation koos Webpack 5-ga pakub võimsat ja paindlikku viisi mikro-esirakenduste arhitektuuride ehitamiseks. Jaotades suured rakendused väiksemateks, iseseisvalt juurutatavateks üksusteks, saate parandada skaleeritavust, hooldatavust ja meeskondade autonoomiat. Kuigi mikro-esirakenduste rakendamisega kaasnevad väljakutsed, kaaluvad eelised sageli kulud üles, eriti keerukate veebirakenduste puhul. Järgides selles juhendis toodud parimaid praktikaid, saate edukalt kasutada Module Federationit, et ehitada robustseid ja skaleeritavaid mikro-esirakenduste arhitektuure, mis vastavad teie organisatsiooni ja kasutajate vajadustele kogu maailmas.