(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210863386.3 (22)申请日 2022.07.21 (71)申请人 携程旅游网络技 术 （上海） 有限公司 地址 200335 上海市长 宁区福泉路9 9号 (72)发明人 孙罡　李超龙　周巍　 (74)专利代理 机构 上海弼兴律师事务所 31283 专利代理师 林嵩　罗朗 (51)Int.Cl. G06F 8/36(2018.01) G06F 8/38(2018.01) G06F 8/41(2018.01) G06F 8/71(2018.01) G06F 9/451(2018.01) (54)发明名称 用于嵌入H5页面的前端组件的处理方法、 系 统和设备 (57)摘要 本发明公开了一种用于嵌入H5页面的前端 组件的处理方法、 系统和设备， 该处理方法包括： 将所述前端组件代码编译打包， 所述包中不包括 公共依赖， 通用依赖通过框架层传入所述包内； 通过SDK形式将所述编译打包的前端组件代码及 框架代码包裹， 并以npm包形式提供第三方H5页 面使用。 本发 明相对于普通搭建平台而言解耦了 组件， 不仅使得组件高内聚低耦合， 更方便管理 了， 也能通过SDK的方式复用到其他任意页面中， 并且因为其灵活配置， 组件包可版本控制， 更新 时接入方无感等好处， 提高了组件可复用性， 节 省了很多人力成本， 避免了重复开发， 提供了多 方接入同一模块的对接方案 。 权利要求书2页 说明书5页 附图2页 CN 115357242 A 2022.11.18 CN 115357242 A 1.一种用于嵌入第三方H5页面的前端组件的处理方法， 其特征在于， 所述前端组件与 框架耦合， 所述处 理方法包括： 将所述前端组件代码编译打包， 所述包中不包括公共依赖， 通用依赖通过框架层传入 所述包内； 通过SDK形式将所述编译打包的前端组件代码及框架代码包裹， 并以npm包形式提供第 三方H5页面使用。 2.根据权利要求1所述的用于嵌入H5页面的前端组件的处理方法， 其特征在于， 所述将 所述前端组件代码编译打包， 所述包中不包括 公共依赖， 通用依赖通过框架层传 入包内， 包 括： 所述前端组件代码依赖webpack分别以umd包形式打包； 通过external设置 防止公共依赖打入包内， 并在所述前端组件运行时， 从外部获取所 述公共依赖对应的扩展依赖； 通过loader对所述前端组件代码编译打包。 3.根据权利要求1所述的用于嵌入H5页面的前端组件的处理方法， 其特征在于， 所述处 理方法还 包括： 所述前端组件代码编译打包后， 接入动态资源发布系统， 通过webapi服务动态获取组 件资源。 4.根据权利要求1所述的用于嵌入H5页面的前端组件的处理方法， 其特征在于， 所述以 npm包形式提供第三方H 5页面使用包括： 所述npm包通过SDK模块被引入所述第三方H5页面， 并带入所述前端组件 的场景号， 实 例化所述S DK模块； 所述第三方H 5页面的界面 通过渲染得到 。 5.一种用于嵌入第三方H5页面的前端组件的处理系统， 其特征在于， 包括打包模块和 嵌入模块： 所述打包模块用于将所述前端组件代码编译打包， 所述包中不包括公共依赖， 通用依 赖通过框架层 传入所述包内； 所述嵌入模块用于通过SDK形式将所述编译打包的前端组件代码及框架代码包裹， 并 以npm包形式提供第三方H 5页面使用。 6.根据权利要求5所述的用于嵌入第 三方H5页面的前端组件的处理系统， 其特征在于， 所述打包 模块具体用于： 所述前端组件代码依赖webpack分别以umd包形式打包； 通过external设置 防止公共依赖打入包内， 并在所述前端组件运行时， 从外部获取所 述公共依赖对应的扩展依赖； 通过loader对所述前端组件代码编译打包。 7.根据权利要求5所述的用于嵌入第 三方H5页面的前端组件的处理系统， 其特征在于， 所述打包模块还用于所述前端组件代码编译打包后， 接入动态资源发布系统， 通过webapi 服务动态获取组件资源。 8.根据权利要求5所述的用于嵌入第 三方H5页面的前端组件的处理系统， 其特征在于， 所述嵌入 模块具体用于：权　利　要　求　书 1/2 页 2 CN 115357242 A 2所述npm包通过SDK模块被引入所述第三方H5页面， 并带入所述前端组件 的场景号， 实 例化所述S DK模块； 所述第三方H 5页面的界面 通过渲染得到 。 9.一种电子设备， 包括存储器、 处理器及存储在存储器上并可在处理器上运行的计算 机程序， 其特征在于， 所述处理器执行计算机程序时实现如权利要求 1‑4中任一项 所述的用 于嵌入H5页面的前端组件的处 理方法。 10.一种计算机存储介质， 其上存储有计算机程序， 其特征在于， 所述计算机程序被处 理器执行时实现如权利要求1 ‑4中任一项所述的用于嵌入H 5页面的前端组件的处 理方法。权　利　要　求　书 2/2 页 3 CN 115357242 A 3