Рубрики
Без рубрики

Архитектура Micro-Fe: WebPack 5, федерация модуля и пользовательский запуск код.

Расширенная тактика реализации для приложения последовательности запуска к приложениям Micro-Frontend, разработанной с использованием федерации модуля.

Автор оригинала: Zack Jackson.

Зак Джексон

Расширенная тактика реализации для приложения последовательности запуска к приложениям Micro-Frontend, разработанной с использованием федерации модуля.

Я выберу это прямо сейчас с самого начала, то, что было запрошено сотни раз. Вы можете установить webpack_public_path Динамически (не заканчивается в конфигурации WebPack) с кодом запуска, но есть более простые решения, которые теперь встроены в WebPack 💯 для динамических публичных путей. Код запуска имеет более продвинутые возможности, но ради введения – я демонстрирующую ручной метод, который использует шаблон запуска запуска. Я буду разработать некоторые лучшие примеры в ближайшее время, что демонстрируют сложные интеграции.

Что такое запуск код?

В контексте федерации модуля запускной код является тактикой реализации, чтобы прикрепить дополнительный код выполнения к удаленной последовательности запуска контейнера.

Это действительно полезно, поскольку Modulefederation и его время выполнения недоступны с помощью крючков, нет способа расширить его или добавить строку кода, которая сделала бы что-то вроде набора общего пути удаленного контейнера на лету.

Это тривиально сделать внутри обычного приложения WebPack, но довольно сложно сделать внутри недоступного пользовательского контейнера выполнения, который способствует дистанционному оркестрированию модуля модуля.

Вы также можете приложить неизвестно, подобные данные, полученные в самой API Федерации, федеративный импорт импортирует как модуль, так и состояние приложения, просто через Импорт () – Предполагая, что кто-то знаком с федерацией модуля, это не сложно сделать.

Обзор внутренних органов федерации модуля.

Изображение для поста

Установка общего пути динамически.

Давайте удержим это простым, поскольку это первый раз, когда он официально введен в качестве возможности общественности.

На нашем конфигуре WebPack я собираюсь использовать, как работает WebPack, и объединить дополнительный файл в WebPack Runtime.

Вот что мы делаем

  1. Создать Точка входа с тем же Имя Как название, которое вы размещаете в ModulefederaterPlugin.
  2. Я установил PervicePath в любом WebPack, построенный на все, что я хочу, и теперь это относительно (yay!)
  3. Force Exclude App1 Chank, просто Incase HTML WebPack Plugin пытается сделать что-то глупо. У него нет лучшей поддержки MF прямо сейчас, когда речь идет о продвинутых реализациях
**_module_**. **_exports_** = {  
 entry: {  
 // we add an entrypoint with the same name as our name in ModuleFederationPlugin.  
 // This merges the two "chunks" together. When a remoteEntry is placed on the page,  
 // the code in this app1 entrypoint will execute as part of the remoteEntry startup.  
 app1: "./src/setPublicPath",  
 main: "./src/index",  
 },  
 mode: "development",  
 output: {  
 // public path can be what it normally is, not a absolute, hardcoded url  
 publicPath: "/",  
 },  
 plugins: [  
 new ModuleFederationPlugin({  
 name: "app1",  
 remotes: {  
 app2: "app2@http://localhost:3002/remoteEntry.js",  
 },  
 shared: { react: { singleton: true }, "react-dom": { singleton: true } },  
 }),  
 new HtmlWebpackPlugin({  
 template: "./public/index.html",  
 excludeChunks: ["app1"],  
 }),  
 ],  
};

Давайте посмотрим на точку входа.

Давайте посмотрим, что я объединяю во время выполнения, этот файл является кодом запуска.

Этот код находится внутри APP2, код выше представляет собой конфигурацию WebPack app1

"./src/setPublicPath",// nod to parcel, i think they inspired this convention.   
\_\_webpack\_public\_path\_\_ = new **_URL_** ( **_document_**.currentScript.src).origin + "/";  
**_console_**.log(  
 "this is webpack startup code, setting public path to:",  
 \_\_webpack\_public\_path\_\_  
);  
// since i just added a other module to the runtime, it ends up being the last module returned to the scope.   
// For now, we need to re-export the container to the scope.   
// you could use webpack internals to make this more dynamic, bue we will likely provide a internalized solution to attach a startup module   
**_Object_**.assign( **_window_** , {  
 app2: \_\_webpack\_require\_\_("webpack/container/entry/app2"),  
});

Поскольку мы используем «Как WebPack» только «работает», это не сразу прямо.

Трюк именования точек входа использует преимущество модуля и сливающегося куска.

Если два точка входа имеют одну и ту же группу или ловушку, они объединены. Вот как Качеграмки работает.

Поскольку удаленный контейнер должен немедленно вернуть федеративный интерфейс, а не прилагаемый код запуска. «Грязный» обходной путь – вручную повторно прикрепить интерфейс к глобальному объему. Это, вероятно, может быть очищено до некоторого низкоуровневого эквивалента модуля. Экспертизы.

Что еще возможно?

Ну, довольно много ..

Код запуска и возможности повторной экспорта позволяет нам воспользоваться Async Mechanics Powering MF.

Серверная сторона, это еще интереснее! Удаленный может экспортировать свои кусочки на стороне клиента на другой хост рендеринга. Это позволит нам воспользоваться преимуществами лет, но все еще использовавшись для всего – механизмы промывки кулово-смыва, включающихся в режим включения.

Итак, мы можем избежать мерцания, поскольку разметки SSRD перепрошивается из-за некоторых кусков, не готовых. Можно ли SSR пульты удаленного модуля скрипта внутри хоста рендера. Давая нам немедленную увлажнение клиентами.

Вы можете восстановить систему Next.js, которая использует Async Import, чтобы также запустить GetInitialProops. Для тех из вас, кто помнит redux-first-маршрутизатор и его асинхронизированные данные плюс маршрутизацию кода, вы можете использовать что-то подобное с федерацией модуля, где WebPack действует как слой маршрутизации. Предотвращение оперативных ограничений, делегируя асинхронные задачи для самого веб -пака.

Вы можете включить сложный логик загрузки модуля внутри кода запуска. Представьте себе создание виртуальных модулей или уровня модуля, маршрутизацию внутри самого веб -пака.

Большая часть лучших рамм, похожее на Next.js, что, возможно, является лучшим мировым плагином WebPack WebPack с сервером. Глубокие интеграции WebPack значительно уменьшают количество ручного труда, необходимого для создания хорошо распределенной архитектуры. С помощью федерации модуля нам не нужен тонна пользовательских погрузчиков и плагинов маршрутизатора для создания очень больших, очень сложных приложений.

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

Это моя последняя одержимость в попытке вернуть контроль от команд управления тегами. Подход не сразу понят, учитывая теги – это внешние сценарии. К счастью, часть федерации модуля переписала внешние внешние и о том, как она работает. Таким образом, теги поставщика могут быть добавлены в виде внешних сценариев Async, что WebPack может загрузить по требованию. Аналитический код и другие интеграции могут быть импортированы в жизненный цикл приложения или внутреннее состояние. Вы также сможете поставщику Async Import при необходимости, поскольку WebPack управляет кодом.

Можно добавить систему событий внутри менеджера тегов, который вызывает конкретные правила, в основном отправляя удаленные инструкции в WebPack, где код будет эффективно. Система событий может действовать как знакомый шаблон для группы, управляющей этими тегами – поскольку они могут не импортировать код, мы можем подключить новый тип коммуникационного шина, другой, другой, другой веб-папак по умолчанию обнаружил. Что-то подобное было построено для Adobe Target Integration, где тесты AB были полезными нагрузками JSON, которые сообщили WebPack, что делать, позволяя заменять модули или компоненты для замены другими в удаленном репо. Это пониженное целевое время промежуточного времени в нулевые миллисекунды, поскольку это федеративное приложение, и все написано в реакции. Там нет мутации DOM, которая должна быть повторно повторно вновь повторно навязчивым. Управляется в виртуальной области, чрезвычайно эффективно!

Эта библиотека FBJS 200KB может потребоваться в качестве внешнего и загружена только в качестве внешнего, когда загружен скрипт с использованием FBJ. Раскрытие огромных тегов поставщиков, сброшенных в массу, потому что они не могут общаться с спа-салоном, а также инженерным, можем в его закрытии на службу.

Все сказано и сделано. Вот репо эта статья основана на

Не забудьте следовать за мной в Twitter!