Привет! Я вернулся с еще одним техническим блогом о федерации модулей.
Что касается объединения модулей, то оно идеально подходит для разработки одного или нескольких приложений несколькими командами. Видите, это означает хорошее общение, связь и обмен. И мы знаем, как красиво делиться во всех смыслах, даже когда речь идет о кодировании и совместном использовании некоторых впечатляющих компонентов, функций, утилит и т. д.
Проблема:
Итак, давайте начнем с очень простого примера компонента заголовка, который необходимо использовать в двух проектах.
У нас есть решения, но они включают в себя множество сложных методов, таких как развертывание нескольких общих обновлений зависимостей, когда дело доходит до выпусков. Кроме того, есть дублирование кода, которое я лично очень ненавижу. «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://webpack.js.org/concepts/module-federation/
- https://github.com/module-federation/module-federation-examples
Удачного программирования, друзья!
Первоначально опубликовано на https://www.simranraj.in.