基于 Webpack5 Module Federation 的业务解耦实践

news2024/11/26 11:26:53

前言

本文中会提到很多目前数栈中使用的特定名词，统一做下解释描述

  • dt-common：每个子产品都会引入的公共包(类似 NPM 包)

  • AppMenus：在子产品中快速进入到其他子产品的导航栏，统一维护在 dt-common 中，子产品从 dt-common 中引入

  • Portal：所有子产品的统一入口

  • APP_CONF：子产品的一些配置信息存放

背景

由于迭代中，我们有很多需求都是针对 AppMenus 的，这些需求的生效需要各个子产品的配合，进行统一变更。现在的数栈前端的项目当中， AppMenus 的相关逻辑存在于 dt-common 中，dt-common 又以独立的目录存在于每个子项目中， 所以当出现这种需求的时候，变更的分支就包含所有的子产品，这给前端以及测试同学都带来很多重复性的工作。

file

本文旨在通过 webpack5 Module Federation 的实践，实现 AppMenus 与各个子产品的解耦，即 AppMenus 作为共享资源，将其从 dt-common 中分离出来，保证其更新部署无需其他子产品的配合。

file

本地实现

Portal 项目

  1. 拆分 AppMenus 到 Portal 下的 Components 中，Portal 内部引用 AppMenus 就是正常组件内部的引用

  1. 配置 Module Federation 相关配置，方便其他项目进行远程依赖

const federationConfig = {
        name: 'portal',
        filename: 'remoteEntry.js',
        // 当前组件需要暴露出去的组件
        exposes: {
            './AppMenus': './src/views/components/app-menus',
        },
        shared: {
            react: { 
               singleton: true,
               eager: true, 
               requiredVersion: deps.react
            },
            'react-dom': {
                singleton: true,
                eager: true,
                requiredVersion: deps['react-dom'],
            },
        },
    };

    const plugins = [
        ...baseKoConfig.plugins,
        {
            key: 'WebpackPlugin',
            action: 'add',
            opts: {
                name: 'ModuleFederationPlugin',
                fn: () => new ModuleFederationPlugin({ ...federationConfig }),
            },
        },
    ].filter(Boolean);

  1. dt-common 中修改 Navigator 组件引用 AppMenus 的方式，通过 props.children 实现

子产品项目

  1. 配置 Module Federation config

const federationConfig = {
    name: 'xxx',
    filename: 'remoteEntry.js',
    // 关联需要引入的其他应用
    remotes: {
        // 本地相互访问采取该方式
        portal: 'portal@http://127.0.0.1:8081/portal/remoteEntry.js',
    },
    shared: {
        antd: {
            singleton: true,
            eager: true,
            requiredVersion: deps.antd,
        },
        react: {
            singleton: true,
            eager: true,
            requiredVersion: deps.react,
        },
        'react-dom': {
            singleton: true,
            eager: true,
            requiredVersion: deps['react-dom'],
        },
    },
};

  1. 修改 AppMenus 引用方式

const AppMenus = React.lazy(() => import('portal/AppMenus'));
<Navigator
    {...this.props}
>
    <React.Suspense fallback="loading">
        <AppMenus {...this.props} />
    </React.Suspense>
</Navigator>

// 需要 ts 定义 
// typings/app.d.ts 文件
declare module 'portal/AppMenus' {
    const AppMenus: React.ComponentType<any>;
    export default AppMenus;
}

  1. 注意本地调试的时候，子产品中需要代理 Portal 的访问路径到 Portal 服务的端口下，才能访问 Portal 暴露出来的组件的相关chunckjs

module.exports = {
    proxy: {
        '/portal': {
            target: 'http://127.0.0.1:8081', // 本地
            //target: 'portal 对应的地址', 本地 -〉 devops 环境
            changeOrigin: true,
            secure: false,
            onProxyReq: ProxyReq,
       },
    }
}

远程部署

部署到服务器上，由于 Portal 项目中的 AppMenus 相当于是远程组件，即共享依赖；子产品为宿主环境，所以部署的时候需要对应部署 Portal 项目与子产品。而在上述配置中，需要变更的是加载的地址。 Portal 项目中没有需要变更的，变更的是子产品中的相关逻辑。

//remote.tsx 
import React from 'react';

function loadComponent(scope, module) {
    return async () => {
        // Initializes the share scope. This fills it with known provided modules from this build and all remotes
        await __webpack_init_sharing__('default');
        const container = window[scope]; // or get the container somewhere else
        // Initialize the container, it may provide shared modules
        await container.init(__webpack_share_scopes__.default);
        const factory = await window[scope].get(module);
        const Module = factory();
        return Module;
    };
}

const urlCache = new Set();
const useDynamicScript = (url) => {
    const [ready, setReady] = React.useState(false);
    const [errorLoading, setErrorLoading] = React.useState(false);

    React.useEffect(() => {
        if (!url) return;

        if (urlCache.has(url)) {
            setReady(true);
            setErrorLoading(false);
            return;
        }

        setReady(false);
        setErrorLoading(false);

        const element = document.createElement('script');

        element.src = url;
        element.type = 'text/javascript';
        element.async = true;

        element.onload = () => {
            console.log('onload');
            urlCache.add(url);
            setReady(true);
        };

        element.onerror = () => {
            console.log('error');
            setReady(false);
            setErrorLoading(true);
        };

        document.head.appendChild(element);

        return () => {
            urlCache.delete(url);
            document.head.removeChild(element);
        };
    }, [url]);

    return {
        errorLoading,
        ready,
    };
};

const componentCache = new Map();

export const useFederatedComponent = (remoteUrl, scope, module) => {
    const key = `${remoteUrl}-${scope}-${module}`;
    const [Component, setComponent] = React.useState(null);

    const { ready, errorLoading } = useDynamicScript(remoteUrl);
    React.useEffect(() => {
        if (Component) setComponent(null);
        // Only recalculate when key changes
    }, [key]);

    React.useEffect(() => {
        if (ready && !Component) {
            const Comp = React.lazy(loadComponent(scope, module));
            componentCache.set(key, Comp);
            setComponent(Comp);
        }
        // key includes all dependencies (scope/module)
    }, [Component, ready, key]);

    return { errorLoading, Component };
};

//layout header.tsx
const Header = () => {
	....
	const url = `${window.APP_CONF?.remoteApp}/portal/remoteEntry.js`;
  const scope = 'portal';
  const module = './AppMenus'
	const { Component: FederatedComponent, errorLoading } = useFederatedComponent(
      url,
      scope,
      module
  );
	return (
        <Navigator logo={<Logo />} menuItems={menuItems} licenseApps={licenseApps} {...props}>
            {errorLoading ? (
                <WarningOutlined />
            ) : (
                FederatedComponent && (
                    <React.Suspense fallback={<Spin />}>
                        {<FederatedComponent {...props} top={64} showBackPortal />}
                    </React.Suspense>
                )
            )}
        </Navigator>
    );
}

如何调试

子产品本地 → Portal 本地

Portal 与某个资产同时在不同的端口上运行Portal 无需变更，子产品需要以下相关的文件在这种情况下 remoteApp 为本地启动的 portal 项目本地环境；同时当我们启动项目的时候需要将 /partal 的请求代理到本地环境

// proxy -> 代理修改
// header 引用的远程地址 -> 修改

window.APP_CONF?.remoteApp = 'http://127.0.0.1:8081'

proxy: {
    '/portal': {
        target: 'http://127.0.0.1:8081'
    }
}

子产品本地 → Portal 的服务器环境

本地起 console 的服务服务器上部署 Portal 对应的 Module Ferderation 分支同上，只不过此时 Portal 已经部署了，remote 和代理地址只需要改成部署后的 Portal 地址即可

// proxy -> 代理修改
// header 引用的远程地址 -> 修改

window.APP_CONF?.remoteApp = 'xxx'

proxy: {
    '/portal': {
        target: 'xxx'
    }
}

子产品服务器环境 → Portal 的服务器环境

子产品 && Portal 分别部署到服务器环境上修改子产品的 config 的配置 ，添加 window.APP_CONF.remoteApp 到 Portal 的服务器环境

异常处理

  1. 当 Portal 部署不当，或者是版本不对应的时候，没有 AppMenus 远程暴露出来的话， 做了异常处理思路是： 当请求 remoteEntry.js 出现 error 的时候，是不会展示 AppMenus 相关组件的

  1. 当 Portal 已经部署，其他子产品未接入 Module Federation， 是不会影响到子产品的正常展示的；子产品当下使用的 应是 dt-common 中的 AppMenus

如何开发 AppMenus

file

问题记录

依赖版本不一致

【Error】Could not find "store" in either the context or props of "Connect(N)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(N)".

file

发现报错路径为 portal/xxx，可以定位到是 AppMunes 发生了问题，导致原因子产品 React-Redux 和 Portal React-Redux 版本不一致导致的，需要在对应子产品 federationConfig 处理 react-redux 为共享

总结

本文主要从业务层面结合 webpack 5 Module Federation ，实现 AppMenus 的解耦问题。主要涉及 dt-common 、Portal、子产品的变更。通过解耦能够发现我们对 AppMenus 的开发流程减少了不少，有效的提高了我们的效率。

文章转载自：袋鼠云数栈前端

原文链接：https://www.cnblogs.com/dtux/p/17898758.html

体验地址：引迈 - JNPF快速开发平台_低代码开发平台_零代码开发平台_流程设计器_表单引擎_工作流引擎_软件架构

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1311628.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Https】工作流程

【Https】工作流程

HTTPS 也是⼀个应用层协议。是在 HTTP 协议的基础上引入了⼀个加密层。 前言 由于Http是明文传输&#xff0c;因此如果有人想修改/截获数据都是非常容易&#xff0c;因此就出现了运营商劫持问题。 加密基础知识 明文密钥>密文 加密 密文密钥>明文 解密 对称加密和非对…
阅读更多...
亚马逊云科技 re:Invent 大会 - ElastiCache Serverless模式来袭

亚马逊云科技 re:Invent 大会 - ElastiCache Serverless模式来袭

亚马逊云科技 re:Invent 大会 - ElastiCache Serverless模式来袭 本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 亚马逊云科技开发者社区, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道。 文章目录 亚马逊云…
阅读更多...
jenkins 运行接口自动化测试脚本，安装第三方依赖库的一些总结

jenkins 运行接口自动化测试脚本，安装第三方依赖库的一些总结

之前在做接口自动化时&#xff0c;jenkins 执行 job 安装 requirements.txt 中的第三方依赖库时折腾了许久&#xff0c;网上查的解决方案均未生效&#xff0c;后来找出一条解决方法&#xff0c;做个记录&#xff0c;希望帮助到遇到同样问题的小伙伴。 我们都知道可以通过生成 …
阅读更多...
软考机考考试第一批经验分享

软考机考考试第一批经验分享

由于机考的特殊性&#xff0c;考试环境与传统笔试环境有所不同。下面是与考试环境相关的总结&#xff1a; 草稿纸&#xff1a;考场提供足够数量的草稿纸&#xff0c;每位考生都会分发一张白纸作为草稿纸。在草稿纸上需要写上准考证号。如果不够用&#xff0c;可以向监考老师再次…
阅读更多...
Android 11.0 framework关于systemUI状态栏透明背景的功能实现

Android 11.0 framework关于systemUI状态栏透明背景的功能实现

1.概述 在11.0的系统rom产品定制化开发中，在对于系统原生SystemUI的状态栏背景在沉浸式状态栏的 情况下默认是会随着背景颜色的变化而改变的，在一些特定背景下状态栏的背景也是会改变的，所以由于产品开发需要 要求需要设置状态栏背景为透明的，所以就需要在Activity创建的时…
阅读更多...
排序算法(二)-冒泡排序、选择排序、插入排序、希尔排序、快速排序、归并排序、基数排序

排序算法(二)-冒泡排序、选择排序、插入排序、希尔排序、快速排序、归并排序、基数排序

排序算法(二) 前面介绍了排序算法的时间复杂度和空间复杂数据结构与算法—排序算法&#xff08;一&#xff09;时间复杂度和空间复杂度介绍-CSDN博客&#xff0c;这次介绍各种排序算法——冒泡排序、选择排序、插入排序、希尔排序、快速排序、归并排序、基数排序。 文章目录 排…
阅读更多...
web前端之正弦波浪动功能、repeat、calc

web前端之正弦波浪动功能、repeat、calc

MENU 效果图htmlstylecalcrepeat 效果图 html <div class"grid"><span class"line"></span><span class"line"></span><span class"line"></span><span class"line"><…
阅读更多...
Python采集知乎专栏文章保存成pdf

Python采集知乎专栏文章保存成pdf

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 环境使用: Python 3.8 Pycharm wkhtmltopdf 软件 – 文末获取 模块使用: requests >>> pip install requests 数据请求 parsel >>> pip install parsel 数据解析 re >>> 内置模块 不需要安装…
阅读更多...
linux 防火墙systemctl (个人笔记)

linux 防火墙systemctl (个人笔记)

查看 systemctl status firewalld 开启 systemctl start firewalld 关闭 systemctl stop firewalld.service 查看所有 firewall-cmd --zonepublic --list-ports 开放端口&#xff1a;// --permanent 永久生效,没有此参数重启后失效 firewall-cmd --zonepublic --add-port9527/…
阅读更多...
[PyTorch][chapter 7][李宏毅深度学习][深度学习简介]

[PyTorch][chapter 7][李宏毅深度学习][深度学习简介]

前言&#xff1a; 深度学习常用的开发平台 TensorFlow torch theano caffe DSSTNE mxnet libdnn CNTK 目录&#xff1a; 1&#xff1a; 深度学习发展历史 2&#xff1a; DeepLearning 工程简介 3&#xff1a; DNN 简介 一 发展历史 二 DeepLearning 工程简介 深度学习三…
阅读更多...
如何删除/替换3D模型的材质贴图

如何删除/替换3D模型的材质贴图

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 在3D设计和动画领域&#xff0c;材质是呈现真实感和逼真效果的关键因…
阅读更多...
从广东到俄罗斯：一段跨越万里的电子消费展之旅

从广东到俄罗斯：一段跨越万里的电子消费展之旅

作为一名广东电子消费品行业的从业者&#xff0c;我们经常要奔赴全球不同国家拓展海外业务&#xff0c;而展会就是重要的平台。最近大家在热议的俄罗斯国际消费类电子电器展我参加过一届&#xff0c;跨越万里的旅程&#xff0c;让我深刻体会到了这种国际展览的魅力和挑战。 我参…
阅读更多...
Mac部署Odoo环境-Odoo本地环境部署

Mac部署Odoo环境-Odoo本地环境部署

Odoo本地环境部署 安装Python安装Homebrew安装依赖brew install libxmlsec1 Python运行环境Pycharm示例配置 Mac部署Odoo环境-Odoo本地环境部署 安装Python 新机&#xff0c;若系统没有预装Python&#xff0c;则安装需要版本的Python 点击查询Python官网下载 安装Homebrew 一…
阅读更多...
实战——Mac M2 安装mat工具

实战——Mac M2 安装mat工具

线上环境出现内存飙升的情况&#xff0c;需要工具定位问题发生点就需要用到mat工具了&#xff0c;之前都是在intel芯片环境上安装的&#xff0c;现在换了m2芯片&#xff0c;导致出现了问题&#xff0c;经过一系列调研都解决了&#xff0c;特此记录下&#xff0c;以备后查 开发…
阅读更多...
基于开源的JAVA mongodb jdbc 驱动 使用教程

基于开源的JAVA mongodb jdbc 驱动 使用教程

基于开源的JAVA mongodb jdbc 驱动 使用教程介绍 介绍 本文介绍一款开源的基于JAVA的 Mongodb JDBC 驱动使用教程 开源地址 https://gitee.com/bgong/jdbc-mongodb-driver功能价值 与mybaits融合&#xff1a;复用mybatis的功能特性&#xff0c;如:缓存,if动态判断标签等特…
阅读更多...
LSTM和GRU的介绍以及Pytorch源码解析

LSTM和GRU的介绍以及Pytorch源码解析

介绍一下LSTM模型的结构以及源码&#xff0c;用作自己复习的材料。 LSTM模型所对应的源码在&#xff1a;\PyTorch\Lib\site-packages\torch\nn\modules\RNN.py文件中。 上次上一篇文章介绍了RNN序列模型&#xff0c;但是RNN模型存在比较严重的梯度爆炸和梯度消失问题。 本文…
阅读更多...
HPM6750系列--第七篇 Visual Studio Code使用openocd调试查看外设信息

HPM6750系列--第七篇 Visual Studio Code使用openocd调试查看外设信息

一、目的 在《HPM6750系列--第四篇 搭建Visual Studio Code开发调试环境》我们已经手把手指导大家如何在visual studio code中进行开发&#xff0c;包括编译调试等步骤以及相关配置文件。 但是在实际调试时发现找不到芯片寄存器实时显示的窗口&#xff0c;本篇主要讲解如何实现…
阅读更多...
【Linux】信号--信号初识/信号的产生方式/信号的保存

【Linux】信号--信号初识/信号的产生方式/信号的保存

文章目录 一、信号初步理解1.生活角度的信号2.技术应用角度的信号 二、信号的产生方式1.通过终端按键产生信号2.调用系统函数向进程发信号3.硬件异常产生信号4.由软件条件产生信号5.进程退出时的核心转储问题 三、信号的保存1.信号其他相关常见概念2.信号在内核中的表示3.sigse…
阅读更多...
《PCL多线程加速处理》-配准-icp

《PCL多线程加速处理》-配准-icp

《PCL多线程加速处理》-配准-icp 一、效果展示二、具体实现三、代码一、效果展示 数据越大，速度提升效果越快 1、48万点 2、十万点 3、三万点 4、9000点 配准数据 二、具体实现
阅读更多...
使用uniapp，引入uView遇到的问题(easycom无效解决方法）

使用uniapp，引入uView遇到的问题(easycom无效解决方法）

在HBuilderX通过npm安装uView时&#xff0c;按照官网文档配置easycom无效 官网为&#xff1a; 4. 配置easycom组件模式 此配置需要在项目根目录的pages.json中进行。 温馨提示 uni-app为了调试性能的原因&#xff0c;修改easycom规则不会实时生效&#xff0c;配置完后&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023