Плагин React + TypeScript + Webpack + Module Federation

Привет ДЕВ,

Давайте сразу к делу, я пишу это, чтобы изучить и создать приложение MicroFrontend с использованием React + TS.

Мы будем использовать следующие пакеты npm:

React.js
Машинопись
Webpack — Плагин объединения модулей.
create-mf-app (https://www.npmjs.com/package/create-mf-app)

Итак, если вы находитесь здесь и ищете микрофронтенд с использованием React.js, то я предполагаю, что вы уже знаете, что такое React и как он работает с TypeScript.

Итак, давайте сделаем это шаг за шагом:
Шаги:

Чтобы узнать, что такое плагин федерации модулей?
Как это помогает в создании приложения микрофронтенда.
Что нам нужно настроить, чтобы сделать основное приложение импортным из других сервисов, которые работают на разных ПОРТАХ.
Как написать компонент экспорта и импорта за один раз?

Шаг 1::

Согласно Google:

Федерация модулей — одна из самых захватывающих функций в Webpack 5, которая меняет правила игры в архитектуре JavaScript. Он поддерживает более независимый и простой обмен кодом во время выполнения между приложениями JavaScript, делая приложения более адаптивными и динамичными.

Шаг 2::

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

Шаг 3::

Ниже приведен наименьший пример того, как мы экспортируем и импортируем компоненты из другого приложения:

new ModuleFederationPlugin({
      name: "home", // Application Name to use
      filename: "homeEntry.js", // Filename to use when we remote this application from other app.
      remotes: {
      },
      exposes: {
        "./Home": "./src/Components.tsx" // Components to export/expose
      },
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),

Итак, давайте изучать вещи одну за другой.

name — это уникальное значение, которое мы будем использовать, когда будем импортировать/удалять это приложение в другое приложение, назовем его контейнером?

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

пульты — это та часть, где в приложении мы импортируем код из другого приложения, основной синтаксис для этого

{nameOfTheRemoteApplication}@http://{urlOfthe RunningApp}/{fileNameProvidedInWebpackOfTheRemoteApp}.js

login@http://localhost:3003/loginEntry.js

логин: приложение для входа в систему, где в качестве логина указывается имя.

http://localhost:3003: URL-адрес запущенного удаленного приложения с ПОРТОМ. Для локальной разработки

remoteEntry.js: имя файла, указанное в удаленном приложении.

Ниже показано, как будет выглядеть приложение для входа в webpack.config.js.

new ModuleFederationPlugin({
      name: "login",
      filename: "loginEntry.js",
      remotes: {},
      exposes: {
        './Login': './src/ExportedComponents.tsx'
      },
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),

Шаг 4::

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

import React from 'react'
const LoginMain = () => {
    return <div> New Deployment</div>
}
const LoginHome = () => {
    return <div>The new era is coming here </div>
}
export {
    LoginHome,
    LoginMain
}

ПРИМЕЧАНИЕ. ЗДЕСЬ МЫ НЕ МОЖЕМ ЭКСПОРТИРОВАТЬ КОМПОНЕНТ ПО УМОЛЧАНИЮ.

Нам бы сработал именованный экспорт, теперь давайте воспользуемся этим LoginHome и LoginMain в нашем приложении-контейнере:

вот как будет выглядеть container/webpack.config.js

new ModuleFederationPlugin({
      name: "container", // Current App name
      filename: "remoteEntry.js", // filename
      remotes: { // the micro frontends to use in container the things which we want import from other service.
        login: 'login@http://localhost:3003/loginEntry.js',      }, 
      exposes: {}, // to give components to other services
      shared: { 
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),

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

Теперь давайте перейдем к импорту компонента, синтаксис будет таким:

import { ComponentName } from 'NameOfTheApplication{from ModuleFederationPlugin config of the remote app}/KeyFromExposes{{from ModuleFederationPlugin config of the remote app}}'

пример:

import { LoginMain, LoginHome } from 'login/Login'

Теперь это просто отобразит компонент из приложения для входа.

Давайте попробуем создать простое приложение Micro Frontend.

Создайте приложение-контейнер с помощью следующей команды:

Контейнер npx create-mf-app — используйте ПОРТ 3000

Он спросит у вас некоторые конфиги, сделайте это соответственно.

Создайте простое домашнее приложение.

npx create-mf-app home Используйте ПОРТ — 3001

Создайте файл Components.tsx в папке Home/src/Components.tsx.

Вставьте приведенный ниже код:

import React from "react"const HomePage = () => {
    return <div>Homepage from the Home App</div>
}

export {
    HomePage
}

Откройте файл home/webpack.config.js из домашнего приложения:

Замените код ModuleFederationPlugin

new ModuleFederationPlugin({
      name: "home", // name
      filename: "homeEntry.js",
      remotes: {
      },
      exposes: {
        "./Home": "./src/Components.tsx"
      },
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),

Откройте файл container/webpack.config.js из приложения-контейнера.

Замените код ModuleFederationPlugin

new ModuleFederationPlugin({
      name: "container", // name
      filename: "remoteEntry.js",
      remotes: {
        home: "home@http://localhost:3001/homeEntry.js"
      },
      exposes: {
      },
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    })

Откройте файл App.tsx из контейнера Application.

Добавьте импорт:

import { HomePage } from 'home/Home'

использовать как

Перейдите в папку приложения-контейнера, сделайте yarn && yarn start
Перейдите в домашнее приложение на другую вкладку терминала, выполните пряжу и пряжу.
Найдите http://localhost:3000
Посмотрите, работает ли это, если нет, добавьте комментарий со своими сомнениями.

Я сделал образец приложения здесь:

https://github.com/harish9312/microfrontend-example/tree/master

ДЕМО: https://mfapp-container.vercel.app/

Спасибо

Плагин React + TypeScript + Webpack + Module Federation — приложение MicroFrontend

Привет ДЕВ,

Похожие вопросы