React&微前端&模块联盟概念讲解@react,webpack,微前端

什么是微前端？

微前端架构（micro frontends architecture）设计风格为应用程序的前端所做的，就像微服务为后端所做的那样，将整体结构分解成更小的组件，然后可以在单个页面上组装。

微前端的优缺点

优点：

微前端更加模块化和可重用。
微前端更具可扩展性。
微前端更易于维护。
独立和更快地开发。
测试单独的应用程序很容易。
不同的前端技术可用于不同的项目（如 React、Angular、Vue.js 等）。
缺点：
测试整个应用程序并不容易。
共享代码、状态（数据）等并不容易。

模块联盟Module Federation | webpack

模块联盟允许一个JavaScript应用程序动态地从另一个应用程序加载代码，并在此过程中共享依赖关系。如果一个使用联盟模块的应用程序没有联盟代码所需的依赖，Webpack将从该联盟的构建源头下载缺少的依赖。
前提是确保你已经安装了最新的Node.js。对React.js和Webpack 5+有基本了解。

示例

我将在本文中创建2个应用程序。第一个：容器应用，将被用作微前端的基础。第二：计数器应用，将在容器应用内被渲染。
让我们从设置环境开始，我使用create-mf-app来创建一个react应用。

安装Container app

在终端上运行以下npx命令，使用 "create-mf-app "安装和引导应用程序。

npx create-mf-app

完成第一步后，初始化后的目录是这样的
我不会深入讲解这个目录结构，因为它和create-react-app目录结构一样。

值得注意的是，这里的index.js文件是动态导入了一个App.js

import('./App')

接下来让我们快速开始初始化另一个叫做Counter的app，与创造Container app一样

npx create-mf-app

在这里，我在component目录下创建了一个Counter组件
src/components/Counter.jsx

import React, { useState } from "react";
export const Counter = () => {const [count, setCount] = useState(0);const onIncrement = () => setCount(count + 1);const onDecrement = () => setCount(count - 1);return (<div><h1>Counter App</h1><p>Current count: <strong>{count}</strong></p><button onClick={onIncrement}>+</button><button onClick={onDecrement}>-</button></div>);
}

让我们在Counter app里更新webpack.config.js文件，在plugins的数组里加入ModuleFederationPlugin插件。

webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const deps = require("./package.json").dependencies;
module.exports = {output: {publicPath: "http://localhost:8081/",},resolve: {extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],},devServer: {port: 8081,historyApiFallback: true,},module: {rules: [{test: /\.m?js/,type: "javascript/auto",resolve: {fullySpecified: false,},},{test: /\.(css|s[ac]ss)$/i,use: ["style-loader", "css-loader", "postcss-loader"],},{test: /\.(ts|tsx|js|jsx)$/,exclude: /node_modules/,use: {loader: "babel-loader",},},],},plugins: [ // This is important partnew ModuleFederationPlugin({name: "counter",filename: "remoteEntry.js",remotes: {},exposes: {"./Counter": "./src/components/Counter",},shared: {...deps,react: {singleton: true,requiredVersion: deps.react,},"react-dom": {singleton: true,requiredVersion: deps["react-dom"],},},}),new HtmlWebPackPlugin({template: "./src/index.html",}),],
};

让我们来理解一下这个插件的配置项：
name：远程app的名称
filename：Counter app的入口点 (remoteEntry.js)。
remotes：在此处添加 remotes 项（与容器相关），必须定义从远程应用程序公开的所有入口点，远程入口结构为：{ “app-name”: “name@/remoteEntry.js” }
exposes：您要向容器应用程序公开的所有组件名称。
shared：容器所有要在容器和计数器应用程序之间共享的依赖项。

src/App.jsx

import React from "react";
import ReactDOM from "react-dom";
import { Counter } from 'counter/Counter';
import "./index.css";
const App = () => (<div className="container"><h1>Container App</h1><Counter /> // Micro frontend app</div>
);
ReactDOM.render(<App />, document.getElementById("app"));

然后运行这两个app

感谢阅读！！

React微前端模块联盟概念讲解相关推荐

使用 Single-SPA 从零开始搭建 React 微前端项目
在这篇博客中,我们将探讨如何使用Single-SPA从零开始搭建一个React微前端项目,该项目将包含三个不同的子应用.我们将使用Webpack包管理工具和yarn来管理依赖关系,并使用Single- ...
乾坤微前端_微前端架构初探以及我的前端技术盘点
前言最近几年微前端一直是前端界的热门议题, 它类似于微服务架构, 主要面向于浏览器端,能将一个复杂而庞大的单体应用拆分为多个功能模块清晰且独立的子应用,且共同服于务同一个主应用.各个子应用可以独立运 ...
有赞美业微前端的落地总结
2020年4月,有赞美业的前端团队历经7个月时间,完成了美业PC架构从单体SPA到微前端架构的设计.迁移工作.PPT在去年6月份就有了,现在再整理一下形成文章分享给大家. 头图目录 Part 01 ...
闲庭信步聊前端 - 见微知著微前端
笔者初次接触微前端在2020年7月,是从同事的口中听说的.虽然不算是一个早期接触者,但是也确实的推动和跟进了内部某大型项目的开发和落地.也希望能把一些走过的坑和一些思考分享给大家.文内所指应用均为PC ...
微前端框架qiankun之原理与实战
目录一.微前端概述 1. 基本原理 2. 微前端的主要优势 3. 当前微前端方案的一些缺点二.qiankun与single-spa实现原理 1. single-spa实现原理 (1). 路由问题 ...
2022年微前端技术调研- 图文并茂
一.动机在我们的前端开发工作中,我们往往就会遇到如下困境: 工程越来越大,打包越来越慢团队人员多,产品功能复杂,代码冲突频繁.影响面大内心想做 SaaS 产品,但要求总是要做定制化不同的团 ...
分享一个美业微前端的落地方案
2020年4月,有赞美业的前端团队历经7个月时间,完成了美业PC架构从单体SPA到微前端架构的设计.迁移工作.PPT在去年6月份就有了,现在再整理一下形成文章分享给大家. Part 01 " ...
【微前端】1174- 有赞美业微前端的落地总结
2020年4月,有赞美业的前端团队历经7个月时间,完成了美业PC架构从单体SPA到微前端架构的设计.迁移工作.PPT在去年6月份就有了,现在再整理一下形成文章分享给大家. 头图目录 Part 01 ...
已开源！ icestark 助力业务快速落地微前端解决方案
作者|刘雄(大果) 出品|阿里巴巴新零售淘系技术部 2017 年中旬,飞冰(ICE)团队接到一个叫做「阿里创作平台」的项目,这个产品为创作者提供了入驻.帐号管理.内容管理.内容发布.粉丝运营.数据分析 ...

React微前端模块联盟概念讲解

什么是微前端？

微前端的优缺点

模块联盟Module Federation | webpack

示例

安装Container app

React微前端模块联盟概念讲解相关推荐

最新文章

热门文章