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

这篇具有很好参考价值的文章主要介绍了webpack联邦模块介绍及在dumi中使用问题整理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

联邦模块(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")',
    });
  });
};

插件需要放到这个位置
webpack联邦模块介绍及在dumi中使用问题整理,webpack进阶,webpack,dumi,联邦模块


总结

在dumi中使用还是有不少小坑的,遇到问题感觉寻求帮助的路径也比较少,希望此篇文章能给正在或者将要使用dumi+联邦模块的朋友们一些帮助吧文章来源地址https://www.toymoban.com/news/detail-621741.html

到了这里,关于webpack联邦模块介绍及在dumi中使用问题整理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity打包WebGL的全过程及在打包和使用过程中会遇到的问题(本地测试)

    目录 概要 Unity打包WebGL PlayerSettings设置 Resolution and Presentation Other Settings  Publishing Settings 本地服务器测试环境配置 问题盘点         盘点Unity在Build WebGL环境包时需要的配置以及遇到的难题 Resolution and Presentation Resolution and Presentation 界面主要设置打包后的WebGL界面的分辨率显

    2024年02月05日
    浏览(93)
  • dumi 如何使用?一文教你使用,高效写出你的博客、组件库文档

    关于对 dumi 的介绍我们就可以简单的理解为快速开发文档的一种便捷开发工具,里面囊括了多种配置,我们不需要再去手动的编写组件这种,所以为我们开发组件库文档,官方文档,个人博客介绍这种网站提供了很便捷的帮助。 有兴趣的同学也可以去看下 tinkerbell-ui 这套手搭

    2024年01月18日
    浏览(48)
  • RabbitMQ系列(27)--RabbitMQ使用Federation Exchange(联邦交换机)解决异地访问延迟问题

    前言: (broker北京)、(broker深圳)彼此之间相距甚远,网络延迟是一个不得不面对的问题。有一个在北京的业务(Client北京)需要连接(broker北京),向其中的交换器exchangeA发送消息,此时的网络延迟很小,(Client北京)可以迅速将消息发送至exchangeA 中,就算在开启了publisherconfirm机制或

    2024年02月13日
    浏览(66)
  • 【快速搞定Webpack5】介绍及基本使用(一)

    他会以一个或多个文件作为打包的入口,将我们整个项目所有文件编译组合成一个或多个文件输出出去。 输出的文件就是编译好的文件,就可以在浏览器端运行了。 我们将 webpack 输出的文件叫做 bundle 。 (将浏览器不识别的语法编译成识别的语法) webpack 本身功能是有限的:

    2024年02月21日
    浏览(36)
  • 【vue3】webpack和vite介绍与使用【超详细】

    打包工具 称为 构建工具 使用模块化开发主要面临两个 问题 :1.浏览器兼容性问题 2.模块化过多时,加载问题。 使用构建工具,对代码进行打包,将多个模块打包成一个文件。这样一来及解决了兼容性问题,又解决了模块过多的问题 作用 :构建工具可以将我们使用esm规范编写

    2024年02月07日
    浏览(32)
  • webpack 面试题整理

    1.Webpack是什么? webpack 是一个静态模块打包器,当 webpack 处理应用程序时,会递归构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将这些模块打包成一个或多个 bundle。 webpack 就像一条生产线,要经过一系列处理流程(loader)后才能将源文件转换成输出结果。 这条

    2023年04月08日
    浏览(23)
  • webpack配置 - gpt问答 待整理

    前端项目中引用的依赖,语法怎么做兼容 在前端项目中引用的依赖通常使用npm或者yarn进行管理。为了确保语法的兼容性,可以在项目的package.json文件中指定所需的依赖版本范围,例如: { “dependencies”: { “react”: “^16.8.6”, “lodash”: “~4.17.11” } } 在上面的例子中,^表示

    2024年01月17日
    浏览(32)
  • 一图看懂 requests 模块:用Python编写、供人类使用的HTTP库, 资料整理+笔记(大全)

    本文由 大侠(AhcaoZhu)原创,转载请声明。 链接: https://blog.csdn.net/Ahcao2008 全文介绍系统内置 requests 模块、函数、类及类的方法和属性。 它通过代码抓取并经AI智能翻译和人工校对。 是一部不可多得的权威字典类工具书。它是系列集的一部分。后续陆续发布、敬请关注。【原创

    2024年02月06日
    浏览(43)
  • webpack(一)模块化

    阶段一:基于文件的划分模块方式 概念 :将每个功能和相关数据状态分别放在单独的文件里 约定每一个文件就是一个单独的模块,使用每个模块,直接调用这个模块的成员 缺点 :所有的成员都可以在模块外被访问和修改(所有的模块都是直接在全局工作,没有【私有空间

    2024年02月11日
    浏览(42)
  • 红外模块使用介绍

    产品参数: 1、当模块检测到 前方障碍物信号 时,电路板上 绿色指示灯点亮 ,同时 OUT端口 持续输出 低电平 信号,该模块检测距离2~30cm,检测角度35°,检测距离可以通过电位器进行调节,顺时针调电位器,检测距离增加;逆时针调电位器,检测距离减少。 2、传感器主动

    2024年02月03日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包