(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210209292.4 (22)申请日 2022.03.04 (71)申请人 中国—东盟信息 港股份有限公司 地址 530000 广西壮 族自治区南宁市平乐 大道18号 (72)发明人 黄继昌　阚浩　 (74)专利代理 机构 广州海心联合专利代理事务 所(普通合伙) 44295 专利代理师 张栩颜　莫秀波 (51)Int.Cl. G06F 9/445(2018.01) G06F 9/455(2006.01) (54)发明名称 一种前端应用容器化的本地模块加载 方法 (57)摘要 本发明公开了一种前端应用容器化的本地 模块加载方法， 涉及web前端 开发技术领域， 解决 应用模块无法在多个不同项目中进行集成复用 的技术问题， 方法包括： 将各本地模块打包到使 用npm发布的javascrip tlib库； 构建App组件， 构 建容器配置对象， 使用容器化高阶函数构建应用 容器； 容器化高阶函数获取应用及各本地模块的 个性化配置信息及公共约定配置信息， 并整理合 并到容器配置对象； 构建容器上下文组件， 容器 上下文组件接收并保存之前配置好的容器配置 对象； 根据配置好的容器配置对象按照统一的加 载方式加载并初 始化各本地模 块得到Container 组件； 在Container组件的render函数中， 使用容 器上下文组件向子节点传递容器配置对象中的 配置信息。 权利要求书1页 说明书3页 附图1页 CN 114625438 A 2022.06.14 CN 114625438 A 1.一种前端应用容器化的本地模块加载 方法， 其特 征在于， 包括： 将各本地模块打包到使用npm发布的javascriptl ib库； 构建作为应用的运行环境中资源和状态信息统一存 储及管理中心的应用容器； 构建作为各本地模块应用的业 务入口的App组件； 构建用于定义应用自身以及各本地模块的个性化配置信息及公共约定配置信息的容 器配置对象； 构建容器化高阶组件， 所述容器化高阶组件获取应用及各本地模块的个性化配置信 息 及公共约定配置信息， 并进行初始化操作配置到所述容器配置对 象， 将配置好的容器配置 对象保存到所述应用容器中； 构建容器上 下文组件， 所述 容器上下文组件接收并保存配置好的容器 配置对象； 根据配置好的容器配置对象按照统一的加载方式加载所述各本地模块得到Container 组件； 在所述Container组件的render函数中， 使用所述容器上下文组件向子节点传递容器 配置对象中的配置信息， 并使用所述 容器上下文组件 包裹所述Co ntainer组件的属性。 2.根据权利要求1所述的一种前端应用容器化的本地模块加载方法， 其特征在于， 所述 公共约定配置信息包括基于i18next库的国 际化资源配置、 基于react ‑router库的路由配 置、 基于redux库的状态配置、 ap pWrapper数组高阶函数。 3.根据权利要求2所述的一种前端应用容器化的本地模块加载方法， 其特征在于， 所述 加载方式包括： 将所述容器配置对象中各本地模块配置的国际化资源， 使用各本地模块的名称及版本 号作为命名空间key， 注 册进i18next中； 将所述容器配置对象中各本地模块配置的reduxreducer， 使用各本地模块的名称及版 本号作为命名空间key， 注册进容器的reduxstore中， 并调用各本地模块定义的initAction 函数进行初始化； 读取所述容器配置对象中各本地模块配置的appWapp er数组， 使用所述appWapper数组 的reducer函数对所述Ap p组件进行包 装， 并赋给所述Container组件的属性。 4.根据权利要求3所述的一种前端应用容器化的本地模块加载方法， 其特征在于， 所述 加载方式还包括： 读取所述容器配置对 象中各本地模块配置的路由信息， 根据优先级对各 路由信息进行排序， 并组合成新的路由对象。 5.根据权利要求2所述的一种前端应用容器化的本地模块加载方法， 其特征在于， 所述 容器化高阶组件根据公共约定配置信息进 行约定的初始 化操作， 并将初始 化好的国际化转 换对象、 reduxstore对象、 路由信息通过React的上 下文组件Co ntext传递到 子组件中使用。 6.根据权利要求1所述的一种前端应用容器化的本地模块加载方法， 其特征在于， 在加 载各本地模块之前， 先加载 所述App组件到所述应用容器。权　利　要　求　书 1/1 页 2 CN 114625438 A 2一种前端应用容器化的本地模块加载 方法 技术领域 [0001]本发明涉及web前端开发技术领域， 更具体地说， 它涉及一种前端应用容器化的本 地模块加载 方法。 背景技术 [0002]在多项目建设中， 各项 目中往往会有一些功能一致的前端应用模块， 但各模块在 不同项目中都是独立建设， 它们的初始 化逻辑、 模块资源和状态的加载可能都不一样， 当打 包成javascript  lib库的进行复用的时候， 就可能存在重复和冲突， 并且模块中对第三方 库的使用版本不一致甚至可能使用不同的功能库， 这些问题， 在没有明确标准化规则， 本地 模块在各项目应用中集成后， 可能导 致模块无法进行复用。 发明内容 [0003]本发明要解决的技术问题是针对现有技术的上述不足， 本发明的目的是提供一种 可以提高测量精度的前端应用容器化的本地模块加载方法， 以实现模块集成后可以正常进 行复用。 [0004]本发明的技 术方案是： 一种前端应用容器化的本地模块加载 方法， 包括： [0005]将各本地模块打包到使用npm发布的javascriptl ib库； [0006]构建作为应用的运行环境中资源和状态信息统一存 储及管理中心的应用容器； [0007]构建作为各本地模块应用的业 务入口的App组件； [0008]构建用于定义应用自身以及各本地模块的个性化配置信息及公共约定配置信息 的容器配置对象； [0009]构建容器化高阶组件， 所述容器化高阶组件获取应用及各本地模块的个性化配置 信息及公共约定配置信息， 并进行初始化操作配置到所述容器配置对 象， 将配置好的容器 配置对象保存到所述应用容器中； [0010]构建容器上 下文组件， 所述 容器上下文组件接收并保存配置好的容器 配置对象； [0011]根据配置好的容器配置对象按照统一的加载方式加载所述各本地模块得到 Container组件； [0012]在所述Container组件的render函数中， 使用所述容器上下文组件向子节点传递 容器配置对象中的配置信息， 并使用所述 容器上下文组件 包裹所述Co ntainer组件的属性。 [0013]作为进一步地改进， 所述公共约定配置信息包括基于i18next库的国际化资源配 置、 基于react ‑router库的路由配置、 基于redux库的状态配置、 ap pWrapper数组高阶函数。 [0014]进一步地， 所述加载 方式包括： [0015]将所述容器配置对象中各本地模块配置的国际化资源， 使用各本地模块的名称及 版本号作为命名空间key， 注 册进i18next中； [0016]将所述容器配置对象中各本地模块配置的r eduxreducer， 使用各本地模块的名称 及版本号作为命名空间key， 注册进容器的reduxstore中， 并调用各本地模块定义的说　明　书 1/3 页 3 CN 114625438 A 3