Введение:
Федерация модулей, мощная функция, представленная в Webpack 5, позволяет разработчикам загружать отдельные пакеты кода во время выполнения, что делает ее идеальным выбором для реализации архитектуры микроинтерфейса. Эта статья проведет вас через процесс создания микроинтерфейса приложения React с использованием Module Federation, уделяя особое внимание предоставлению четких примеров кода. Мы также обсудим плюсы и минусы использования Module Federation для вашего микроинтерфейса.
Шаг 1. Настройте новый проект React с помощью Webpack 5
- Создайте новый каталог для вашего проекта и перейдите в него:
mkdir react-module-federation cd react-module-federation
2. Инициализируйте новый проект npm:
npm init -y
3. Установите необходимые зависимости:
npm install react react-dom webpack@5 webpack-cli webpack-dev-server html-webpack-plugin
4. Создайте каталог «src» и файл «index.html»:
mkdir src touch src/index.html
5. Добавьте следующее содержимое в «src/index.html»:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React Module Federation</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
Шаг 2. Настройте Webpack для объединения модулей
- Создайте файл webpack.config.js в корне проекта:
touch webpack.config.js
2. Добавьте следующее содержимое в «webpack.config.js»:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
publicPath: 'auto',
},
devServer: {
port: 3000,
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new ModuleFederationPlugin({
name: 'mainApp',
remotes: {
microApp: 'microApp@http://localhost:3001/remoteEntry.js',
},
}),
],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: 'babel-loader',
},
],
},
};
Шаг 3. Создайте микроинтерфейсное приложение
- Перейдите в корень проекта и создайте новое микроинтерфейсное приложение:
npx create-react-app micro-app --template cra-template-pwa
2. Измените файл «micro-app/package.json», включив в него следующие сценарии:
"scripts": {
"start": "webpack serve",
"build": "webpack --mode production"
}
3. Обновите «micro-app/webpack.config.js», включив в него следующие плагины:
// ...
plugins: [
// ...
new ModuleFederationPlugin({
name: 'microApp',
filename: 'remoteEntry.js',
exposes: {
'./MicroApp': './src/App',
},
shared: ['react', 'react-dom'],
}),
// ...
],
// ...
4. Обновите «micro-app/src/index.js»:
import React from 'react';
import ReactDOM from 'react-dom';
import MicroApp from './App';
if (process.env.NODE_ENV === 'development') {
ReactDOM.render(<MicroApp/>, document.getElementById('root'));
}
export default MicroApp;
Шаг 4. Интегрируйте микроинтерфейс в основное приложение
1. Создайте файл index.js в каталоге src:
touch src/index.js
2. Добавьте следующее содержимое в «src/index.js»:
import React from 'react';
import ReactDOM from 'react-dom';
import MicroApp from 'microApp/MicroApp';
ReactDOM.render(
<React.StrictMode>
<MicroApp />
</React.StrictMode>,
document.getElementById('app')
);
3. Запустите сервер разработки микроинтерфейса:
cd micro-app npm start
4. Запустите основной сервер разработки приложений:
cd .. npm start
Плюсы:
- Встроен в Webpack 5, дополнительные библиотеки не нужны.
- Позволяет обмениваться зависимостями между приложениями
- Улучшает производительность за счет уменьшения размера пакета
Минусы:
- Требуется веб-пакет 5
- Менее зрелый по сравнению с одинарным спа
Вывод:
В этом пошаговом руководстве показано, как создать микроинтерфейсное приложение React с помощью Module Federation с Webpack 5. Module Federation предлагает мощный способ реализации архитектуры микроинтерфейса, позволяющий совместно использовать код и уменьшающий размер пакета. Однако для этого требуется Webpack 5, и он менее развит по сравнению с альтернативами, такими как single-spa. Оценив плюсы и минусы Module Federation, вы сможете определить, подходит ли этот подход для вашего микроинтерфейсного приложения.
Не забывайте хлопать 👏
Удачного кодирования 🚀
