Привет! Я вернулся с еще одним техническим блогом о федерации модулей.

Что касается объединения модулей, то оно идеально подходит для разработки одного или нескольких приложений несколькими командами. Видите, это означает хорошее общение, связь и обмен. И мы знаем, как красиво делиться во всех смыслах, даже когда речь идет о кодировании и совместном использовании некоторых впечатляющих компонентов, функций, утилит и т. д.

Проблема:

Итак, давайте начнем с очень простого примера компонента заголовка, который необходимо использовать в двух проектах.

У нас есть решения, но они включают в себя множество сложных методов, таких как развертывание нескольких общих обновлений зависимостей, когда дело доходит до выпусков. Кроме того, есть дублирование кода, которое я лично очень ненавижу. «WORA» — я следую этому Пишу, когда-то прочитанному где-нибудь.

Эти решения - кошмар, поскольку они в целом снижают производительность сети и сборки. Мы программисты, и нам не нужно много ручного труда, который мы делаем. не хочу писать повторяющийся код. Чего мы хотим — Мы хотим создать федерацию. Нам нужно решение для общих зависимостей, которое улучшит работу сети и повысит производительность.

Вот и решение TADA

Module Federation — я достоин (хочу знать почему)

  • масштабируемый
  • удобный
  • достижимый
  • прибыльный
  • супер динамичный
  • Открытый исходный код

Что такое федерация модулей?

  • импортировать код из чужой сборки, это тоже во время выполнения
  • совместно использовать код поставщика динамически во время выполнения
  • бережливый код непосредственно из отдельной сборки
  • суперквалифицированный для всех сред javascript — узла, электрона, браузера
  • развертывание независимого приложения без необходимости повторного развертывания потребителей
  • вообще никакой избыточности
  • отличная производительность сети и сборки в целом большое удовольствие для пользователя

Самое главное, Module Federation — это функция webpack 5, который является хорошо зарекомендовавшим себя сборщиком статических модулей для современных приложений JavaScript. Федерация модулей позволяет нескольким сборкам веб-пакетов работать вместе. Одно приложение может динамически запускать код из другого пакета или сборки на клиенте и сервере. Это основа микрофронтендов.

Давайте углубимся

Давайте познакомимся с терминологией и ознакомимся с ней, прежде чем мы продолжим работу с нашим примером приложения.

Хост: сборка веб-пакета, которая инициализируется первой при загрузке страницы.

Удаленный: еще одна сборка веб-пакета, часть которой используется «узлом».

Двунаправленный хост: сборка веб-пакета, которая может работать как удаленно, так и как хост. Либо как потребитель, либо как хост

Всенаправленные хосты: сборка веб-пакета, которая действует как удаленный и хост одновременно

Федерация модулей

Как это использовать?

Откройте этот пример ссылки в браузере.

Вы увидите два приложения: app1 и app2. Оба они работают на двух разных портах. Здесь app1 – это потребитель, а app2 – хост. . App2 пытается предоставить компонент App и loggerUtil для app1.

Если вы видите конфигурацию плагинов в конфигурации веб-пакета для app2, вы увидите это, и это то, как вы размещаете

Как разместить

new ModuleFederationPlugin({ 
 name: 'app2',
 filename: 'remoteEntry.js', 
 exposes: {
 './App': './src/App',
 './logger': './src/LoggerUtil',
 }, 
 shared: { react: { singleton: true }, 'react-dom': { singleton: true } }, }),

Здесь вы увидите имя файла, в котором размещены эти модули. В данном случае это remoteEntry.js. Также здесь мы выставили App и loggerUtil. Если вы откроете файл удаленной записи, вы увидите приложение и утилиту регистратора в его модульном приложении.

Как потреблять

Аналогично хосту в подключаемом модуле в конфигурации веб-пакета для app1, который является потребителем, который необходимо добавить.

new ModuleFederationPlugin({
 name: "app1",
 remotes: { app2: "app2@[app2Url]/remoteEntry.js", },
 shared: {react: {singleton: true}, "react-dom": {singleton: true}}, }),

Здесь вы можете увидеть путь сопоставлений remoteEntry.js к app2, потому что это место, где присутствуют сопоставления модулей App2 и LoggerUtil.

Как импортировать открытый модуль в ваш компонент

import React, { Suspense, useEffect } from 'react';
 const RemoteApp = React.lazy(() => import('app2/App')); 
import * as logger from 'app2/logger'; 
const App = () => { 
useEffect(() => { // this is being used from app2 logger.logStatus('loaded');
 }, []);
 return ( 
<div>this is App1 this is app2 inside app1 
<div>
 <Suspense fallback={...loading}><RemoteApp/></Suspense> </div> </div> );
 }; 
export default App;

Посмотрите на оператор импорта, так как remoteEntry был сопоставлен с app2 в конфигурации, мы импортируем его оттуда под соответствующей картой модуля, например, регистратор из «app2/loggerUtil» и приложение из «app2/App»;

Что ж, это отличное начало для федерации модулей. Мы начали его устанавливать.

Полезные ресурсы:

Удачного программирования, друзья!

Первоначально опубликовано на https://www.simranraj.in.