CN111857809A

CN111857809A - 一种前端开发文件更新方法、装置及电子设备

Info

Publication number: CN111857809A
Application number: CN202010753422.1A
Authority: CN
Inventors: 俞金成
Original assignee: Shanghai Miaoyi Biotechnology Co Ltd
Current assignee: Shanghai Miaoyi Biotechnology Co Ltd
Priority date: 2020-07-30
Filing date: 2020-07-30
Publication date: 2020-10-30
Anticipated expiration: 2040-07-30
Also published as: CN111857809B

Abstract

本发明公开一种前端开发文件更新方法、装置及电子设备，该方法包括：接收到用于指示更新前端开发文件的请求，其中，请求中携带有用于指示前端开发文件中所需更新的位置的标识；根据标识遍历前端开发文件的配置树，确定前端开发文件中对应的更新点；在更新点处更新前端开发文件。通过上述前端开发更新方法，可以根据位置标识、遍历配置树的方式自动的更新前端开发文件，无需人工手动一层一层的更新，解决了前端软件开发中期由于大量重复性更新配置及编码工作，造成人工成本和时间的浪费的问题，很好解放了前端开发编程劳动力，释放了大量工时资源。

Description

一种前端开发文件更新方法、装置及电子设备

技术领域

本发明涉及计算机领域，具体而言，涉及一种前端开发文件更新方法、装置及电子设备。

背景技术

在前端软件开发过程中，一个项目从启动到开发会出现许多重复工作，这些事情非常繁琐和耗时，影响着开发的效率，甚至影响工程质量。如，前期启动创建项目的工作包括：选定包管理工具，创建配置文件，添加项目基础依赖包；设计软件架构，创建一些基础目录文件；搭建本地开发环境，选择安装插件，编写打包程序等；测试预览项目调试代码，为生成发布版本。这些工作，每次项目启动都需要做，而这些工作中很多项目上是重复，因此，浪费了人工成本和时间。目前，对于VUE项目官方给出的脚手架@vue/cli，可以解决项目前期搭建的问题。

但项目开发中期阶段存在同样的问题，如，在使项目脚手架初始化创建项目之后，进入开发阶段，也会遇到重复的编码工作，比如更新高阶嵌套的页面，重复添加路由配置。但上述脚手架@vue/cli并不能解决该问题。

因此，前端软件开发中期由于大量重复性更新配置及编码工作，仍旧造成人工成本和时间的浪费的问题。

发明内容

针对相关技术中前端软件开发中期由于大量更新重复性配置及编码工作，造成人工成本和时间的浪费的问题，本发明提供了一种前端开发文件更新方法、装置及电子设备，以至少解决上述问题。

根据本发明的一个方面，提供了一种前端开发文件更新方法，应用于前端开发脚手架，包括：

接收到用于指示更新前端开发文件的请求，其中，请求中携带有用于指示前端开发文件中所需更新的位置的标识；

根据标识遍历前端开发文件的配置树，确定前端开发文件中对应的更新点；

在更新点处更新前端开发文件。

可选地，根据标识遍历前端开发文件的配置树，确定前端开发文件中对应的更新点包括：

在前端开发文件中查询标识对应的根元素；

在未查询到根元素的情况下，在前端开发文件中插入根元素对应的根配置对象，根据根配置对象确定更新点；

在查询到根元素的情况下，遍历根元素对应的配置树，确定更新点。

可选地，遍历根元素对应的配置树，确定更新点包括：

遍历配置树结束，未查询到标识对应的元素；

在前端开发文件中插入根元素对应的根配置对象，根据根配置对象确定更新点。

可选地，遍历根元素对应的配置树，确定更新点包括：

遍历配置树，查询标识对应的元素；

确定元素对应的预定字段指向的数组作为更新点。

可选地，根据根配置对象中确定更新点包括：

在根配置对象中查询预定字段；

在预定字段指向的数组中插入标识对应的元素；

确定元素对应的预定字段指向的数组作为更新点。

可选地，在更新点处更新前端开发文件包括：

获取请求中携带的更新参数；

在更新点插入更新参数。

根据本发明的另一个方面，提供了一种前端开发文件更新装置，包括：

接收模块，接收到用于指示更新前端开发文件的请求，其中，请求中携带有用于指示前端开发文件中所需更新的位置的标识；

确定模块，用于根据标识遍历前端开发文件的配置树，确定前端开发文件中对应的更新点；

更新模块，用于在更新点处更新前端开发文件。

根据本发明的又一个方面，提供了一种计算机可读存储介质，计算机可读存储介质存储有计算机指令，计算机指令用于使计算机执行上述任意一项的前端开发文件更新方法。

根据本发明的再一个方面，提供了一种电子设备，包括：至少一个处理器；以及与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的计算机程序，计算机程序被至少一个处理器执行，以使至少一个处理器执行上述任意一项的前端开发文件更新方法。

通过本发明，在需要更新前端开发文件时，根据前端开发文件中所需更新的位置的标识，遍历所述前端开发文件的配置树，确定所述前端开发文件中对应的更新点，进而在所述更新点处更新所述前端开发文件；通过上述前端开发更新方法，可以根据位置标识、遍历配置树的方式自动的更新前端开发文件，无需人工手动一层一层的更新，解决了前端软件开发中期由于大量重复性更新配置及编码工作，造成人工成本和时间的浪费的问题，很好解放了前端开发编程劳动力，释放了大量工时资源。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是根据本发明实施例的一种页面呈现结构示意图；

图2是根据本发明实施例的一种前端开发文件更新方法流程示意图；

图3是根据本发明实施例的一种前端开发文件更新装置的结构框图；

图4是根据本发明实施例的一种电子设备的结构框图。

具体实施方式

下文中将参考附图并结合实施例来详细说明本发明。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

在实际开发中，尤其是大型项目页面嵌套、组件分组的情况较为常见。嵌套页是一种内容层层包含的展示界面。组件分组则为便于管理，将一类组件或者同一业务概念的组件放置在同一目录下的管理方式。

一个嵌套页的创建包括页文件创建、页面工厂方法创建和路由配置添加三个部分。嵌套页面的物理文件表现，如下：

在company文件夹代表的”公司“页下面又有group文件夹代表”组织架构“部分。而这样的形式一般对于前端框架来讲，意味着”公司“页面中被分隔一块区域，用以呈现”组织架构“或者“企业文化”的内容。体现了一种树形数据结构。

嵌套页面的物理表现是树形结构，那么就有根，子树和结点等。页面树的根就是pages目录，其下的第一层文件夹和其包含的子文件夹代表一个子树。每一个文件夹及当前目录下“*.vue”(包含结构和样式)和“*.ts”(包含逻辑)文件,组成一个页面模块，为树的结点内容。拥有子树的结点的“*.vue”文件中，在适当的地方放置标签“<router-view></router-view>”，标记其子页面部分渲染位置。

页面模块工厂方法有实例化页面模块对象和切分代码的作用，它们被放在同一文件中有相同的代码格式。每个页面结点都会有一个页面工厂方法相对应。如下所示：

在Vue.js框架(读音/vju：/，类似于view)是一套用于构建用户界面的渐进式JavaScript框架)里，页面显示控制一般会使用vue-router(Vue.js官方的路由管理器)，它通过配置文件来添加新页面。配置中使用了上面的页面工厂方法。包含嵌套页的配置如下：

const routes:RouteConfig[]＝[

{

path:"/company",

name:"company",

component:PageFactory.companyPagePreloading,

children:[

{

path:"group",

name:"companyGroup",

component:PageFactory.companyGroupPagePreloading

},

{

path:"culture",

name:"companyCulture",

component:PageFactory.companyGroupPagePreloading

}

]

},

{path:"/home",component:PageFactory.homePagePreloading},

{path:"*",name:"home",component:PageFactory.homePagePreloading}

]；

它是一个子树的集合，和嵌套页物理文件的树形结构的子树部分完全契合。

页面的呈现结构如下如图1所示，展示的页面结构同物理文件与路由配置不同，为链式数据结构，一个子树的数据信息，同时只会展示一条子树根到叶子的信息链。

在编写代码前，需要创建一组文件夹和文件。按照嵌套页的要求，如果要创建“公司组织列表”(company/group/list)这样3层嵌套页，会先创建一个“公司”目录(company)及文件(company.vue、company.ts)，然后创建“组织信息”目录及文件，最后创建“列表”目录及文件，需要层层创建。这些重复性的工作费神费力。

重复性的工作还包括创建页面工厂函数和添加路由配置。每创建一个页面模块都要创建一个工厂函数。路由配置也是复杂的树形结构，需要层层创建。找到一种更新方法代替人工去做这些事，可以更大的提高工作效率。

本发明的一个实施例中，提供了一种前端开发文件更新方法，如图2所示，该方法包括：

S202，接收到用于指示更新前端开发文件的请求，其中，该请求中携带有用于指示前端开发文件中所需更新的位置的标识；

S204，根据标识遍历前端开发文件的配置树，确定前端开发文件中对应的更新点；

S206，在更新点处更新前端开发文件。

本发明的另一个实施例中，根据标识遍历前端开发文件的配置树，确定前端开发文件中对应的更新点包括：在前端开发文件中查询标识对应的根元素；在未查询到根元素的情况下，在前端开发文件中插入根元素对应的根配置对象，根据根配置对象确定更新点；在查询到根元素的情况下，遍历根元素对应的配置树，确定更新点。

具体地，当要插入嵌套页的配置时，首先，查找配置根，也就是根元素；使用一种遍历树形数据结构的方法遍历配置树，直到找到该根元素或遍历到最后一个结点。比如，要插入[“company”,“group”,“list”]的配置项，首先，要查找path值是“/company”的根元素；这里会有两种情况，找到该根元素和没有找到该根元素。

如果没有查找到该根元素，则在配置数组RouteConfigList中加入根配置对象。配置对象的内容根据参数关键字变化，比如company为：

{

path:"/company",

name:"company",

component:"PageFactory.companyPagePreloading",

children:[]

}

因为是根元素，path字段值以“/”开头。然后，根据插入的根元素确定更新点。

如果查找到了根元素，则继续遍历根元素对应的配置树，直到确定出更新点。

本发明的另一个实施例中，遍历根元素对应的配置树，确定更新点包括：遍历配置树结束，未查询到标识对应的元素；在前端开发文件中插入根元素对应的根配置对象，根据根配置对象确定更新点。

具体地，如果查找到根元素后，那么，取其children字段对应数组，循环上一过程，继续查询，是否有第二层，如果有继续找第三层，如果没有直至循环查找结束。进入循环插入配置项方法：取得除去根项的数组(比如[“group”,“list”])。然后在新建根配置项中找到children字段，将“group”插入到children字段所指向的数组里。然后将根配置项换成刚被插入的配置项，循环上一个过程，将“list”插入到“group”的children字段所指向的数组里。

本发明的另一个实施例中，遍历根元素对应的配置树，确定更新点包括：遍历配置树，查询标识对应的元素；确定元素对应的预定字段指向的数组作为更新点。

本发明的另一个实施例中，根据根配置对象中确定更新点包括：在根配置对象中查询预定字段；在预定字段指向的数组中插入标识对应的元素；确定元素对应的预定字段指向的数组作为更新点。

具体地，在未查找到对应的根元素，插入根元素后，进入循环插入剩余配置对象的过程，即，循环插入配置项的方法：取得除去根项的数组(比如[“group”,“list”])。然后在新建根配置项中找到children字段，将“group”插入到children字段所指向的数组里。然后将根配置项换成刚被插入的配置项，循环上一个过程，将“list”插入到“group”的children字段所指向的数组里。

本发明的另一个实施例中，在更新点处更新前端开发文件包括：获取请求中携带的更新参数；在更新点插入更新参数。

具体地，在更新请求中获取待替换的代码替换原配置代码。先使用JSON.stringify(arg)方法将修改后的配置数组转换为文本(RouteConfigListStr)。

恢复变量赋值代码RouteConfigListStr＝“const routes:RouteConfig[]＝”+RouteConfigListStr

使用正则替换原配置代码Replace(/const routes:RouteConfig\[]＝\[[^；]*/s,RouteConfigListStr)

读取完整的路由配置模块文件(index.router.ts)内容，使用工具prettier格式化路由配置文件中的代码，然后再写入回文件中。prettier如下：prettier.format(routeSource,options)，至此完成了嵌套页面的生成。

下面结合创建页面对上述方法进行详细论述，具体如下：。

1、创建嵌套页工具设计

1)字符界面

可以借用路由的路径形式来表达链式数据，“公司组织架构列表”可以表示为“company/group/list”，作为参数提供给脚手架使用时，命令行写法为“sgv build-pcompany/group/list”，执行该命令期望创建一个线性文件组织结构，一层包含一层；二生成工厂方法；三配置好层层包含的路由。多次执行不同的路由可以得到一棵树形文件组织结构和树形路由配置。

2)嵌套页生成具体功能及算法

A参数的处理

工具接受一个路由字符串(例如“company/group/list”)，字符串将被转换为字符数组([“company”,“group”,“list”])，其中的字符串将被作为页面的创建的关键字。

B循环算法

工具中对参数数组循环干三件事。一是在页面根目录(pages)下创建目录并进入目录(如果存在跳过进入下一个循环)，二是用关键字创建页面模块文件，三是生成工厂方法。

创建页面文件时，可以使用预定模板生成算法创建页面模块。但在创建“*.vue”文件时，增加是否是叶结点判断。如果有加入“<router-view></router-view>”标签，如下：

C生成页面模块工厂函数

当上述循环算法生成页面模块时，也调用此算法生成工厂方法到页面工厂模块中。

D路由插入算法

第一步，读取路由配置代码文本方法。如下，使用正则表达式取配置文本代码：/const routes:RouteConfig\[]＝\[[^；]*/s。

第二步，清理和整理代码文本。

使用正则移除注释文本Replace(/\s*\/\/.+$/m,“”)；将配置文本中“component”字段值为句柄的转换为字符串文本，使用如下正则替换：replace(/(\s*)component:\s{0,1}([^,]+)/g,'$1components:"$2"')；去除无关的代码，仅保留数组部分，replace(/constroutes:RouteConfig\[]＝[^\[]*/,"")；一般会得到的如下的结果：

[{

path:"/company",

name:"company",

component:"PageFactory.companyPagePreloading",

children:[

{

path:"group",

name:"companyGroup",

component:"PageFactory.companyGroupPagePreloading"

},

{

path:"culture",

name:"companyCulture",

component:"PageFactory.companyGroupPagePreloading"

}

]

},

{path:"/home",component:"PageFactory.homePagePreloading"},

{path:"*",name:"home",component:"PageFactory.homePagePreloading"}

]

第三步，用eval函数将字符串转换为数组对象。

第四步，安装路由配置规则，插入配置。

路由的配置一般是一个子树的集合(命名为RouteConfigList)，它是由特定对象也就是配置项组成，company配置项内容如下：

{

path:"/company",

name:"company",

component:"PageFactory.companyPagePreloading",

children:[]

}

一般路由的配置是和创建的页面模块相契合的。但也有特殊情况，比如会多一个包裹，用处是提供一个可更换的壳。如下：

[{

path:"",

name:"xframe",

component:xframe,

redirect:"/company",

children:[

{

path:"/company",

name:"company",

component:"PageFactory.companyPagePreloading",

children:[

]

},

]

}]

但不管怎样，子树根所对应的对象path值是以“/”开始，配置定义使然。通过这个特性，可以找到子树根，从根开始和页面文件结构契合。

循环查找配置根的方式可以如下：

当要插入嵌套页的配置时，首先查找配置根。使用一种遍历树形数据结构的方法遍历配置树，直到找到配置或遍历到最后一个结点。比如要插入[“company”,“group”,“list”]的配置项，首先要查找path值是“/company”的配置项。这里会有两种情况，找到和没有找到。

第一种情况

如果没有查到，则在配置数组RouteConfigList中加入根配置对象。配置对象的内容根据参数关键字变化，比如company为：

{

path:"/company",

name:"company",

component:"PageFactory.companyPagePreloading",

children:[]

}

因为是根元素，path字段值以“/”开头。然后，进入循环插入剩余配置对象的过程，即循环插入配置项的方法：取得除去根项的数组(比如[“group”,“list”])。然后在新建根配置项中找到children字段，将“group”插入到children字段所指向的数组里。然后将根配置项换成刚被插入的配置项，循环上一个过程，将“list”插入到“group”的children字段所指向的数组里。

第二种情况

如果查找到根，那么取其children字段对应数组，循环上一过程，继续查询，是否有第二层，如果有继续找第三层，如果没有循环查找结束。进入上述循环插入配置项方法。

第五步，替换原配置代码。

先使用JSON.stringify(arg)方法将修改后的配置数组转换为文本(RouteConfigListStr)。

恢复变量赋值代码RouteConfigListStr＝“const routes:RouteConfig[]＝”+RouteConfigListStr。

使用正则替换原配置代码Replace(/const routes:RouteConfig\[]＝\[[^；]*/s,RouteConfigListStr)。

读取完整的路由配置模块文件(index.router.ts)内容，使用工具prettier格式化路由配置文件中的代码，然后再写入回文件中。

prettier.format(routeSource,options)；

至此完成了嵌套页面的生成。

2、分组的组件创建工具设计

工具接收参数设计与嵌套页相同，用斜杠(“/”)分割字符串。可以支持多级目录。创建命令如下：sgvbuild-c company/news/hotNews

1)参数处理

同嵌套页参数处理一样，转换为字符数组([“company”,“news”,“hotNews”])。数组中元素最后一个对应是需创建的组件模块，其前面的元素对应目录。

2)循环创建目录算法

循环取数组关键字，到组件目录(components)下，按顺序层查找目录是否存在，如果不存在则创建目录。

3)创建组件

在组件目录(company/news/hotNews)下，使用模板创建组件文件(hotNews.vue，hotNews.ts)。创建结果如下：

本发明的一个实施例中，提供了一种前端开发文件更新装置，如图3所示，包括：

接收模块32，接收到用于指示更新前端开发文件的请求，其中，请求中携带有用于指示前端开发文件中所需更新的位置的标识；

确定模块34，用于根据标识遍历前端开发文件的配置树，确定前端开发文件中对应的更新点；

更新模块36，用于在更新点处更新前端开发文件。

本发明的另一个实施例中，确定模块34，还用于在前端开发文件中查询标识对应的根元素；在未查询到根元素的情况下，在前端开发文件中插入根元素对应的根配置对象，根据根配置对象确定更新点；在查询到根元素的情况下，遍历根元素对应的配置树，确定更新点。

本发明的另一个实施例中，确定模块34，还用于遍历配置树结束，未查询到标识对应的元素；在前端开发文件中插入根元素对应的根配置对象，根据根配置对象确定更新点。

本发明的另一个实施例中，确定模块34，还用于遍历配置树，查询标识对应的元素；确定元素对应的预定字段指向的数组作为更新点。

本发明的另一个实施例中，确定模块34，还用于在根配置对象中查询预定字段；在预定字段指向的数组中插入标识对应的元素；确定元素对应的预定字段指向的数组作为更新点。

本发明的另一个实施例中，更新模块36，还用于获取请求中携带的更新参数；在更新点插入更新参数。

本公开实施例提供了一种电子设备，如图4所示，该电子设备包括一个或多个处理器41以及存储器42，图4中以一个处理器43为例。

该控制器还可以包括：输入装置43和输出装置44。

处理器41、存储器42、输入装置43和输出装置44可以通过总线或者其他方式连接，图4中以通过总线连接为例。

处理器41可以为中央处理器(CentralProcessingUnit，CPU)。处理器41还可以为其他通用处理器、数字信号处理器(DigitalSignalProcessor，DSP)、专用集成电路(ApplicationSpecificIntegratedCircuit，ASIC)、现场可编程门阵列(Field-ProgrammableGateArray，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等芯片，或者上述各类芯片的组合。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

存储器42作为一种非暂态计算机可读存储介质，可用于存储非暂态软件程序、非暂态计算机可执行程序以及模块，如本公开实施例中的控制方法对应的程序指令/模块。处理器41通过运行存储在存储器42中的非暂态软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例的方法。

存储器42可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据服务器操作的处理装置的使用所创建的数据等。此外，存储器42可以包括高速随机存取存储器，还可以包括非暂态存储器，例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施例中，存储器42可选包括相对于处理器41远程设置的存储器，这些远程存储器可以通过网络连接至网络连接装置。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

输入装置43可接收输入的数字或字符信息，以及产生与服务器的处理装置的用户设置以及功能控制有关的键信号输入。输出装置44可包括显示屏等显示设备。

一个或者多个模块存储在存储器42中，当被一个或者多个处理器41执行时，执行如图1所示的方法。

本领域技术人员可以理解，实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各电机控制方法的实施例的流程。其中，存储介质可为磁碟、光盘、只读存储记忆体(Read-OnlyMemory，ROM)、随机存储记忆体(RandomAccessMemory，RAM)、快闪存储器(FlashMemory)、硬盘(HardDiskDrive，缩写：HDD)或固态硬盘(Solid-StateDrive，SSD)等；存储介质还可以包括上述种类的存储器的组合。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims

1.一种前端开发文件更新方法，应用于前端开发脚手架，其特征在于，包括：

接收到用于指示更新前端开发文件的请求，其中，所述请求中携带有用于指示所述前端开发文件中所需更新的位置的标识；

根据所述标识遍历所述前端开发文件的配置树，确定所述前端开发文件中对应的更新点；

在所述更新点处更新所述前端开发文件。

2.根据权利要求1所述方法，其特征在于，所述根据所述标识遍历所述前端开发文件的配置树，确定所述前端开发文件中对应的更新点包括：

在所述前端开发文件中查询所述标识对应的根元素；

在未查询到所述根元素的情况下，在所述前端开发文件中插入所述根元素对应的根配置对象，根据所述根配置对象确定所述更新点；

在查询到所述根元素的情况下，遍历所述根元素对应的配置树，确定所述更新点。

3.根据权利要求2所述方法，其特征在于，所述遍历所述根元素对应的配置树，确定所述更新点包括：

遍历所述配置树结束，未查询到所述标识对应的元素；

在所述前端开发文件中插入所述根元素对应的根配置对象，根据所述根配置对象确定所述更新点。

4.根据权利要求2所述方法，其特征在于，所述遍历所述根元素对应的配置树，确定所述更新点包括：

遍历所述配置树，查询所述标识对应的元素；

确定所述元素对应的预定字段指向的数组作为所述更新点。

5.根据权利要求2或3所述方法，其特征在于，所述根据所述根配置对象中确定所述更新点包括：

在所述根配置对象中查询预定字段；

在所述预定字段指向的数组中插入所述标识对应的元素；

确定所述元素对应的预定字段指向的数组作为所述更新点。

6.根据权利要求1至4中任一项所述方法，其特征在于，所述在所述更新点处更新所述前端开发文件包括：

获取所述请求中携带的更新参数；

在所述更新点插入所述更新参数。

7.根据权利要求5所述方法，其特征在于，所述在所述更新点处更新所述前端开发文件包括：

获取所述请求中携带的更新参数；

在所述更新点插入所述更新参数。

8.一种前端开发文件更新装置，其特征在于，包括：

接收模块，接收到用于指示更新前端开发文件的请求，其中，所述请求中携带有用于指示所述前端开发文件中所需更新的位置的标识；

确定模块，用于根据所述标识遍历所述前端开发文件的配置树，确定所述前端开发文件中对应的更新点；

更新模块，用于在所述更新点处更新所述前端开发文件。

9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使所述计算机执行权利要求1至7中任意一项所述的前端开发文件更新方法。

10.一种电子设备，其特征在于，包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器执行权利要求1至7中任意一项所述的前端开发文件更新方法。