Problème

J'ai le site A écrit en React.

Je souhaite afficher des composants React plus petits dans le site A chaque fois qu'un utilisateur accède à une certaine page du site A.

Chaque composant React plus petit vit dans son propre référentiel, tout comme le site A.

Question

Comment puis-je charger dynamiquement ces composants dans le site A lorsque le site A est en production ?

Quel type de flux de travail puis-je configurer pour développer les composants React plus petits localement au sein du site A ?


Je pensais utiliser des composants Web (https:/ /medium.com/@rchaves/building-microfrontends-part-iii-public-path-problem-1ce823be24c9) mais vous ne voulez pas que les composants soient déjà déployés quelque part et chargez simplement ces composants du serveur. De préférence, il y aurait une solution où je pourrais configurer quelque chose dans mon pipeline pour pointer vers les référentiels où existent les composants plus petits et les regrouper avec le code du site A dans un seul paquet chaque fois qu'un composant est construit.

Cela soulève également l'autre problème de chargement des mêmes dépendances plusieurs fois (comme React, React DOM) en raison de l'empaquetage de différents projets.

D'autres idées utilisent éventuellement des modules npm, des iframes, etc.

1
John 18 mars 2019 à 18:33

2 réponses

Meilleure réponse

Si vous souhaitez une isolation complète entre l'application principale et les composants plus petits, les iframes sont la voie à suivre car elles peuvent garantir que chaque composant peut avoir ses propres versions et dépendances de React.

Si vous devez partager des données/interactions entre ces composants et l'application principale, l'ajouter en tant que dépendance npm est une solution. Mais cela nécessitera des versions de framework uniformes pour tous les composants. Ou vous pouvez essayer des composants Web.

1
Easwar 18 mars 2019 à 15:52

J'ai eu un problème similaire avec mon propre projet, et j'ai trouvé git sous-modules pour fonctionner très bien.

Une autre façon que j'ai envisagée, et qui pourrait s'avérer utile, consiste à utiliser un package npm privé avec tous vos petits composants dedans.

1
ManavM 19 mars 2019 à 06:49