(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202211114592.0 (22)申请日 2022.09.14 (71)申请人 安徽长江工业大 数据科技股份公司 地址 244000 安徽省铜陵市经济开发区泰 山大道北段695号 (72)发明人 陈爱武　时佩境　 (74)专利代理 机构 滁州弘知润创知识产权代理 事务所(普通 合伙) 34222 专利代理师 林凡燕 (51)Int.Cl. G06F 8/65(2018.01) G06F 8/71(2018.01) G06F 9/445(2018.01) G06F 9/50(2006.01) (54)发明名称 一种通过node构建实时管理umi项目代码的 方法 (57)摘要 本发明属于web前端技术领域， 尤其为一种 通过node构建实时管理umi项目代码的方法， 首 先通过umi脚手架构建项目代码， 然后通过 create‑super脚本依赖初始化项 目文件服务器 所需环境， 在项目启动后通过umi ‑plugin‑super 插件启动文件服务器并将super ‑control导出的 组件添加到打包后的项目代码中， 在页面上通过 javascript事件触发super ‑control封装的 fetch请求与文件服务器通讯， umi热更新监听文 件改变后刷新页面， 从而完成通过node构建实时 管理umi项目代码的方法。 本发明通过文件服务 器作为中间价， 打通页面与源代码之间的断层， 在开发环境下， 通过在页面操作， 操作结果将直 接作用于源代码， 大大降低了页面调试复杂度， 提升开发效率。 权利要求书1页 说明书4页 附图4页 CN 115390879 A 2022.11.25 CN 115390879 A 1.一种通过n ode构建实时管理umi项目代码的方法， 其特 征在于， 包括如下步骤： S1、 通过umi脚 手架构建项目代码， 运行cre ate‑super脚本命令创建super.json文件服 务器配置文件， 拉取umi ‑plugin‑super、 super ‑control依赖； S2、 通过umi ‑plugin‑super在将文件服务器与项目主进程绑定， 读取配置文件， 项目运 行时开启子进程 运行文件服 务器， 同时引入super ‑control中Operate组件； S3、 文件服务器启用后通过node中fs工具扫描项目文件结构并读取项目package.json 获取配置信息， 将文件目录结果传递给主 进程super ‑control组件； S4、 页面通过super ‑control发送fetch请求至本地文件服务器通讯， 项目启动时， 回传 端口预防本地启动多个文件服 务器导致错乱， 文件服 务器与项目进程绑定、 端口绑定； S5、 文件服务器接收到修改数据及文件信息比对文件路径， 通过node:fs工具修改项目 文件中相关代码， 新建/删除 同理； S6、 umi热更新fast  refresh扫描到文件更改， 触发热刷新更新页面， 达到页面实时修 改代码， 同时代码热 更新页面， 从而形成设计闭环。 2.根据权利要求1所述的一种通过node构建实时管理umi项目代码的方法， 其特征在 于： 所述create ‑super脚本为开发者提供自由选择安装依赖项； 拉取umi ‑plugin‑super、 super‑control两个依 赖包； 通过node:child_p rocess开启子进 程执行super ‑control提供 的super  init初始化脚本命令； 在项目根目录下创建super.json配置文件； 在项目 package.json文件中scripts对象下添加super:super对象， 命令运行工具快捷执行node_ modules/.bin目录下的super脚本文件， 其中super脚本文件中导入了super  init初始化命 令和super  server文件服 务器启动命令 。 3.根据权利要求1所述的一种通过node构建实时管理umi项目代码的方法， 其特征在 于： 所述引入super ‑control中Operate组件的方法包括如下步骤： S21、 Operate组件用于修改项 目文件代码， 包含创建组件文件、 删除文件等功能， 还导 出了基于fetch封装的请求文件服务器的方法， 在项目启动后文件服务器端口采用闭包的 形式存放在其中； S22、 在umi ‑plugin‑super插件中启动 文件服务器后 会调用umi插件中ap i工具函数， 在 html文件的body节点下创建id为super的div节点， 并导入super ‑control中的Operate组 件， 通过ReactDOM.render方法将Operate挂载到super节点上， 并在此处通过prop s传入端 口。 4.根据权利要求1所述的一种通过node构建实时管理umi项目代码的方法， 其特征在 于： 所述super ‑control中提供super  init脚本命令用于初始化项目依赖环境， 提供super   server脚本命令用于启动文件服 务器。 5.根据权利要求1所述的一种通过node构建实时管理umi项目代码的方法， 其特征在 于： 所述super ‑control中导出提供连接文件服务器功能的沟通桥梁， 其中封装了 javascript中fet ch工具函数， 在umi ‑plugin‑super插件中引入该组件后， 实现在项目中调 用文件服 务器。权　利　要　求　书 1/1 页 2 CN 115390879 A 2一种通过node构建实时管理u mi项目代码的方 法 技术领域 [0001]本发明涉及web前端技术， 尤其是前端框架中针对u mi框架做 出更优的项目代码实 时管理、 在线管理， 使用node构建文件管理服务器， 通过fetch请求进行页面与文件服务器 通讯， 文件服 务器管理代码， 具体为 一种通过n ode构建实时管理umi项目代码的方法。 背景技术 [0002]随着前端技术的不断发展， 前端框架也是层出不穷， 其中涌现出了一些面向企业 级的开发框架， 如umi、 next.js等等， 这些企业级框架容纳了前端主流的开发技术， 即路由， 状态管理， 这些技 术不仅为开发者降低了开发效率， 还为前端技 术提供了更多的可能性。 [0003]但是这些技术都是尽可能的提高代码到页面之间的交互能力及 渲染速度， 并没有 打通页面到代码之间的桥梁， 在前端开发过程中， 页面微调是绕不开的工作， 页面开发完 成， 需要根据设计图进 行详细微调， 这对于开 发者来说是一个细致而 又繁琐的过程， 因为要 不断的在修改代码和预览页面之间来回切换， 如果有一项技术， 能够直接打通页面到代码 之间的联系， 让调试工作直接在页面上完成， 这将极大降低了页面微调工作， 提升开发效 率。 针对这个问题， 目前尚未有 有效的解决方案 。 发明内容 [0004](一)解决的技 术问题 [0005]针对现有技术的不足， 本发明提供了一种通过node构建实时管理umi项目代码的 方法， 通过文件服务器作为中间价， 打通页面无法与代码沟通的技术问题， 在前端项目中， 通过代码构建运行生成页面， 页面无法直接修改代码， 这在项目开发阶段时页面调试是低 效的， 如css样式修改， dom节点操作等， 都需要根据页面反复微调代码才能达到所需的效 果， 打通页面与源代码之间的断层， 在开发环境下， 通过在页面操作， 操作结果将直接作用 于源代码， 大 大降低了页面调试复杂度， 提升开发效率。 [0006](二)技术方案 [0007]本发明为了实现上述目的具体采用以下技 术方案： [0008]对应基于umi框架 下所构建的项目， 主要依赖u mi框架中插件机制和热更新两个特 性， 其次文件服务器核心功能基于node技术实现； 包含三个前端依赖库， 分别是： create ‑ super、 umi ‑plugin‑super、 super ‑control， 这三个依赖库对核心 功能进行封装。 [0009]首先通过umi脚手架构建项目代码， 然后通过create ‑super脚本依赖初始化项目 文件服务器所需环境， 在项目启动后通过umi ‑plugin‑super插件启动文件服务器并将 super‑control导出的组件添加到打包后的项目代码中， 在页面上通过jav ascript事件触 发super‑control封装的fetch请求与文件服务器通讯， umi热更新监听文件改变后刷新页 面， 从而完成通过n ode构建实时管理umi项目代码的方法。 [0010]一种通过n ode构建实时管理umi项目代码的方法， 包括如下步骤： [0011]S1、 通过umi脚手架构建项目代码， 运行create ‑super脚本命令创建super.json文说　明　书 1/4 页 3 CN 115390879 A 3