一种跨端跨平台多框架融合的模块化集成系统及方法与流程

本发明属于前端工程技术改进领域，具体涉及一种跨端跨平台多框架融合的模块化集成系统及方法；尤其适用于小程序、h5及原生app的跨端开发场景。本发明可应用于微信小程序、支付宝小程序、抖音小程序、独立h5页面、内部app嵌入模块、第三方app嵌入模块等多种产品形态，支持多团队采用不同前端框架独立开发、独立发布，并能够按需动态融合为统一应用。

背景技术：

1、随着小程序、h5和原生app等多端产品的快速发展，前端项目往往需要在不同平台、不同运行环境中提供功能一致或相近的业务能力。相关技术中，较多项目采用单一框架进行开发，例如所有功能模块均使用wepy框架研发，并集中在同一工程内维护，仅支持微信小程序平台。该类方案存在以下问题：其一，wepy框架已停止维护，本身存在同一页面相同组件难以抽象和复用、对第三方组件或库支持程度不足、隐藏组件依然执行组件代码和生命周期等问题；其二，不同团队开发的不同模块只能在一个工程中维护，容易产生代码冲突和发布冲突；其三，功能更新通常需要全量发布，无法实现模块独立发布；其四，跨端能力弱，难以支持多小程序平台以及原生app已有技术描述的功能复用和嵌入需求。

2、微前端架构虽然能够在一定程度上解决web应用中的技术栈锁定和协作耦合问题，但其主要针对web应用，不适用于小程序场景，难以解决小程序分包、路由注册、平台api差异、原生app交互等具体问题。因此，需要一种能够支持多团队、多框架、多端协同开发，并能够在编译阶段动态聚合、在运行时统一调度的模块化集成方案。

技术实现思路

1、本发明的目的在于提供一种能够支持多团队采用不同前端框架独立开发、独立发布，同时支持动态融合为统一应用的跨端跨平台多框架融合的模块化集成系统及方法，旨在解决现有技术中技术栈锁定、协作耦合、发布阻塞以及跨端能力弱等缺陷的技术问题。

2、为解决上述的技术问题，本发明提供一种跨端跨平台多框架融合的模块化集成系统，所述模块化集成系统包括主工程模块、若干子工程模块、插件化融合模块、跨端兼容层以及构建发布模块；

3、所述主工程模块，用于提供应用运行基础框架和统一入口，所述主工程模块预注册有各子工程模块的命名空间和标识符；所述主工程模块可以作为小程序主工程、h5主工程或app嵌入主工程，提供基础配置、公共依赖、全局路由表、应用入口文件、构建脚本以及运行环境初始化逻辑。通过预注册命名空间和标识符，能够使不同子工程模块在融合后具有唯一的路由前缀、组件标识、样式作用域和消息通道，避免不同团队、不同框架模块之间发生命名冲突和路由冲突。为多框架融合提供统一运行基础和统一管理入口，使各子工程模块能够以插件化方式接入、运行和发布。

4、若干所述子工程模块，分别基于不同的前端框架独立开发，各所述子工程模块具有独立的路由配置和依赖管理，并作为独立分包或独立模块存在；所述前端框架包括wepy框架、taro框架以及小程序原生框架；例如，小程序团队可使用wepy框架或小程序原生框架开发历史功能模块，使用taro框架开发新功能模块；智能运营团队可使用taro框架实现营销推广功能模块；app团队可使用h5开发履约详情与下单模块。各子工程模块可以分别由不同团队独立开发、独立调试、独立编译和独立发布，也可以按需融合到主工程模块中。解除单一框架对团队技术选型的限制，降低多团队在同一工程中开发造成的代码耦合和发布阻塞，支持渐进式技术栈升级。

5、所述插件化融合模块，与所述主工程模块、各所述子工程模块连接，用于在编译阶段将多个所述子工程模块的业务代码、全局样式、路由配置及共用依赖合并至所述主工程模块，其中所述业务代码按照分包目录合并，所述路由配置按照预定义的协议格式动态合并至所述主工程模块的路由表中，所述全局样式根据模块化命名空间进行合并；所述插件化融合模块可以由构建插件、编译脚本或独立进程实现，在开发调试阶段按需将子工程模块集成到主工程模块的启动运行环境中，在打包阶段将集成到主工程模块的代码一起打包。实现多框架代码在编译阶段的自动融合，使不同框架、不同团队开发的模块能够作为一个统一应用运行，同时保持各子工程模块的相对独立性和可维护性。

6、所述跨端兼容层，分别与所述主工程模块、各所述子工程模块连接，用于封装多平台api差异，提供向外输出统一接口供各所述子工程模块调用，所述跨端兼容层包括api层、适配器层和api实现层，所述适配器层通过运行环境检查将所述api层的调用请求路由至对应的api实现层；所述api层用于向外提供业务模块直接调用的统一api；所述适配器层用于检测当前运行环境，根据运行环境选择对应的api实例，保持不同运行环境下api方法名一致；所述 api 实现层用于接收api调用消息，完成对应平台的api逻辑执行；使各子工程模块无需关心底层平台差异，仅通过统一api即可在不同小程序平台、h5环境和app环境中调用对应能力，提高代码复用率和跨端兼容能力。

7、所述构建发布模块，与所述插件化融合模块输出端相连，用于将融合后的代码打包为多端应用，所述多端应用包括微信小程序、支付宝小程序、抖音小程序、h5页面及原生app嵌入模块中的至少一种。支持融合后的应用按目标平台分别打包发布，也支持子工程模块独立发布，满足多平台、多场景的发布需求。

8、本发明的进一步技术方案是：所述插件化融合模块还配置有变更监听单元；所述变更监听单元用于在开发调试阶段实时监听所述子工程模块的业务代码变更和所述主工程模块的配置变更事件，当监听到子工程业务代码变更时执行增量编译并将编译结果自动合并至所述主工程模块，实现增量热加载；当监听到主工程配置变更时重新编译所有子工程模块；

9、所述插件化融合模块在合并所述多个子工程模块时，各所述子工程模块的路由配置按照预定义的协议和格式注册至所述主工程模块的路由表中，并以独立分包方式加载。在开发阶段提高多工程协同开发效率，减少人工合并操作，保证子工程变更能够及时反映到主工程运行环境中，同时避免配置变更导致的编译遗漏。

10、本发明的进一步技术方案是：所述跨端兼容层的适配器层通过运行环境检查将调用请求路由至对应的运行环境api，所述运行环境api包括浏览器api、各小程序平台api以及通过jsbridge与原生app交互的jssdk api；

11、所述适配器层识别的运行环境包括h5环境、小程序环境、app环境；在h5 环境调用浏览器原生api；在小程序环境调用对应小程序平台原生api；在app 环境通过wsfjssdk以及postmessage协议经由jsbridge完成与原生app之间交互。统一封装不同运行环境的api差异，使业务代码能够在h5、各小程序平台和原生app中复用，并能够在内部app中调用更完整的原生能力。

12、本发明的进一步技术方案是：各所述子工程模块采用monorepo模式组织，各子工程模块能够独立编译打包，也能够随主工程模块整体编译打包；各子工程模块之间支持组件共享、路由跳转交互以及标准化事件消息通讯；

13、各所述子工程模块配置有独立命名空间以及唯一标识符，各所述子工程模块的路由配置通过命名空间以及唯一标识符做隔离，避免路由冲突；所述子工程模块之间的事件消息通讯采用统一标准消息体格式，以事件通知的形式完成消息传递。在保持子工程独立性的同时，实现组件、依赖、路由和消息的统一管理和复用，降低重复开发成本。

14、本发明的进一步技术方案是：所述构建发布模块打包生成的h5模块，能够通过统一的jssdk嵌入内部app或第三方app中运行，在所述内部app中通过jsbridge调用原生api，在所述第三方app或独立h5环境中调用浏览器api；

15、所述构建发布模块还配置有代码树摇单元；所述代码树摇单元用于根据目标平台配置过滤掉当前目标平台不需要执行的业务代码，缩减打包产物体积。使同一h5模块能够适配独立访问、内部app嵌入和第三方app嵌入等多种场景，并通过按平台过滤代码降低产物体积，提高加载性能。

16、本发明的另一目的在于提供一种跨端跨平台多框架融合的模块化集成，所述模块化集成方法用于上述的模块化集成系统，其包括以下步骤：

17、s1、主工程模块启动，按需并行编译一个或多个基于不同前端框架独立开发的子工程模块，各所述子工程模块分别作为独立分包或独立模块存在；使主工程能够根据当前开发或发布需求，仅编译所需子工程，减少不必要编译，提高构建效率；

18、s2、通过调用插件化融合模块将编译阶段完成的所述子工程模块的业务代码、全局样式、路由配置及共用依赖合自愿并至主工程模块，其中所述路由配置按照预定义的协议格式动态合并至所述主工程模块的路由表中；自动完成多子工程代码向主工程的融合，避免人工复制和修改，保证融合过程规范、可靠；

19、s3、在编译阶段通过抽象语法树解析与转换实现多框架代码的融合，并生成跨端兼容的中间代码；兼容wepy、taro、小程序原生等不同框架的代码形态，将其转换为可在目标平台运行的目标代码；

20、s4、根据目标平台的环境变量，通过摇树机制过滤与所述目标平台无关的代码，打包生成可独立运行或嵌入的应用；针对微信小程序、支付宝小程序、抖音小程序、h5、app嵌入等不同目标平台生成适配产物，减少无关代码，提高运行效率；

21、s5、根据发布需求选择所述子工程模块独立发布、或与所述主工程模块融合后统一发布；支持模块独立发布和整体融合发布两种模式，解决功能更新需全量发布的问题。

22、本发明的进一步技术方案是：所述步骤s2中，所述子工程的业务代码按照分包目录合并至所述主工程，全局样式根据模块化命名空间合并，共用依赖合并为同一依赖。使各子工程模块在主工程中保持分包隔离、样式隔离和依赖复用，避免冲突并减小产物体积。

23、本发明的进一步技术方案是：所述步骤s3中，多框架代码的融合通过以下方式实现：通过babel-parser对源代码进行词法分析和语法分析生成抽象语法树；通过babel-types对所述抽象语法树进行修改和转换；通过babel-generate将转换后的抽象语法树生成对应平台的目标代码。以统一编译管线处理不同框架源码，实现编译阶段的代码转换和跨端适配。

24、本发明的进一步技术方案是：所述步骤s4中，所述环境变量包括平台标识和环境标识，所述跨端兼容层在打包时根据所述平台标识和所述环境标识选择打包对应平台的代码。使同一套源码能够按目标平台和环境自动选择对应实现，提高多平台发布效率。

25、本发明的进一步技术方案是：所述步骤s5中，所述子工程与所述主工程融合后统一发布时，打包生成的各平台小程序直接发布至对应的各小程序平台，或通过持续集成持续部署流水线发布为线上h5页面供内部app或外部app集成。打通从开发、融合、打包到发布的完整流程，支持小程序和h5等多种交付形态。

26、本发明的有益效果是：模块独立开发相对团队所有人在同一工程下开发，冲突合并比例降低约80%，多工程减少了路由、配置等公共模块的耦合，大幅提升团队协作效率；在架构升级上，从需要整体架构重构的3-6个月周期，降低到可以按照模块渐进式升级的以每周迭代为周期；该套多框架融合的模块化集成方案使模块化标准更加清晰，模块化集成过程由插件脚本执行，合并过程无需人为操作，可靠性稳定性强；跨平台、跨端支持能力增强，支持微信小程序、支付宝小程序、抖音小程序、独立h5模块、内部或外部app嵌入；提升代码复用性，降低维护成本，各端各平台可以复用工程中80%以上的业务代码，极大提升开发效率。