Создавайте интерфейсы Micro в NextJS и ReactJS с помощью Webpack 5 Module Federation.

Введение

Микро интерфейсы

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

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

С точки зрения разработки, критическая ошибка в микрофронтендах не приведет к полной поломке приложения. Это может облегчить боль пользователям.
Для руководства у нас может быть несколько независимых дорожных карт, которые не будут влиять друг на друга. У каждой функции будет своя дата выпуска и версия сборки.

Решения для микро-фронтендов

Базовая реализация: Веб-компоненты с включением на стороне сервера
Рендеринг на стороне сервера: Голокрон, Подиум и Ара Фреймворк.
Композиция на стороне клиента: федерация модулей Webpack 5 и single-spa

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

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

Демонстрация — Micro Frontends на ежедневном обучении

У нас уже есть некоторые темы для разработки приложения NextJs под названием Ежедневное обучение, и мы делимся ими ранее. На этот раз я пытаюсь создать удаленный модуль в ReactJS и скомпоновать его в ежедневном обучении, используя федерацию модулей Webpack 5.

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

Добро пожаловать на мой сайт, если хотите.

ALayman Daily Learning
Daily Learning предоставляет статьи, задачи или видео для людей, которые также изучают программирование самостоятельно.daily-learning.herokuapp.com

До реализации

Разделение кода

Прежде чем погрузиться в реализацию микроинтерфейса с федерацией модулей Webpack 5, важно рассмотреть концепцию разделения кода и динамического импорта.

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

Динамический импорт компонентов в ReactJS(create-react-app)

Импорт компонентов с помощью React.Lazy или React-loadable
Установите и используйте @babel/plugin-syntax-dynamic-import в .babelrc

Динамический импорт компонентов в NextJS(create-next-app)

Импорт компонентов с помощью next/dynamic

Мы можем захотеть импортировать определенные компоненты с помощью динамического импорта, если компонент отображается только после взаимодействия с пользователем, например модального.

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

Концепция федерации модулей Webpack 5 основана на загрузке фрагментов. У нас будут локальные модули и удаленные модули, которые не являются частью текущей сборки.

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

Обзор этой статьи

В этой статье мы рассмотрим следующие темы.

Создать удаленный модуль ReactJS
Разверните удаленный модуль на Heroku
Рефакторинг существующего приложения NextJS (импорт удаленного модуля)

Создать удаленный модуль ReactJS

1. Создайте новое приложение ReactJS в TypeScript

Для необходимых пакетов это похоже на создание пакета npm, который мы также представили ранее.

Как создать настраиваемый пакет хука React и опубликовать его в npm?
Существует несколько способов совместного использования логики с отслеживанием состояния между компонентами React, такими как реквизиты рендеринга и HOC (High Order…medium.com

Создайте новое приложение ReactJS в TypeScript и установите необходимые пакеты.

npx create-react-app mf-example --template typescript
cd mf-example
yarn add express webpack webpack-cli webpack-server html-webpack-plugin @babel/preset-env @babel/preset-react @babel/plugin-transform-react-jsx babel-plugin-transform-react-jsx @babel/plugin-proposal-object-rest-spread @babel/plugin-transform-runtime @babel/core
yarn add --dev clean-webpack-plugin css-loader file-loader style-loader ts-loader babel-loader webpack-dev-server

Создайте .babelrc в корневой папке

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "transform-react-jsx",
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-transform-runtime"
    ]
}

Измените package.json

{
    ...
    "scripts": {
        "dev": "webpack serve",
        "build": "webpack --config webpack.config.js"
    }
    ...
}

Измените tsconfig.json

{
    "compilerOptions": {
         ...
         "noEmit": false,
         ...
     }
     ...
}

Структура папок будет выглядеть как на следующем скриншоте

2. Создайте простой компонент класса

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

Измените index.ts в папке src

3. Подготовьте файл webpack.config.js

Обратите внимание, что мы не помещаем имя файла в вывод, что отличается от того, что мы делаем при создании пакета npm.

Создайте webpack.config.js в корневой папке

4. Запустите удаленный модуль локально

Выполните следующую команду

yarn dev

Посетите http://localhost:8080/remoteEntry.js, и вы увидите следующее.

Разверните удаленный модуль на Heroku

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

1. Создайте статический файловый сервер для удаленного модуля.

Создайте server.js в корневой папке (пример mf)

Изменить package.json (пример mf)

{
    ...
    "scripts": {   
        ... 
        "start": "node server.js",
        "heroku-postbuild": "webpack --config webpack.config.js",
    }
    ...
}

2. Разверните удаленный модуль в Heroku

Здесь нам не нужно создавать базу данных на Heroku и контент. Создайте файл с именем Procfile в корне приложения и поместите в него следующий код (пример mf)

web: npm start

Ссылаясь на эту статью, шаги очень похожи, но более просты.

Создание одностраничного приложения с помощью React и Django. Часть 1. Развертывание приложения Django в Heroku и…
Недостаток для бесплатного пользователя заключается в том, что приложение спит каждые 30 минут. Однако нам достаточно…medium.com

Измените src/_document.tsx в приложении NextJs после развертывания удаленного модуля.

<script src="http://{your heroku application domain}/remoteEntry.js" />

Рефакторинг существующего приложения NextJS

1. Установите необходимые пакеты

В NextJS нам нужно установить @module-federation/nextjs-mf для поддержки объединения модулей Webpack. Конечно, мы должны включить Webpack 5 в NextJS. Настройка по умолчанию уже включает Webpack 5 в NextJS 11.

Выполните следующие команды

yarn add @module-federation/[email protected] [email protected] [email protected] @babel/core

Измените package.json

{
    ...
    "resolutions": {
        "webpack": "5.1.3"
    },
    ...
}

Измените следующий.config.js

2. Импортируйте удаленный модуль

Добавьте следующую строку в src/_document.tsx

<script src="http://localhost:8080/remoteEntry.js" />

Добавьте следующие строки туда, куда вы хотите импортировать модуль.

import dynamic from "next/dynamic";
// @ts-ignore
const MfExample = dynamic(() => import('MfExample/MfExample'), {
    ssr: false,
    //loading: () => <p>Loading...</p>
  });

использованная литература

Резюме

Спасибо за вашего пациента. Я Шон. Я работаю инженером-программистом.

Эта статья — моя заметка. Пожалуйста, не стесняйтесь дать мне совет, если какие-либо ошибки. Я с нетерпением жду ваших отзывов.

Похлопайте, если эта статья поможет вам. Спасибо.

Вы также можете подписаться на мою страницу в Facebook.

Профан
Профан. 4 лайка. Страница с информацией о программном обеспечении, фотографии и кофеwww.facebook.com