E’ uscito webpack 5, portando con se alcune novità, tra cui i moduli federati.
Un interessate meccanismo per condividere moduli finti tra dei progetti.

L’intento è quello, di permettere di esporre dalla nostra applicazione “container” dei moduli verso altre applicazioni “host“, questi possono essere per esempio: dei componenti React, delle librerie e molto altro.

Uno dei grandi vantaggi, è quello di riusare codice già pronto e testato su più applicazioni e averlo sempre sincronizzato, il rovescio della medaglia, è gestire eventuali diversificazioni o divergenze presso i frontend ospiti.

E’ interessante la possibilità, di importare dipendenze esterne, sia dai moduli, sia attingendo direttamente dall’applicazione ospite (quindi scorporandole dai moduli stessi, con relativi vantaggi in prestazioni).

E’ possibile utilizzare dipendenze con versioni diverse tra contenitore ed ospite, ma solo previa verifica della compatibilità.


Esempio con l’aiuto di Rxjs

Vi mostro a seguire un POC che ho realizzato, con l’intento di provare il caricamento dinamico di moduli remoti, senza vincolare la sorgente remota alla configurazione di webpack.
Github: Module federation dynamic import with Rxjs

git clone https://github.com/unrealmanu/module-federations-rxjs.git

All’interno del repository troverete due progetti, “container” che è configurato per esporre un componente React, chiamato “Block”
e “host” che si presenta come un normale progetto basato su webpack e React Typescript che però è in grado di importare dinamicamente il nostro componente “Block” che si trova dentro “container“.


In entrambi i progetti, potrete avviare il progetto solo dopo aver installato le dipendenze con il comando:

yarn install

a seguito potrete lanciare il server locale con il comando:

yarn run serve

host” risponderà all’indirizzo http://localhost:3001 mentre “container” all’indirizzo http://localhost:3002

Container” diverge leggermente dalla configurazione di “host“, in quanto utilizza il plugin di webpack ModuleFederation, per esporre il componente “Block”:

Noterete sul progetto “container” che l’applicazione presenta nel file “index.tsx“, che contiene solo l’importazione del file “bootstrap.tsx” e in quest’ultimo invece troverete il render della nostra applicazione.
Questo è necessario a webpack per il corretto funzionamento dei moduli federati.

Prendendo ispirazione da “module-federation” ho realizzato una coppia di funzioni (loadComponent$ e loadScript$) che con l’aiuto di rxjs, vi consentiranno di cariare i moduli da una sorgente remota.

Per ulteriori approfondimenti vi lascio un collegamento alla documentazione ufficiale di webpack.


Leave a Reply

Your email address will not be published.