Monorepo et micro-frontends utilisant Module Federation Vite

✨Présentation✨ :

Monorepo

Un monorepo est un référentiel unique gérant plusieurs projets liés mais indépendants. Il rationalise le développement en permettant la réutilisation du code, en simplifiant les dépendances et en favorisant une meilleure collaboration en équipe par rapport aux référentiels séparés.

Micro-interface

Une architecture d'application Web d'un frontend qui la décompose en unités plus petites et indépendantes déployables individuellement. Une micro-frontend peut être créée et déployée indépendamment des autres bases de code, ce qui signifie qu'elle est plus flexible et évolutive.

Module Fédération et Vite

Fédération de modules : Il s'agit d'une fonctionnalité très puissante de Webpack, qui permet le chargement dynamique de code à partir d'un emplacement distant.

Vite : Il s'agit d'un outil de construction frontend plus moderne, qui permet des démarrages rapides du serveur de développement et un remplacement immédiat des modules à chaud, avec une excellente prise en charge des fonctionnalités JavaScript modernes et une extension de ses fonctionnalités au moyen du système de plugins. .

Problèmes que ces outils peuvent résoudre ?:

• Mise à l'échelle des équipes
• Gérer les dépendances
• Améliorer la vitesse de développement

En combinant ces modèles et outils, on peut créer des applications frontales évolutives, maintenables et hautes performances qui répondent aux exigences du développement Web moderne.

Combinant Monorepos, Micro-Frontends, Fédération de modules et Vite ?? :

Impact

En combinant ces technologies, vous créez une architecture puissante et flexible pour créer des applications Web complexes et à grande échelle. Voici un aperçu des principaux impacts :

• Évolutivité améliorée : Déploiement indépendant et mises à jour de micro-frontends au sein d'un monorepo.
• Expérience de développement améliorée : Développement plus rapide avec Vite et flux de travail rationalisés.
• Performances optimisées : Le chargement du code à la demande avec Module Federation réduit les temps de chargement initiaux.
• Meilleure maintenabilité : Les micro-frontends modulaires améliorent l'organisation du code et réduisent le couplage.

?? Assez de cette théorie, voyons de l'action ! ??

Comment faire ?

1 : Configurer Monorepo

Choisissez un outil de gestion monorepo comme Lerna ou Nx. (choisissons Nx pour ce projet démo)

• Créons un dossier et initialisons-y l'espace de travail Nx.

mkdir my-monorepo
cd my-monorepo

2 : Installez Nx CLI :

• Installez Nx CLI globalement dans votre système

npm add --global nx@latest 

• Initialiser l'espace de travail Nx

npx create-nx-workspace@latest

• Utilisez la Nx CLI pour générer de nouvelles applications et bibliothèques au sein de votre espace de travail

nx g @nx/next:application host-app
.
.
.
nx g @nx/react:application my-remote-app
.
.
.
nx g @nx/react:library my-utils

3 : Configurer Vite et implémenter la fédération de modules :

• Installez le plugin @originjs/vite-plugin-federation dans le vite.config.js de chaque micro-frontend.

npm i @originjs/vite-plugin-federation -D

• Créez un vite.config.js (s'il n'est pas créé par Nx) et configurez-le.
• Implémenter le package de fédération de modules.

Configuration hôte-application Vite :

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
     react(),
     federation({
      name: 'host-app',
      remoteApp: {},  // add Urls of your remote apps here
     shared: {
        react: {
          singleton: true,
          requiredVersion: '18.2.0',
        },
        'react-dom': {
          singleton: true,
          requiredVersion: '18.2.0',
        },
      },
    }),
  ],
});

Configuration de l'application à distance :

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
     react(),
     name: 'my-remote-app', // unique app name for your remote module
     filename: 'remoteEntry.js',
     exposes: {}, // add the path of any components you want to expose to the host app
     shared: {
       react: {
         singleton: true,
         requiredVersion: '18.2.0',
       },
       'react-dom': {
         singleton: true,
         requiredVersion: '18.2.0',
       },
     },
    }),
  ],
});

La structure de votre projet devrait ressembler à ceci

my-monorepo/
├── apps/
│   ├── host-app/
│   │   ├── package.json
│   │   ├── vite.config.js
│   │   ├── src/
│   │   └── ...
│   ├── my-utils/
│   │   ├── package.json
│   │   ├── src/
│   │   └── ...
│   └── my-remote-app/
│       ├── package.json
│       ├── vite.config.js
│       ├── src/
│       └── ...
└── nx.json

? Félicitations, votre application est maintenant configurée. ?
Maintenant, allez-y, créez un composant et exposez-le à l'application hôte.

Comment ajouter un composant distant à l'hôte ?

Supposons que vous ayez exposé un composant en tant que "AppComponent" et que votre nom distant soit "remoteApp"

const RemoteComponent = React.lazy(() => import('remoteApp/AppComponent'));

<Suspense fallback={<>Loading....</>}>
  <RemoteComponent />
</Suspense>

*REMARQUE : * Assurez-vous d'ajouter une URL distante au fichier vite.config.js de l'hôte.

Scénarios du monde réel ?? :

Plateformes de commerce électronique à grande échelle : La même équipe peut travailler indépendamment sur les pages de produits, les processus de paiement et les comptes d'utilisateurs.
Applications d'entreprise : Les fonctionnalités peuvent être gérées par différents départements au sein d'une plateforme partagée.
Différentes équipes peuvent créer et gérer des widgets ou des tableaux de bord individuels.

? Consultez le code de mon projet de démonstration ici ?? : Projet Monorepo

Conclusion

Monorepos, Micro-frontends, Module Federation et Vite, en utilisant les atouts de toutes les technologies ci-dessus, peuvent aider les organisations à créer des applications Web évolutives, maintenables et hautes performances qui répondent aux exigences du développement moderne et aux besoins commerciaux.

Ressources supplémentaires :

Documentation Nx
Vite Documentation
Fédération des modules Webpack
Architecture micro-frontend

N'hésitez pas à nous contacter si vous avez des questions ou si vous avez besoin d'aide pour mettre en œuvre cette configuration pour votre projet. Construisons quelque chose d'incroyable ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!