CN115390879B - 一种通过node构建实时管理umi项目代码的方法 - Google Patents
一种通过node构建实时管理umi项目代码的方法 Download PDFInfo
- Publication number
- CN115390879B CN115390879B CN202211114592.0A CN202211114592A CN115390879B CN 115390879 B CN115390879 B CN 115390879B CN 202211114592 A CN202211114592 A CN 202211114592A CN 115390879 B CN115390879 B CN 115390879B
- Authority
- CN
- China
- Prior art keywords
- super
- file
- project
- umi
- file server
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 47
- 230000008569 process Effects 0.000 claims description 22
- 230000004048 modification Effects 0.000 claims description 11
- 238000012986 modification Methods 0.000 claims description 11
- 238000010276 construction Methods 0.000 claims description 7
- 238000004891 communication Methods 0.000 claims description 6
- 230000008859 change Effects 0.000 claims description 4
- 238000013461 design Methods 0.000 claims description 4
- 230000001419 dependent effect Effects 0.000 claims description 3
- 238000005538 encapsulation Methods 0.000 claims description 2
- 238000009434 installation Methods 0.000 claims description 2
- 230000008676 import Effects 0.000 claims 1
- 238000011161 development Methods 0.000 abstract description 9
- 238000012544 monitoring process Methods 0.000 abstract description 2
- 230000001960 triggered effect Effects 0.000 abstract 1
- 238000010586 diagram Methods 0.000 description 6
- 238000005516 engineering process Methods 0.000 description 5
- 230000002457 bidirectional effect Effects 0.000 description 3
- 238000001514 detection method Methods 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 2
- 230000007246 mechanism Effects 0.000 description 2
- 230000008901 benefit Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000000977 initiatory effect Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
- G06F8/65—Updates
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/46—Multiprogramming arrangements
- G06F9/50—Allocation of resources, e.g. of the central processing unit [CPU]
- G06F9/5005—Allocation of resources, e.g. of the central processing unit [CPU] to service a request
- G06F9/5027—Allocation of resources, e.g. of the central processing unit [CPU] to service a request the resource being a machine, e.g. CPUs, Servers, Terminals
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Security & Cryptography (AREA)
- Stored Programmes (AREA)
Abstract
本发明属于web前端技术领域，尤其为一种通过node构建实时管理umi项目代码的方法，首先通过umi脚手架构建项目代码，然后通过create‑super脚本依赖初始化项目文件服务器所需环境，在项目启动后通过umi‑plugin‑super插件启动文件服务器并将super‑control导出的组件添加到打包后的项目代码中，在页面上通过javascript事件触发super‑control封装的fetch请求与文件服务器通讯，umi热更新监听文件改变后刷新页面，从而完成通过node构建实时管理umi项目代码的方法。本发明通过文件服务器作为中间价，打通页面与源代码之间的断层，在开发环境下，通过在页面操作，操作结果将直接作用于源代码，大大降低了页面调试复杂度，提升开发效率。
Description
技术领域
本发明涉及web前端技术，尤其是前端框架中针对umi框架做出更优的项目代码实时管理、在线管理，使用node构建文件管理服务器，通过fetch请求进行页面与文件服务器通讯，文件服务器管理代码，具体为一种通过node构建实时管理umi项目代码的方法。
背景技术
随着前端技术的不断发展，前端框架也是层出不穷，其中涌现出了一些面向企业级的开发框架，如umi、next.js等等，这些企业级框架容纳了前端主流的开发技术，即路由，状态管理，这些技术不仅为开发者降低了开发效率，还为前端技术提供了更多的可能性。
但是这些技术都是尽可能的提高代码到页面之间的交互能力及渲染速度，并没有打通页面到代码之间的桥梁，在前端开发过程中，页面微调是绕不开的工作，页面开发完成，需要根据设计图进行详细微调，这对于开发者来说是一个细致而又繁琐的过程，因为要不断的在修改代码和预览页面之间来回切换，如果有一项技术，能够直接打通页面到代码之间的联系，让调试工作直接在页面上完成，这将极大降低了页面微调工作，提升开发效率。针对这个问题，目前尚未有有效的解决方案。
发明内容
(一)解决的技术问题
针对现有技术的不足，本发明提供了一种通过node构建实时管理umi项目代码的方法，通过文件服务器作为中间价，打通页面无法与代码沟通的技术问题，在前端项目中，通过代码构建运行生成页面，页面无法直接修改代码，这在项目开发阶段时页面调试是低效的，如css样式修改，dom节点操作等，都需要根据页面反复微调代码才能达到所需的效果，打通页面与源代码之间的断层，在开发环境下，通过在页面操作，操作结果将直接作用于源代码，大大降低了页面调试复杂度，提升开发效率。
(二)技术方案
本发明为了实现上述目的具体采用以下技术方案：
对应基于umi框架下所构建的项目，主要依赖umi框架中插件机制和热更新两个特性，其次文件服务器核心功能基于node技术实现；包含三个前端依赖库，分别是：create-super、umi-plugin-super、super-control，这三个依赖库对核心功能进行封装。
首先通过umi脚手架构建项目代码，然后通过create-super脚本依赖初始化项目文件服务器所需环境，在项目启动后通过umi-plugin-super插件启动文件服务器并将super-control导出的组件添加到打包后的项目代码中，在页面上通过javascript事件触发super-control封装的fetch请求与文件服务器通讯，umi热更新监听文件改变后刷新页面，从而完成通过node构建实时管理umi项目代码的方法。
一种通过node构建实时管理umi项目代码的方法，包括如下步骤：
S1、通过umi脚手架构建项目代码，运行create-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扫描到文件更改，触发热刷新更新页面，达到页面实时修改代码，同时代码热更新页面，从而形成设计闭环。
(三)有益效果
与现有技术相比，本发明提供了一种通过node构建实时管理umi项目代码的方法，具备以下有益效果：
1、本发明，基于node构建文件服务器主要作用于umi构建的项目，其核心在于充分利用了umi提供的插件机制，在本发明下，页面通过http请求与文件服务器通讯达到修改代码的目的，解决了页面与代码直接无法通讯的问题。
2、本发明，通过项目启动时主进程开辟子进程方式，将文件服务器与项目进程绑定，文件服务器依托于项目主进程运行，进程共存的优势在于避免项目与文件服务器通讯断连或错连。同时也方便进程管理，避免进程遗留，浪费系统资源。
3、本发明，通过umi插件形式启动，在插件运行时进行端口检测和再分配，确保启动端口安全，并将端口通过启动命令行传递到文件服务器，通过super-control组件挂载props传递至项目中，从而形成端口的双向绑定，解决了同一台主机运行多个项目时文件服务器请求错乱的情况。
4、本发明，通过文件服务器通过node_modules依赖形式挂载到项目中，启动方式通过umi插件的形式完成，umi项目在启动时会自动运行插件，在插件上完成环境检测、端口双向传递、开启子进程启动文件服务器等，形成文件服务器与项目进程绑定、端口绑定的依附关系，在启动时更便捷的扫描当前项目的文件结构；启动流程简洁方便，开发者可以无感使用文件服务器，没有增加项目启动操作流程；更加安全可靠的启动进程。
附图说明
图1为本发明流程图；
图2为本发明技术原理示意图；
图3为本发明相关操作命令的示意图之一；
图4为本发明相关操作命令的示意图之二；
图5为本发明相关操作启动命令的示意图；
图6为本发明操作流向简易示意图；
图7为本发明相关操作实例示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
实施例
如图1-7所示，本发明一个实施例提出的：一种通过node构建实时管理umi项目代码的方法，包括如下步骤：
S1、通过umi脚手架构建项目代码，运行create-super脚本命令创建super.json文件服务器配置文件，拉取umi-plugin-super、super-control依赖；
其中，create-super脚本主要完成以下任务：
为开发者提供自由选择安装依赖项；
拉取umi-plugin-super、super-control两个依赖包；
通过node:child_process开启子进程执行super-control提供的super init初始化脚本命令；
在项目根目录下创建super.json配置文件；
在项目package.json文件中scripts对象下添加super:super对象，此处添加super对象主要是为了命令运行工具快捷执行node_modules/.bin目录下的super脚本文件，该super脚本文件中导入了super init初始化命令和super server文件服务器启动命令；
完成上述操作后create-super脚本执行完成关闭本次进程；
S2、通过umi-plugin-super在将文件服务器与项目主进程绑定，读取配置文件，项目运行时开启子进程运行文件服务器，同时引入super-control中Operate组件；
其中，引入super-control中Operate组件的方法如下：
Operate组件用于修改项目文件代码，包含创建组件文件、删除文件等功能，还导出了基于fetch封装的请求文件服务器的方法，在项目启动后文件服务器端口采用闭包的形式存放在其中，该设计主要是为了维护原有项目的完成性，不用为了文件服务器添加多余且与业务无关代码；
在umi-plugin-super插件中启动文件服务器后会调用umi插件中api工具函数，在html文件的body节点下创建id为super的div节点，并导入super-control中的Operate组件，通过ReactDOM.render方法将Operate挂载到super节点上，并在此处通过props传入端口，该设计主要是为了规避项目原有root节点，防止对项目原有节点影响、css重叠等问题，独立节点不仅保留了项目节点的完整性，也使Operate组件在开发中不用考虑冲突因素；
当本地项目启动多个时，存在两个问题：1、端口占用情况，2、请求端口错乱情况；如a项目请求到b项目的文件服务器上，这可能导致原有代码丢失；通过umi插件形式启动，在插件运行时进行端口检测和再分配，确保启动端口安全，并将端口通过启动命令行传递到文件服务器，通过super-control组件挂载props传递至项目中，从而形成端口的双向绑定，避免了同一台主机运行多个项目是文件服务器请求错乱的情况；
S3、文件服务器启用后通过node中fs工具扫描项目文件结构并读取项目package.json获取配置信息，将文件目录结果传递给主进程super-control组件；
其中，super-control中提供super init脚本命令用于初始化项目依赖环境，提供super server脚本命令用于启动文件服务器；
super-control中导出提供连接文件服务器功能的沟通桥梁，其中封装了javascript中fetch工具函数，fetch作为沟通文件服务器的纽带，在umi-plugin-super插件中引入该组件后，可以在项目中调用文件服务器；
S4、页面通过super-control发送fetch请求至本地文件服务器通讯，项目启动时，回传端口预防本地启动多个文件服务器导致错乱，文件服务器与项目进程绑定、端口绑定；
S5、文件服务器接收到修改数据及文件信息比对文件路径，通过node:fs工具修改项目文件中相关代码，新建/删除同理；
S6、umi热更新fast refresh扫描到文件更改，触发热刷新更新页面，达到页面实时修改代码，同时代码热更新页面，从而形成设计闭环。
最后应说明的是：以上所述仅为本发明的优选实施例而已，并不用于限制本发明，尽管参照前述实施例对本发明进行了详细的说明，对于本领域的技术人员来说，其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
Claims (2)
1.一种通过node构建实时管理umi项目代码的方法，其特征在于，包括如下步骤：
S1、通过umi脚手架构建项目代码，运行create-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扫描到文件更改，触发热刷新更新页面，达到页面实时修改代码，同时代码热更新页面，从而形成设计闭环；
所述create-super脚本为开发者提供自由选择安装依赖项；拉取umi-plugin-super、super-control两个依赖包；通过node:child_process开启子进程执行super-control提供的super init初始化脚本命令；在项目根目录下创建super.json配置文件；在项目package.json文件中scripts对象下添加super:super对象，命令运行工具快捷执行node_modules/.bin目录下的super脚本文件，其中super脚本文件中导入了super init初始化命令和super server文件服务器启动命令；
所述引入super-control中Operate组件的方法包括如下步骤：
S21、Operate组件用于修改项目文件代码，包含创建组件文件、删除文件等功能，还导出了基于fetch封装的请求文件服务器的方法，在项目启动后文件服务器端口采用闭包的形式存放在其中；
S22、在umi-plugin-super插件中启动文件服务器后会调用umi插件中api工具函数，在html文件的body节点下创建id为super的div节点，并导入super-control中的Operate组件，通过ReactDOM.render方法将Operate挂载到super节点上，并在此处通过props传入端口；
所述super-control中导出提供连接文件服务器功能的沟通桥梁，其中封装了javascript中fetch工具函数，在umi-plugin-super插件中引入该组件后，实现在项目中调用文件服务器。
2.根据权利要求1所述的一种通过node构建实时管理umi项目代码的方法，其特征在于：所述super-control中提供super init脚本命令用于初始化项目依赖环境，提供superserver脚本命令用于启动文件服务器。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211114592.0A CN115390879B (zh) | 2022-09-14 | 2022-09-14 | 一种通过node构建实时管理umi项目代码的方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211114592.0A CN115390879B (zh) | 2022-09-14 | 2022-09-14 | 一种通过node构建实时管理umi项目代码的方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN115390879A CN115390879A (zh) | 2022-11-25 |
| CN115390879B true CN115390879B (zh) | 2023-12-22 |
Family
ID=84125937
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211114592.0A Active CN115390879B (zh) | 2022-09-14 | 2022-09-14 | 一种通过node构建实时管理umi项目代码的方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115390879B (zh) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101610558A (zh) * | 2008-06-16 | 2009-12-23 | 鸿富锦精密工业（深圳）有限公司 | 移动终端设备及其漫游方法 |
| TW201001942A (en) * | 2008-06-27 | 2010-01-01 | Hon Hai Prec Ind Co Ltd | Mobile terminal device and roaming method thereof |
| CN110647348A (zh) * | 2019-09-20 | 2020-01-03 | 浪潮思科网络科技有限公司 | 一种解决因版本差异化导致代码难以维护的方法及系统 |
| CN112799716A (zh) * | 2021-02-09 | 2021-05-14 | 广州锦行网络科技有限公司 | 一种代码管理方法及系统 |
| CN113050941A (zh) * | 2021-03-25 | 2021-06-29 | 未鲲(上海)科技服务有限公司 | 前端页面生成方法、装置、设备及计算机可读存储介质 |
| CN113721912A (zh) * | 2021-08-31 | 2021-11-30 | 浩鲸云计算科技股份有限公司 | 基于umi的微前端框架的动态分包和合包方法 |
-
2022
- 2022-09-14 CN CN202211114592.0A patent/CN115390879B/zh active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101610558A (zh) * | 2008-06-16 | 2009-12-23 | 鸿富锦精密工业（深圳）有限公司 | 移动终端设备及其漫游方法 |
| TW201001942A (en) * | 2008-06-27 | 2010-01-01 | Hon Hai Prec Ind Co Ltd | Mobile terminal device and roaming method thereof |
| CN110647348A (zh) * | 2019-09-20 | 2020-01-03 | 浪潮思科网络科技有限公司 | 一种解决因版本差异化导致代码难以维护的方法及系统 |
| CN112799716A (zh) * | 2021-02-09 | 2021-05-14 | 广州锦行网络科技有限公司 | 一种代码管理方法及系统 |
| CN113050941A (zh) * | 2021-03-25 | 2021-06-29 | 未鲲(上海)科技服务有限公司 | 前端页面生成方法、装置、设备及计算机可读存储介质 |
| CN113721912A (zh) * | 2021-08-31 | 2021-11-30 | 浩鲸云计算科技股份有限公司 | 基于umi的微前端框架的动态分包和合包方法 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN115390879A (zh) | 2022-11-25 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US7779043B2 (en) | Extensible mechanism for object composition | |
| Hennessy et al. | Typed behavioural equivalences for processes in the presence of subtyping | |
| US20080163266A1 (en) | Mechanism for transparently interfacing with a third party version control system | |
| CN108536431A (zh) | 一种全局命令行创建前端项目方法及系统 | |
| US20130159976A1 (en) | Abstract syntax tree transformation | |
| CN110213105A (zh) | 一种跨平台微应用创建方法 | |
| Kraemer et al. | Aligning UML 2.0 state machines and temporal logic for the efficient execution of services | |
| CN104423932B (zh) | Javascript中调用二进制组件的方法 | |
| JP2521652B2 (ja) | 標準プロトコルを用いるアプリケ―ション管理方法 | |
| CN114756357A (zh) | 一种基于jvm的非阻塞分布式计划任务调度方法 | |
| CN115390879B (zh) | 一种通过node构建实时管理umi项目代码的方法 | |
| Osman et al. | An approach to rollback recovery of collaborating mobile agents | |
| Krichen et al. | Towards a runtime testing framework for dynamically adaptable internet of things networks in smart cities | |
| Beringer et al. | A language and system for composing autonomous, heterogeneous and distributed megamodules | |
| Barros et al. | Parameterized models for distributed java objects | |
| Petriu et al. | Deriving software performance models from architectural patterns by graph transformations | |
| Agha et al. | Actors: a model for reasoning about open distributed systems | |
| Mostinckx et al. | Mirages: Behavioral intercession in a mirror-based architecture | |
| Braga et al. | Towards a rewriting semantics for a software architecture description language | |
| Dumez et al. | Formal specification and verification of service composition using LOTOS | |
| Chen et al. | A formal model for supporting frameworks of dynamic service update based on OSGi | |
| Taylor et al. | Choreography-based analysis of distributed message passing programs | |
| Tonella et al. | Dynamic model extraction and statistical analysis of Web applications: Follow-up after 6 years | |
| Merz et al. | Chrome’s Concrete Architecture-Derived by uBlock Origin | |
| Fukuda et al. | MESSENGERS User's Manual |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |