[发明专利]一种低代码设计器本地组件代码调试的方法

说明书

本发明涉及计算机技术领域，具体是一种低代码设计器本地组件代码调试的方法，本发明能够把运行时代码加载到本地执行，开发人员在本地即可看到插件效果，速度极快；在调试过程中监测本地代码修改并自动打包，打包结束会发送消息给运行时代码，调用其重绘接口，使其自动加载最新插件代码，修改本地插件代码视图自动更新，带来极为流畅的调试体验；因为所有代码在本地执行，有效避免对生产环境造成干扰，从而有效减轻了服务器压力。

技术领域

本发明涉及计算机技术领域，具体是一种低代码设计器本地组件代码调试的方法。

背景技术

当下随着国家数字化转型进程越来越深入，低代码开发平台在市场上纷纷涌现。低代码开发中的前端领域需求多变，难以通过预设配置开发出来，于是大多数平台会提供一种动态插件集成到现有平台的技术来实现复杂多变的前端需求。

现有技术中使用了一种在线调试方案，具体实现是在生产环境真实访问地址加上debug=1参数，该参数可以让代码加载本地固定端口固定路径的js文件执行。

具体架构如下所示：

1.本地开发服务器用于开发本地插件，生产环境为低代码平台。

2.当本地开发阶段点击调试时，会在浏览器打开低代码平台的访问地址并在后面加上debug=1标识，低代码平台发现该标识会使用script标签加载http://localhost:8080/path/plugin.js文件。并执行（具体架构如图1所示）。

该技术暴露了一个让生产环境执行本地代码的入口，该入口存在潜在的安全风险，网络攻击人员完全可能通过这个入口获取服务器的一些重要安全信息、攻击服务器程序、攻击数据库等等。

发明内容

本发明的目的在于提供一种低代码设计器本地组件代码调试的方法，以解决上述背景技术中提出的问题。

本发明的技术方案是：一种低代码设计器本地组件代码调试的方法，包括以下步骤：

S1、生产环境暴露运行时代码，并通过构建工具将代码打包成umd格式的包部署在服务器；

S2、插件调试服务器首先通过http接口获取构建包地址，然后使用包地址加载运行时代码包；

S3、执行运行时代码，获取本地插件注入；

S4、运行时构建包会发出http请求接口，该接口由本地调试服务器进行代理转发；

S5、修改本地插件代码后，插件开发服务器会自动构建，并调用运行时构建包的重绘接口来实现视图自动更新。

优选的，S1中的构建工具包括但不限于Webpack、Rollup、Vite。

优选的，S3具体包括：

S31、插件调试服务器使用NodeJs开启一个新的进程，该进程使用构建工具构建插件代码包；包文件存放于本地目录，通过插件调试服务器来访问；

S32、调试页面在本地执行生产环境暴露的运行时代码，从插件调试服务器加载本地插件，然后通过调用运行时代码暴露的API接口完成注入，注入后可查看本地插件运行效果。

优选的，S5具体包括：

S51、插件开发服务器在运行时使用NodeJs的文件API监听当前调试的插件目录，当开发人员在开发过程中修改本地插件代码后，会执行监听时注册的回调函数；

S52、构建完成后发送消息给插件调试服务器重新请求插件，并调用运行时代码的重绘API接口，该接口会卸载之前的插件，重新实例化新构建的插件来实现视图自动更新。

本发明通过改进在此提供一种低代码设计器本地组件代码调试的方法，与现有技术相比，具有如下改进及优点：