当前位置: 首页 > news >正文

webpack联邦模块介绍及在dumi中使用问题整理

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、ModuleFederationPlugin参数含义?
  • 二、如何在dumi中使用及问题整理
    • 1. 如何在dumi中使用(这个配置是好使的)
    • 2.相关问题整理
      • 2.1 问题1
      • 2.2 问题2
  • 总结


前言

联邦模块(Module Federation)是指一种用于构建微前端架构的技术,它允许不同的独立构建(独立的前端应用或模块)在运行时动态地共享代码和模块。这种模式可以让多个团队独立开发和部署自己的前端应用,同时能够在运行时通过网络加载和共享彼此的模块,实现模块的动态联接和交互。

在微前端架构中,每个独立的前端应用可以被看作是一个自治的模块,这些模块可以通过联邦模块的机制进行集成,形成一个整体的前端应用。联邦模块允许各个模块之间共享依赖、代码和状态,从而实现更好的代码复用、更高的开发效率和更好的团队协作。

Webpack的ModuleFederationPlugin是实现联邦模块的一种工具,它可以让你在构建各个独立的前端应用时,指定哪些模块可以被共享,以及如何在运行时动态加载这些共享模块。这种方式可以使得前端应用的开发和部署更加灵活和高效。

本文我们将介绍一下ModuleFederationPlugin各参数的含义,并且整理一下在dumi中使用ModuleFederationPlugin时遇到的问题及解决方案。


一、ModuleFederationPlugin参数含义?

以下将列举一下常用的字段及其含义

const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {plugins: [new ModuleFederationPlugin({name: 'xxx',  // 模块的名称,用于标识模块的唯一性filename: 'xxxx.js', // 模块的文件名,用于指定模块的输出路径exposes: { // 定义模块中要共享的部分。'./module1': './src/module1.index.tsx', // ./指的是根目录'./module2': './src/module2.index.tsx'},shared: {react: {requiredVersion: '^18.2.0',  // package.json中要求的版本号singleton: true, // 布尔值。此提示只允许共享作用域中有一个共享模块的实例(默认禁用)。一些库使用全局内部状态(例如react,react-dom)。因此,同时只能有一个库的实例运行非常重要。eager: true, // 布尔值。此提示允许Webpack在初始块中直接包含所提供的模块和备用模块,而不是通过异步请求获取库。换句话说,这允许在初始加载时使用共享模块。但请注意,启用此提示将始终下载所有提供的和备用模块。},'react-dom': {requiredVersion: '^18.2.0',singleton: true },}}),],
};

二、如何在dumi中使用及问题整理

1. 如何在dumi中使用(这个配置是好使的)

remote端:

    new ModuleFederationPlugin({name: 'components',filename: 'index.js',exposes: {'./module1': './src/module1.index.tsx','./module2': './src/module2.index.tsx'},shared: {react: { requiredVersion: '^18.2.0', singleton: true },'react-dom': { requiredVersion: '^18.2.0', singleton: true },},}),

host端:

  chainWebpack(memo: any, { webpack }: any) {memo.plugin('ModuleFederationPlugin').use(webpack.container.ModuleFederationPlugin, [{name: 'docs',remotes: {components: 'components@http://172.16.3.19:3001/index.js',},shared: {react: { singleton: true, eager: true },},},]);},

2.相关问题整理

2.1 问题1

问题描述:

error - MFSU dist file: /Users/xxxx/test/doc/node_modules/.cache/mfsu/mf-va_remoteEntry.js not found
error - MFSU latest build error:  AssertionError [ERR_ASSERTION]: dependence not found: xxxx

解决方法:

// 应该是mfsu和联邦模块有冲突,所以关闭
export default defineConfig({mfsu: false,
})

2.2 问题2

问题描述:

# 经测试,此处不光是useMemo会报错,所有的hook均会报错,不使用react hooks是不会报错的
Cannot read properties of null (reading 'useMemo')

因为报错是读不到useMeme, 所以我们尝试共享react。此时,我们发现报错有变化,报错内容如下:
注意:要在host和react同时共享,否则即使执行了下边的插件也不好使

Error: Shared module is not available for eager consumption

这个问题还是比较常见的,包括官方文档也提供有解决方案, 详情见此链接,大意就是需要增加一个bootstrap文件。这个在咱们正常的react项目都比较容易解决,按官方文档来就可以,但是dumi中,我们应该怎么去找入口文件呢?
经过一番查找,我们发现有部分同学借助umi-plugin-mf-bootstrap这个插件解决了这个问题(原文链接)经尝试后发现没有解决,怀疑大概率是入口文件出问题,所以经过多次尝试,通过写了一个本地插件解决了此问题,插件内容如下:
如果想要尝试umi-plugin-mf-bootstrap插件,但umi版本是3.5+,需要在.dumirc.ts手动配置插件,这个配置是在大部分文章中没有提到的。 配置可参考:https://umijs.org/docs/guides/use-plugins

// @ts-nocheck
import { IApi } from '@umijs/types';
import { resolve } from 'path';
import { readFileSync } from 'fs';export default (api: IApi) => {api.onGenerateFiles(() => {const path_tb =api.env === 'production'? './.dumi/tmp-production/testBrowser.ts': './.dumi/tmp/testBrowser.tsx';const TBBuffer = readFileSync(resolve(path_tb));const TBContent = String(TBBuffer);const path_umi =api.env === 'production'? './.dumi/tmp-production/umi.ts': './.dumi/tmp/umi.ts';const umiBuffer = readFileSync(resolve(path_umi));const umiContent = String(umiBuffer);api.writeTmpFile({path: '../bootstrap_tb.tsx',content: TBContent,});api.writeTmpFile({path: '../testBrowser.tsx',content: 'import("./bootstrap_tb")',});api.writeTmpFile({path: '../bootstrap_umi.tsx',content: umiContent,});api.writeTmpFile({path: '../umi.ts',content: 'import("./bootstrap_umi.tsx")',});});
};

插件需要放到这个位置
在这里插入图片描述


总结

在dumi中使用还是有不少小坑的,遇到问题感觉寻求帮助的路径也比较少,希望此篇文章能给正在或者将要使用dumi+联邦模块的朋友们一些帮助吧

相关文章:

webpack联邦模块介绍及在dumi中使用问题整理

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、ModuleFederationPlugin参数含义?二、如何在dumi中使用及问题整理1. 如何在dumi中使用(这个配置是好使的)2.相关问题整理2.1 问题12.2 问题2 总…...

记录一下Kotlin: Module was compiled with an incompatible version of Kotlin.的问题

我遇到的整个报错是这样的: Error:Kotlin: Module was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.7.1, expected version is 1.1.16. 大概意思就是不匹配,但是我这是个不太能随便改代码的项目&#x…...

html中使用Vue+element UI动态创建表单数据不显示问题

直接上代码&#xff1a;html代码如下 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content&…...

CentOS下 Docker、Docker Compose 的安装教程

Docker 是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可移植的容器中&#xff0c;然后发布到任何流行的 Linux 机器上&#xff0c;也可以实现虚拟化。容器是完全使用沙箱机制&#xff0c;相互之间不会有任何接口。 Docker Compose是用于定义…...

[OnWork.Tools]系列 02-安装

下载地址 百度网盘 历史版本连接各种版本都有,请下载版本号最高的版本 链接&#xff1a;https://pan.baidu.com/s/1aOT0oUhiRO_L8sBCGomXdQ?pwdn159提取码&#xff1a;n159 个人链接 http://on8.top:5000/share.cgi?ssiddb2012fa6b224cd1b7f87ff5f5214910 软件安装 双…...

【外键合并python】

外键合并&#xff08;Foreign Key Merge&#xff09; 外键合并是指在数据库或者数据表中&#xff0c;通过共同的外键将多个数据表合并在一起的操作。在 Excel 表格中&#xff0c;我们可以使用外键来将多个表格合并&#xff0c;类似于数据库中的关联操作。 步骤一&#xff1a;…...

Mongodb SQL 到聚合映射快速参考

SQL 映射 聚合管道允许MongoDB 提供原生聚合功能&#xff0c;对应于 SQL 中许多常见的数据聚合操作。比如&#xff1a;GROUP BY、COUNT()、UNION ALL 测试数据 For MySQL rootlocalhost 14:40:40 [test]> select * from orders; -------------------------------------…...

腾讯云标准型S6/SA3/SR1/S5/SA2服务器CPU处理器大全

腾讯云服务器CVM标准型CPU处理器大全&#xff0c;包括标准型S6、SA3、SR1、S5、S5se、SA2、S4、SN3ne、S3、SA1、S2ne实例CPU处理器型号大全&#xff0c;标准型S6云服务器CPU采用Intel Ice Lake(2.7GHz/3.3GHz)&#xff0c;标准型S5采用Intel Xeon Cascade Lake 8255C/Intel Xe…...

idea 关于高亮显示与选中字符串相同的内容

dea 关于高亮显示与选中字符串相同的内容&#xff0c;本文作为个人备忘的同时也希望可以作为大家的参考。 依次修改File-settings-Editor-Color Scheme-General菜单下的Code-Identifier under caret和Identifier under caret(write)的Backgroud色值&#xff0c;可以参考下图。…...

【重点:单例模式】特殊类设计

请设计一个类&#xff0c;只能在堆上创建对象 方式如下&#xff1a; 将构造函数设置为私有&#xff0c;防止外部直接调用构造函数在栈上创建对象。向外部提供一个获取对象的static接口&#xff0c;该接口在堆上创建一个对象并返回。将拷贝构造函数设置为私有&#xff0c;并且…...

智能家居是否可与ChatGPT深度融合?

​ ChatGPT自2022年面世以来&#xff0c;已为亿万网民提供智能问答服务。然而我们是否曾想到&#xff0c;这一人工智能驱动的聊天机器人&#xff0c;是否可为智能家居赋能? 要实现ChatGPT与智能家居设备之间的无缝对话&#xff0c;单单依靠一台终端是远远不够的。ChatGPT必须…...

LED芯片 VAS1260IB05E 带内部开关LED驱动器 汽车硬灯带灯条解决方案

VAS1260IB05E深力科LED芯片是一种连续模式电感降压转换器&#xff0c;设计用于从高于LED电压的电压源高效驱动单个或多个串联连接的LED。该设备在5V至60V之间的输入电源下工作&#xff0c;并提供高达1.2A的外部可调输出电流。包括输出开关和高侧输出电流感测电路&#xff0c;该…...

微信小程序插件 painter 生成海报、二维码

GitHub 地址&#xff1a;https://github.com/Kujiale-Mobile/Painter 一、引入 将 components/painter 整个文件放到自己项目的 components 中&#xff1b;以组件的形式在页面的 json 文件中引入&#xff1b; 二、使用 <view class"container"><image s…...

Python版day60

84. 柱状图中最大的矩形 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积。 class Solution:def largestRectangleArea(self, heights: List[int]) -> i…...

windows C++多线程同步<3>-互斥量

windows C多线程同步&#xff1c;3&#xff1e;-互斥量 概念&#xff0c;如下图&#xff1a; 另外就是互斥对象谁拥有&#xff0c;谁释放 那么一个线程允许多次获取互斥对象吗&#xff1f; 答案是允许&#xff0c;但是申请多次就要释放多次&#xff0c;否则其他线程获取不到互…...

(学习笔记-系统结构)Linux内核与windows内核

内核 计算机是由各种外部硬件设备组成的&#xff0c;比如内存、CPU、硬盘等&#xff0c;如果每个应用都要和这些硬件设备对接通信协议&#xff0c;那这样太累了&#xff0c;所以这个中间人由内核来负责&#xff0c;让内核作为应用连接硬件设备的桥梁&#xff0c;应用程序只关心…...

find_in_set在oracle下的解决方案

比如一张表&#xff1a; artile (id,type,content); # type:1表示文艺类&#xff0c;2表示小说类&#xff0c;3表示传记&#xff0c;4表示传说&#xff0c;等等5,6,7,8表数据&#xff1a; idtypecontent13,1dfasdfasdf21,3,6,8dfasdf36,8,9add 现在要找出3传记类的artile记录…...

智能垃圾桶

1.树莓派3B引脚图 2. 原理图 3.舵机线图 搜了这个这么多3b的资料&#xff0c;自己只是想解决如何下程序和运行程序的博客&#xff0c;网上搜集的资料全是讲如何通过SSH或者网线连接树莓派&#xff0c;通过直接连接屏幕的教程较少。 遇到问题&#xff1a;不论是舵机还是其他传…...

面试题-TS(十):如何处理可选属性和默认参数?

面试题-TS(10)&#xff1a;如何处理可选属性和默认参数&#xff1f; 1. 可选属性 1.1 什么是可选属性&#xff1f; 在TypeScript中&#xff0c;可选属性是指在定义接口或类时&#xff0c;指定某些属性不是必须的&#xff0c;可以存在也可以不存在。使用可选属性可以让我们定…...

Istio Pilot源码学习(一):Pilot-Discovery启动流程、ConfigController配置规则发现

本文基于Istio 1.18.0版本进行源码学习 1、Pilot-Discovery工作原理 Pilot-Discovery是Istio控制面的核心&#xff0c;负责服务网格中的流量管理以及控制面和数据面之间的配置下发 Pilot-Discovery从注册中心&#xff08;如Kubernetes&#xff09;获取服务信息并汇集&#xff…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

宇树科技,改名了!

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

spring Security对RBAC及其ABAC的支持使用

RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型&#xff0c;它将权限分配给角色&#xff0c;再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...

【iOS】 Block再学习

iOS Block再学习 文章目录 iOS Block再学习前言Block的三种类型__ NSGlobalBlock____ NSMallocBlock____ NSStackBlock__小结 Block底层分析Block的结构捕获自由变量捕获全局(静态)变量捕获静态变量__block修饰符forwarding指针 Block的copy时机block作为函数返回值将block赋给…...