用于嵌入H5页面的前端组件的处理方法、系统和设备技术方案

本发明专利技术公开了一种用于嵌入H5页面的前端组件的处理方法、系统和设备，该处理方法包括：将所述前端组件代码编译打包，所述包中不包括公共依赖，通用依赖通过框架层传入所述包内；通过SDK形式将所述编译打包的前端组件代码及框架代码包裹，并以npm包形式提供第三方H5页面使用。本发明专利技术相对于普通搭建平台而言解耦了组件，不仅使得组件高内聚低耦合，更方便管理了，也能通过SDK的方式复用到其他任意页面中，并且因为其灵活配置，组件包可版本控制，更新时接入方无感等好处，提高了组件可复用性，节省了很多人力成本，避免了重复开发，提供了多方接入同一模块的对接方案。方接入同一模块的对接方案。方接入同一模块的对接方案。

【技术实现步骤摘要】
用于嵌入H5页面的前端组件的处理方法、系统和设备


[0001]本专利技术涉及一种前端组件的处理方法，尤其是一种用于嵌入H5页面的前端组件的处理方法、系统、设备和介质。

技术介绍

[0002]现有的一般的页面搭建平台着重点在于组件在平台内搭建页面时的使用，大多方案是通过平台配置分发的组件属性结合组件实例进行渲染，局限于只能用在平台内的渲染引擎，但是对于更广泛规模的复用缺乏考虑，例如一个三方页面(框架无关)需要复用组件，并且需要复用平台的配置系统。
[0003]目前普遍的组件搭建平台SSR模式(Server Side Render服务端渲染)是项目代码包含组件所有代码，通过整体发布的方式更新改动。组件是代码耦合在平台的渲染引擎中，组件的关联关系也耦合在外层框架中。如此，组件无法谈及复用(嵌入)到其他页面。

技术实现思路

[0004]本专利技术要解决的技术问题是为了克服现有技术中组件代码耦合在平台中无法嵌入其他页面的缺陷，提供一种用于嵌入H5页面的前端组件的处理方法、系统、设备和介质。
[0005]本专利技术是通过下述技术方案来解决上述技术问题：
[0006]第一方面提供一种用于嵌入第三方H5页面的前端组件的处理方法，所述前端组件与框架耦合，所述处理方法包括：
[0007]将所述前端组件代码编译打包，所述包中不包括公共依赖，通用依赖通过框架层传入所述包内；
[0008]通过SDK(Software Development Kit软件开发工具包)形式将所述编译打包的前端组件代码及框架代码包裹，并以npm(Node Package Manager软件包管理工具)包形式提供第三方H5页面使用。
[0009]较佳地，所述将所述前端组件代码编译打包，所述包中不包括公共依赖，通用依赖通过框架层传入包内，包括：
[0010]所述前端组件代码依赖webpack分别以umd(Universal Module Definition通用模块标准)包形式打包；
[0011]通过external设置防止公共依赖打入包内，并在所述前端组件运行时，从外部获取所述公共依赖对应的扩展依赖；
[0012]通过loader对所述前端组件代码编译打包。
[0013]较佳地，所述处理方法还包括：
[0014]所述前端组件代码编译打包后，接入动态资源发布系统，通过webapi服务动态获取组件资源。
[0015]较佳地，所述以npm包形式提供第三方H5页面使用包括：
[0016]所述npm包通过SDK模块被引入所述第三方H5页面，并带入所述前端组件的场景
号，实例化所述SDK模块；
[0017]所述第三方H5页面的界面通过渲染得到。
[0018]第二方面提供一种用于嵌入第三方H5页面的前端组件的处理系统，包括打包模块和嵌入模块：
[0019]所述打包模块用于将所述前端组件代码编译打包，所述包中不包括公共依赖，通用依赖通过框架层传入所述包内；
[0020]所述嵌入模块用于通过SDK形式将所述编译打包的前端组件代码及框架代码包裹，并以npm包形式提供第三方H5页面使用。
[0021]较佳地，所述打包模块具体用于：
[0022]所述前端组件代码依赖webpack分别以umd包形式打包；
[0023]通过external设置防止公共依赖打入包内，并在所述前端组件运行时，从外部获取所述公共依赖对应的扩展依赖；
[0024]通过loader对所述前端组件代码编译打包。
[0025]较佳地，所述打包模块还用于所述前端组件代码编译打包后，接入动态资源发布系统，通过webapi服务动态获取组件资源。
[0026]较佳地，所述嵌入模块具体用于：
[0027]所述npm包通过SDK模块被引入所述第三方H5页面，并带入所述前端组件的场景号，实例化所述SDK模块；
[0028]所述第三方H5页面的界面通过渲染得到。
[0029]第三方面提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行计算机程序时实现如上述的用于嵌入H5页面的前端组件的处理方法。
[0030]第四方面提供一种计算机存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上述的用于嵌入H5页面的前端组件的处理方法。
[0031]本专利技术的积极进步效果在于：相对于普通搭建平台而言解耦了组件，不仅使得组件高内聚低耦合，更方便管理了，也能通过SDK的方式复用到其他任意页面中，并且因为其灵活配置，组件包可版本控制，更新时接入方无感等好处，提高了组件可复用性，节省了很多人力成本，避免了重复开发，提供了多方接入同一模块的对接方案。
附图说明
[0032]图1为本专利技术实施例1的用于嵌入第三方H5页面的前端组件的处理方法的流程图；
[0033]图2为本专利技术实施例2的用于嵌入第三方H5页面的前端组件的处理系统的模块示意图；
[0034]图3为本专利技术实施例3的电子设备的硬件结构示意图。
具体实施方式
[0035]下面通过实施例的方式进一步说明本专利技术，但并不因此将本专利技术限制在所述的实施例范围之中。
[0036]实施例1
[0037]本实施例提供一种用于嵌入第三方H5页面的前端组件的处理方法，如图1所示，所述前端组件与框架耦合，所述处理方法包括：
[0038]S101、将所述前端组件代码编译打包，所述包中不包括公共依赖，通用依赖通过框架层传入所述包内；
[0039]S201、通过SDK形式将所述编译打包的前端组件代码及框架代码包裹，并以npm包形式提供第三方H5页面使用。
[0040]作为一种可实现的方式，所述将所述前端组件代码编译打包，所述包中不包括公共依赖，通用依赖通过框架层传入包内，包括：
[0041]所述前端组件代码依赖webpack分别以umd包形式打包；
[0042]通过external设置防止公共依赖打入包内，并在所述前端组件运行时，从外部获取所述公共依赖对应的扩展依赖；
[0043]通过loader对所述前端组件代码编译打包。
[0044]具体的，首先进行前端组件的改造，通过前端组件代码依赖webpack分别以umd形式打包，并设置externals外部扩展，声明公共依赖不被打入保重，而前端组件的通用依赖则通过框架层传入前端组件使用，最后通过定制化webpack构建所用的loader，打包处前端组件代码。
[0045]前端组件代码还可接入动态资源发布系统，作为一种可实现的方式通过包括serveless和node端的webapi服务动态获取前端组件资源，用于按需加载服务动和客户端的前端组件版本管理。
[0046]最后的前端组件是通过SDK的形式将平台框架代码包裹，用于调用服务和分发数据，并发布到npm以npm包的形式提供给外部使用。
[004本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种用于嵌入第三方H5页面的前端组件的处理方法，其特征在于，所述前端组件与框架耦合，所述处理方法包括：将所述前端组件代码编译打包，所述包中不包括公共依赖，通用依赖通过框架层传入所述包内；通过SDK形式将所述编译打包的前端组件代码及框架代码包裹，并以npm包形式提供第三方H5页面使用。2.根据权利要求1所述的用于嵌入H5页面的前端组件的处理方法，其特征在于，所述将所述前端组件代码编译打包，所述包中不包括公共依赖，通用依赖通过框架层传入包内，包括：所述前端组件代码依赖webpack分别以umd包形式打包；通过external设置防止公共依赖打入包内，并在所述前端组件运行时，从外部获取所述公共依赖对应的扩展依赖；通过loader对所述前端组件代码编译打包。3.根据权利要求1所述的用于嵌入H5页面的前端组件的处理方法，其特征在于，所述处理方法还包括：所述前端组件代码编译打包后，接入动态资源发布系统，通过webapi服务动态获取组件资源。4.根据权利要求1所述的用于嵌入H5页面的前端组件的处理方法，其特征在于，所述以npm包形式提供第三方H5页面使用包括：所述npm包通过SDK模块被引入所述第三方H5页面，并带入所述前端组件的场景号，实例化所述SDK模块；所述第三方H5页面的界面通过渲染得到。5.一种用于嵌入第三方H5页面的前端组件的处理系统，其特征在于，包括打包模块和嵌入模块：所述打包模块用于将所述前端组件代码编译打包，所述包中不包括公共依赖，通用依赖通过框架层传入所述包内；...

【专利技术属性】
技术研发人员：孙罡，李超龙，周巍，
申请(专利权)人：携程旅游网络技术上海有限公司，
类型：发明
国别省市：