一种前端应用容器化的本地模块加载方法技术

本发明专利技术公开了一种前端应用容器化的本地模块加载方法，涉及web前端开发技术领域，解决应用模块无法在多个不同项目中进行集成复用的技术问题，方法包括：将各本地模块打包到使用npm发布的javascriptlib库；构建App组件，构建容器配置对象，使用容器化高阶函数构建应用容器；容器化高阶函数获取应用及各本地模块的个性化配置信息及公共约定配置信息，并整理合并到容器配置对象；构建容器上下文组件，容器上下文组件接收并保存之前配置好的容器配置对象；根据配置好的容器配置对象按照统一的加载方式加载并初始化各本地模块得到Container组件；在Container组件的render函数中，使用容器上下文组件向子节点传递容器配置对象中的配置信息。配置信息。配置信息。

【技术实现步骤摘要】
一种前端应用容器化的本地模块加载方法


[0001]本专利技术涉及web前端开发
，更具体地说，它涉及一种前端应用容器化的本地模块加载方法。

技术介绍

[0002]在多项目建设中，各项目中往往会有一些功能一致的前端应用模块，但各模块在不同项目中都是独立建设，它们的初始化逻辑、模块资源和状态的加载可能都不一样，当打包成javascript lib库的进行复用的时候，就可能存在重复和冲突，并且模块中对第三方库的使用版本不一致甚至可能使用不同的功能库，这些问题，在没有明确标准化规则，本地模块在各项目应用中集成后，可能导致模块无法进行复用。

技术实现思路

[0003]本专利技术要解决的技术问题是针对现有技术的上述不足，本专利技术的目的是提供一种可以提高测量精度的前端应用容器化的本地模块加载方法，以实现模块集成后可以正常进行复用。
[0004]本专利技术的技术方案是：一种前端应用容器化的本地模块加载方法，包括：
[0005]将各本地模块打包到使用npm发布的javascriptlib库；
[0006]构建作为应用的运行环境中资源和状态信息统一存储及管理中心的应用容器；
[0007]构建作为各本地模块应用的业务入口的App组件；
[0008]构建用于定义应用自身以及各本地模块的个性化配置信息及公共约定配置信息的容器配置对象；
[0009]构建容器化高阶组件，所述容器化高阶组件获取应用及各本地模块的个性化配置信息及公共约定配置信息，并进行初始化操作配置到所述容器配置对象，将配置好的容器配置对象保存到所述应用容器中；
[0010]构建容器上下文组件，所述容器上下文组件接收并保存配置好的容器配置对象；
[0011]根据配置好的容器配置对象按照统一的加载方式加载所述各本地模块得到Container组件；
[0012]在所述Container组件的render函数中，使用所述容器上下文组件向子节点传递容器配置对象中的配置信息，并使用所述容器上下文组件包裹所述Container组件的属性。
[0013]作为进一步地改进，所述公共约定配置信息包括基于i18next库的国际化资源配置、基于react
‑
router库的路由配置、基于redux库的状态配置、appWrapper数组高阶函数。
[0014]进一步地，所述加载方式包括：
[0015]将所述容器配置对象中各本地模块配置的国际化资源，使用各本地模块的名称及版本号作为命名空间key，注册进i18next中；
[0016]将所述容器配置对象中各本地模块配置的reduxreducer，使用各本地模块的名称及版本号作为命名空间key，注册进容器的reduxstore中，并调用各本地模块定义的
initAction函数进行初始化；
[0017]读取所述容器配置对象中各本地模块配置的appWapper数组，使用所述appWapper数组的reducer函数对所述App组件进行包装，并赋给所述Container组件的属性。
[0018]进一步地，所述加载方式还包括：读取所述容器配置对象中各本地模块配置的路由信息，根据优先级对各路由信息进行排序，并组合成新的路由对象。
[0019]进一步地，所述容器化高阶组件根据公共约定配置信息进行约定的初始化操作，并将初始化好的国际化转换对象、reduxstore对象、路由信息通过React的上下文组件Context传递到子组件中使用。
[0020]进一步地，在加载各本地模块之前，先加载所述App组件到所述应用容器。
[0021]有益效果
[0022]本专利技术与现有技术相比，具有的优点为：
[0023]本专利技术中应用的本地模块通过容器化的方式可以独立开发、独立打包，并有标准化规范的统一加载方式，可以在各项目进行复用，保证资源加载和状态不会冲突，可以正常使用。
附图说明
[0024]图1为本专利技术的流程图。
具体实施方式
[0025]下面结合附图中的具体实施例对本专利技术做进一步的说明。
[0026]参阅图1，一种前端应用容器化的本地模块加载方法，包括：
[0027]将各本地模块打包到使用npm发布的javascriptlib库；
[0028]构建作为应用的运行环境中资源和状态信息统一存储及管理中心的应用容器，使用容器化高阶函数构建应用容器；
[0029]构建作为各本地模块应用的业务入口的App组件，在加载各本地模块之前，先加载App组件到应用容器；
[0030]构建用于定义应用自身以及各本地模块的个性化配置信息及公共约定配置信息的ContainerConfig容器配置对象；公共约定配置信息包括基于i18next库的国际化资源配置、基于react
‑
router库的路由配置、基于redux库的状态配置、appWrapper数组高阶函数；
[0031]构建Containerize容器化高阶组件，使用容器化高阶函数构建Containerize容器化高阶组件，Containerize容器化高阶组件获取应用及各本地模块的个性化配置信息及公共约定配置信息，并进行初始化操作配置到ContainerConfig容器配置对象，将配置好的ContainerConfig容器配置对象保存到应用容器中；
[0032]构建ContainerContextProvider容器上下文组件，ContainerContextProvider容器上下文组件接收并保存配置好的ContainerConfig容器配置对象；
[0033]根据配置好的ContainerConfig容器配置对象按照统一的加载方式加载各本地模块得到Container组件，即，使用containerize容器化高阶组件作为应用容器化入口，接受应用的App组件及各本地模块的配置信息ContainerConfig容器配置对象作为入参，并返回Container组件；
[0034]在Container组件的render函数中，使用ContainerContextProvider容器上下文组件向子节点传递ContainerConfig容器配置对象中的配置信息，并使用ContainerContextProvider容器上下文组件包裹Container组件的ComposeWrapperComponent属性。
[0035]在Container组件的构造函数进行初始化工作，加载方式包括：
[0036]将ContainerConfig容器配置对象中各本地模块配置的国际化资源，使用各本地模块的名称及版本号作为命名空间key，注册进i18next中；
[0037]将ContainerConfig容器配置对象中各本地模块配置的reduxreducer，使用各本地模块的名称及版本号作为命名空间key，注册进容器的reduxstore中，并调用各本地模块定义的initActi本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端应用容器化的本地模块加载方法，其特征在于，包括：将各本地模块打包到使用npm发布的javascriptlib库；构建作为应用的运行环境中资源和状态信息统一存储及管理中心的应用容器；构建作为各本地模块应用的业务入口的App组件；构建用于定义应用自身以及各本地模块的个性化配置信息及公共约定配置信息的容器配置对象；构建容器化高阶组件，所述容器化高阶组件获取应用及各本地模块的个性化配置信息及公共约定配置信息，并进行初始化操作配置到所述容器配置对象，将配置好的容器配置对象保存到所述应用容器中；构建容器上下文组件，所述容器上下文组件接收并保存配置好的容器配置对象；根据配置好的容器配置对象按照统一的加载方式加载所述各本地模块得到Container组件；在所述Container组件的render函数中，使用所述容器上下文组件向子节点传递容器配置对象中的配置信息，并使用所述容器上下文组件包裹所述Container组件的属性。2.根据权利要求1所述的一种前端应用容器化的本地模块加载方法，其特征在于，所述公共约定配置信息包括基于i18next库的国际化资源配置、基于react
‑
router库的路由配置、基于redux库的状态配置、appWrapper数组高阶函数。3.根据权利要求2所述的一种前端应用容器化的本地...

【专利技术属性】
技术研发人员：黄继昌，阚浩，
申请(专利权)人：中国—东盟信息港股份有限公司，
类型：发明
国别省市：