组件验证方法、装置、设备、存储介质及计算机程序产品与流程

本技术涉及计算机，尤其涉及组件验证方法、装置、设备、存储介质及计算机程序产品。

背景技术：

1、随着web前端工程规模化演进，可嵌入组件（widget）已成为主流业务交付载体。widget是一种独立打包的ui单元，可由门户、搜索页、内容页等宿主页面在运行时动态挂载，承载问答、行程、运营卡片等细分业务能力。在工程实践中，单一代码仓库内并存多个相互独立的widget已成为典型项目特征，各widget需独立编译构建、独立部署发布，并适配差异化的宿主环境完成动态加载。完整的widget研发流程分为开发调试、集成联调及构建产物验证三大阶段，分别承担本地快速迭代、宿主环境业务对版及上线前生产制品校验的职能，这三大阶段的流程贯通性、环境一致性及验证可靠性，直接决定多widget平台的研发效率与线上运行稳定性。

2、目前，针对前端多组件工程项目的开发调试与上线验证，现有的方案可以基于vite、webpack dev server等本地开发服务器，直接预览源码经实时编译后的运行效果，并以开发态的运行结果作为组件合格判定依据。然而，该方案仅校验源码的实时编译结果，而线上真实交付的制品为经过完整打包优化后的js、css产物，由于验证载体与交付载体并非同一对象，导致验证结果无法反映真实线上运行表现，准确性不高。

技术实现思路

1、本技术的主要目的在于提供一种组件验证方法、装置、设备、存储介质及计算机程序产品，旨在解决现有的组件验证方法通常以源码为校验对象，导致验证结果无法反映真实线上表现，准确性不高的技术问题。

2、为实现上述目的，本技术提出一种组件验证方法，所述方法包括：

3、响应于组件管理命令，根据所述组件管理命令从若干个预设运行场景中确定当前运行场景以及目标组件标识，其中，各所述预设运行场景共用同一套编译规则；

4、在所述当前运行场景为产物预览验证场景的情况下，根据所述目标组件标识确定待验证组件，并构建所述待验证组件的真实打包产物；

5、根据所述待验证组件的目标运行数据和所述真实打包产物生成宿主预览页面，所述宿主预览页面包含对所述真实打包产物的资源引用；

6、在所述宿主预览页面中加载并执行所述真实打包产物，以对所述真实打包产物进行验证。

7、在一实施例中，所述根据所述目标组件标识确定待验证组件，并构建所述待验证组件的真实打包产物的步骤，包括：

8、将所述目标组件标识与预设组件目录中的所有子目录进行匹配，确定与所述目标组件标识匹配的目标子目录；

9、将所述目标子目录对应的组件确定为待验证组件，并从所述目标子目录中读取组件入口文件；

10、按照所述编译规则对所述组件入口文件进行生产打包，生成所述待验证组件的真实打包产物。

11、在一实施例中，所述按照所述编译规则对所述组件入口文件进行生产打包，生成所述待验证组件的真实打包产物的步骤，包括：

12、对所述组件入口文件中的公共依赖进行外部依赖标记；

13、按照所述编译规则对所述组件入口文件进行生产打包，并在打包过程中跳过所述外部依赖标记的所述公共依赖，生成所述待验证组件的真实打包产物。

14、在一实施例中，所述根据所述待验证组件的目标运行数据和所述真实打包产物生成宿主预览页面的步骤，包括：

15、根据所述目标组件标识定位所述待验证组件对应的目标组件数据文件；

16、从所述目标组件数据文件中获取所述待验证组件的目标运行数据，所述目标运行数据为所述待验证组件在所述产物预览验证场景下所需的运行数据；

17、创建初始预览页面，并基于所述目标组件标识在所述初始预览页面中生成所述待验证组件对应的目标挂载节点；

18、将所述目标运行数据注入至全局命名空间，并在所述初始预览页面中建立所述真实打包产物的资源引用，以生成宿主预览页面。

19、在一实施例中，所述在所述宿主预览页面中加载并执行所述真实打包产物，以对所述真实打包产物进行验证的步骤，包括：

20、通过静态文件服务托管所述宿主预览页面以及所述真实打包产物；

21、响应于浏览器基于所述宿主预览页面触发的访问请求，通过所述静态文件服务返回所述宿主预览页面的页面内容；

22、在所述浏览器加载所述页面内容的过程中，根据所述页面内容中的资源引用加载所述真实打包产物，并执行所述真实打包产物，以对所述真实打包产物进行验证。

23、在一实施例中，所述根据所述组件管理命令从若干个预设运行场景中确定当前运行场景以及目标组件标识的步骤之后，还包括：

24、在所述当前运行场景为开发调试场景的情况下，通过目标通配符扫描预设组件目录，获取全部组件入口；

25、根据所述目标组件标识从所述全部组件入口中确定待加载组件子集；

26、在隔离容器中加载并渲染所述待加载组件子集。

27、在一实施例中，所述根据所述组件管理命令从若干个预设运行场景中确定当前运行场景以及目标组件标识的步骤之后，还包括：

28、在所述当前运行场景为集成联调场景的情况下，通过预设页面转换钩子识别初始联调页面中的占位符节点，所述占位符节点用于注入组件资源；

29、根据所述目标组件标识确定待联调组件的脚本引用、挂载节点以及全局运行数据；

30、将所述脚本引用、所述挂载节点以及所述全局运行数据注入所述占位符节点，以将所述初始联调页面转换为宿主联调页面，并通过所述宿主联调页面对所述待联调组件进行联调。

31、在一实施例中，所述方法还包括：

32、读取所述目标组件标识对应的目标组件的组件数据文件，所述组件数据文件为所述目标组件维护的单一数据源文件；

33、确定与所述当前运行场景匹配的目标注入通道，所述目标注入通道包括第一注入通道、第二注入通道和第三注入通道；

34、在所述当前运行场景为集成联调场景的情况下，通过所述第一注入通道在宿主页面转换过程中将所述组件数据文件中的运行数据注入至全局命名空间；

35、或者，在所述当前运行场景为开发调试场景的情况下，通过所述第二注入通道采用动态导入方式将所述组件数据文件的运行数据注入至全局命名空间；

36、或者，在所述当前运行场景为产物预览验证场景的情况下，通过所述第三注入通道在生成宿主预览页面时采用静态写入方式将所述组件数据文件的运行数据注入至全局命名空间。

37、在一实施例中，所述根据所述组件管理命令从若干个预设运行场景中确定当前运行场景以及目标组件标识的步骤，包括：

38、从所述组件管理命令中提取运行场景参数；

39、将所述运行场景参数与预设场景路由表中的若干个预设运行场景进行匹配；

40、将与所述运行场景参数匹配的所述预设运行场景确定为当前运行场景。

41、在一实施例中，所述在所述宿主预览页面中加载并执行所述真实打包产物，以对所述真实打包产物进行验证的步骤之后，还包括：

42、响应于组件挂载请求，获取待挂载组件的目标宿主容器的第一容器标识；

43、将所述第一容器标识与已挂载容器的第二容器标识进行比较；

44、在所述第一容器标识与第二容器标识一致的情况下，复用预先创建的渲染根节点以对所述待挂载组件进行挂载；

45、或者，在所述第一容器标识与第二容器标识不一致的情况下，对预先创建的渲染根节点和所述渲染根节点对应的组件实例进行销毁，并在所述目标宿主容器中创建目标渲染根节点，以基于所述目标渲染根节点对所述待挂载组件进行挂载。

46、此外，为实现上述目的，本技术还提出一种组件验证装置，所述装置包括：

47、场景确定模块，用于响应于组件管理命令，根据所述组件管理命令从若干个预设运行场景中确定当前运行场景以及目标组件标识，其中，各所述预设运行场景共用同一套编译规则；

48、产物生成模块，用于在所述当前运行场景为产物预览验证场景的情况下，根据所述目标组件标识确定待验证组件，并构建所述待验证组件的真实打包产物；

49、页面生成模块，用于根据所述待验证组件的目标运行数据和所述真实打包产物生成宿主预览页面，所述宿主预览页面包含对所述真实打包产物的资源引用；

50、组件管理模块，用于在所述宿主预览页面中加载并执行所述真实打包产物，以对所述真实打包产物进行验证。

51、在一实施例中，所述产物生成模块，还用于将所述目标组件标识与预设组件目录中的所有子目录进行匹配，确定与所述目标组件标识匹配的目标子目录；

52、所述产物生成模块，还用于将所述目标子目录对应的组件确定为待验证组件，并从所述目标子目录中读取组件入口文件；

53、所述产物生成模块，还用于按照所述编译规则对所述组件入口文件进行生产打包，生成所述待验证组件的真实打包产物。

54、在一实施例中，所述页面生成模块，还用于根据所述目标组件标识定位所述待验证组件对应的目标组件数据文件；

55、所述页面生成模块，还用于从所述目标组件数据文件中获取所述待验证组件的目标运行数据，所述目标运行数据为所述待验证组件在所述产物预览验证场景下所需的运行数据；

56、所述页面生成模块，还用于创建初始预览页面，并基于所述目标组件标识在所述初始预览页面中生成所述待验证组件对应的目标挂载节点；

57、所述页面生成模块，还用于将所述目标运行数据注入至全局命名空间，并在所述初始预览页面中建立所述真实打包产物的资源引用，以生成宿主预览页面。

58、在一实施例中，所述组件管理模块，还用于通过静态文件服务托管所述宿主预览页面以及所述真实打包产物；

59、所述组件管理模块，还用于响应于浏览器基于所述宿主预览页面触发的访问请求，通过所述静态文件服务返回所述宿主预览页面的页面内容；

60、所述组件管理模块，还用于在所述浏览器加载所述页面内容的过程中，根据所述页面内容中的资源引用加载所述真实打包产物，并执行所述真实打包产物，以对所述真实打包产物进行验证。

61、在一实施例中，所述组件管理模块，还用于在所述当前运行场景为开发调试场景的情况下，通过目标通配符扫描预设组件目录，获取全部组件入口；

62、所述组件管理模块，还用于根据所述目标组件标识从所述全部组件入口中确定待加载组件子集；

63、所述组件管理模块，还用于在隔离容器中加载并渲染所述待加载组件子集。

64、在一实施例中，所述组件管理模块，还用于在所述当前运行场景为集成联调场景的情况下，通过预设页面转换钩子识别初始联调页面中的占位符节点，所述占位符节点用于注入组件资源；

65、所述组件管理模块，还用于根据所述目标组件标识确定待联调组件的脚本引用、挂载节点以及全局运行数据；

66、所述组件管理模块，还用于将所述脚本引用、所述挂载节点以及所述全局运行数据注入所述占位符节点，以将所述初始联调页面转换为宿主联调页面，并通过所述宿主联调页面对所述待联调组件进行联调。

67、在一实施例中，所述组件管理模块，还用于读取所述目标组件标识对应的目标组件的组件数据文件，所述组件数据文件为所述目标组件维护的单一数据源文件；

68、所述组件管理模块，还用于确定与所述当前运行场景匹配的目标注入通道，所述目标注入通道包括第一注入通道、第二注入通道和第三注入通道；

69、所述组件管理模块，还用于在所述当前运行场景为集成联调场景的情况下，通过所述第一注入通道在宿主页面转换过程中将所述组件数据文件中的运行数据注入至全局命名空间；

70、或者，所述组件管理模块，还用于在所述当前运行场景为开发调试场景的情况下，通过所述第二注入通道采用动态导入方式将所述组件数据文件的运行数据注入至全局命名空间；

71、或者，所述组件管理模块，还用于在所述当前运行场景为产物预览验证场景的情况下，通过所述第三注入通道在生成宿主预览页面时采用静态写入方式将所述组件数据文件的运行数据注入至全局命名空间。

72、此外，为实现上述目的，本技术还提出一种组件验证设备，所述设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序配置为实现如上文所述的组件验证方法的步骤。

73、此外，为实现上述目的，本技术还提出一种存储介质，所述存储介质为计算机可读存储介质，所述存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如上文所述的组件验证方法的步骤。

74、此外，为实现上述目的，本技术还提供一种计算机程序产品，所述计算机程序产品包括计算机程序，所述计算机程序被处理器执行时实现如上文所述的组件验证方法的步骤。

75、本技术提供了一种组件验证方法，本技术公开了响应于组件管理命令，根据组件管理命令从若干个预设运行场景中确定当前运行场景以及目标组件标识，其中，各预设运行场景共用同一套编译规则；在当前运行场景为产物预览验证场景的情况下，根据目标组件标识确定待验证组件，并构建待验证组件的真实打包产物；根据待验证组件的目标运行数据和真实打包产物生成宿主预览页面，宿主预览页面包含对真实打包产物的资源引用；在宿主预览页面中加载并执行真实打包产物，以对真实打包产物进行验证；由于本技术可以在产物预览验证场景下，以真实打包产物作为校验对象，并通过生成宿主预览页面在浏览器中实际加载执行该真实产物进行验证，从而可以确保验证目标与线上交付制品完全同源，使得验证结果能够真实反映线上运行表现，进而提高了校验结果的准确性。同时，本技术通过各预设运行场景共用同一套编译规则，使得开发调试、集成联调和产物预览验证各运行场景下的编译逻辑完全一致，消除了开发环境与生产环境之间的编译规则差异，从而有利于避免因环境不一致导致的验证偏差，进一步提升了组件验证的准确性。