CN113721907A - 前端开发方法、装置、设备及存储介质 - Google Patents

Abstract

本申请适用于前端开发及人工智能技术领域，提供前端开发方法，包括：当接收到初始化命令时，显示所述初始化命令对应的工程模板列表，以供开发人员进行选择；若检测到基于所述工程模板列表触发的选择指令，则确定所述选择指令对应的目标工程模板；拉取所述目标工程模板对应的配置清单，并按照所述配置清单，构建工程目录，以生成模板工程；接收基于所述模板工程输入的代码，并在检测到代码提交指令时，执行代码检查钩子，以确定所述代码是否规范；若所述代码规范且接收到打包命令，则调用代码打包工具对所述代码进行打包，并将打包后的所述代码放到工程目录中。极大地节约开发者的时间和精力，从而提高工作效率，提升工作质量。

Description

前端开发方法、装置、设备及存储介质

技术领域

本申请属于人工智能技术领域，尤其涉及一种前端开发方法、装置、设备及存储介质。

背景技术

随着时代发展，前端技术飞速迭代和进化，目前的前端开发早已不像以前单纯靠jQuery+Bootstrap实现一切，而是随着应用场景的不同，演变出了多元化的开发框架和工具，于是前端工作流程也变得日益复杂。

然而不管怎么变，前端开发人员接手一个项目开始开发工作时，都需要考虑选择合适的技术框架、组件库、样式库、JS工具库、构建工具等，然后再用这些工具搭建起来开发环境，做完这些工作之后才可以开始具体业务需求的开发，之后还需要手动部署。可见，每位开发者在新建项目时都会重复一部分相同的工作流程，使得开发人员在此类重复工作上需要耗费较多的时间。

发明内容

鉴于以上内容，本发明提供一种前端开发方法、装置、设备及存储介质，其目的在于解决现有技术中在新建项目时都会重复一部分相同的工作流程，使得开发人员在此类重复工作上需要耗费较多的时间的技术问题。

为实现上述目的，本发明提供一种前端开发方法，该方法包括：

当接收到初始化命令时，显示所述初始化命令对应的工程模板列表，以供开发人员进行选择；

若检测到基于所述工程模板列表触发的选择指令，则确定所述选择指令对应的目标工程模板；

拉取所述目标工程模板对应的配置清单，并按照所述配置清单，构建工程目录，以生成模板工程；

接收基于所述模板工程输入的代码，并在检测到代码提交指令时，执行代码检查钩子，以确定所述代码是否规范；

若所述代码规范且接收到打包命令，则调用代码打包工具对所述代码进行打包，并将打包后的所述代码放到工程目录中。

优选的，所述接收基于所述模板工程输入的代码，并在检测到代码提交指令时，执行代码检查钩子，以确定所述代码是否规范，包括：

若所述代码不规范，则显示错误代码的提示信息，以提示开发人员重新修改提交。

优选的，所述若所述代码规范且接收到打包命令，则调用代码打包工具对所述代码进行打包，包括：

确定对应浏览器的识别类型，将所述代码转换成所述识别类型对应的目标代码；

确定所述目标代码中的目标变量名，并将所述目标变量名替换成预设字符串；

对替换后的目标代码进行压缩打包。

优选的，所述将打包后的所述代码放到工程目录中，包括：

确定所述代码的功能属性，并基于所述功能属性，确定打包后的所述代码在工程目录中的路径；

将打包后的所述代码放到所述路径中。

优选的，所述前端开发方法，还包括：

若接收到部署命令，则调用代码部署工具，将打包好的代码按照预设的发布流程部署到指定服务器中，并反馈部署后的项目地址。

优选的，所述若接收到部署命令，则调用代码部署工具，将打包好的代码按照预设的发布流程部署到指定服务器中，并反馈部署后的项目地址，包括：

复制所述打包好的代码，并确定所述打包好的代码在所述指定服务器的路径地址，基于所述路径地址，将所述打包好的代码发布到所述指定服务器，以将所述打包好的代码放到所述指定服务器中所述路径地址对应的文件夹中；

接收所述指定服务器基于所述文件夹返回的项目地址，并反馈所述项目地址。

优选的，所述方法还包括：

若接收到校验命令，则调用预设浏览器，并基于所述预设浏览器，打开所述项目地址，以显示所述项目地址对应的目标页面，以供开发人员校验。

为实现上述目的，本发明还提供一种前端开发装置，所述装置包括：

接收模块，用于当接收到初始化命令时，显示所述初始化命令对应的工程模板列表，以供开发人员进行选择；

检测模块，用于若检测到基于所述工程模板列表触发的选择指令，则确定所述选择指令对应的目标工程模板；

生成模块，用于拉取所述目标工程模板对应的配置清单，并按照所述配置清单，构建工程目录，以生成模板工程；

执行模块，用于接收基于所述模板工程输入的代码，并在检测到代码提交指令时，执行代码检查钩子，以确定所述代码是否规范；

打包模块，用于若所述代码规范且接收到打包命令，则调用代码打包工具对所述代码进行打包，并将打包后的所述代码放到工程目录中。

为实现上述目的，本发明还提供一种电子设备，所述电子设备包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的程序，所述程序被所述至少一个处理器执行，以使所述至少一个处理器能够执行所述前端开发方法。

为实现上述目的，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质存储有前端开发程序，所述前端开发程序被处理器执行时，实现所述前端开发方法的步骤。

本发明提出的前端开发方法、装置、设备及存储介质，该方法可选应用于前端开发系统，以下简称开发系统，开发系统包括开发终端和开发工具，其中，开发工具安装于开发终端中，开发人员可通过开发终端，在开发工具预置初始化命令以及脚本等，极大地节约开发者的时间和精力，从而使得开发者能够把精力聚焦于业务功能的开发，从而提高工作效率，提升工作质量，最终达到削减企业人力成本，提升企业利润的效果。

附图说明

为了更清楚地说明本申请的实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明电子设备较佳实施例的示意图；

图2为图1中前端开发装置较佳实施例的模块示意图；

图3为本发明前端开发方法较佳实施例的流程图；

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用于解释本发明，并不用于限定本发明。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

参照图1所示，为本发明电子设备1较佳实施例的示意图。

该电子设备1包括但不限于：存储器11、处理器12、显示器13及网络接口14。所述电子设备1通过网络接口14连接网络，获取原始数据。其中，所述网络可以是企业内部网(Intranet)、互联网(Internet)、全球移动通讯系统(Global System ofMobilecommunication，GSM)、宽带码分多址(Wideband Code Division Multiple Access，WCDMA)、4G网络、5G网络、蓝牙(Bluetooth)、Wi-Fi通话网络等无线或有线网络。

其中，存储器11至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器11可以是所述电子设备1的内部存储单元，例如该电子设备1的硬盘或内存。在另一些实施例中，所述存储器11也可以是所述电子设备1的外部存储设备，例如该电子设备1配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。当然，所述存储器11还可以既包括所述电子设备1的内部存储单元也包括其外部存储设备。本实施例中，存储器11通常用于存储安装于所述电子设备1的操作系统和各类应用软件，例如前端开发程序10的程序代码等。此外，存储器11还可以用于暂时地存储已经输出或者将要输出的各类数据。

处理器12在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器12通常用于控制所述电子设备1的总体操作，例如执行数据交互或者通信相关的控制和处理等。本实施例中，所述处理器12用于运行所述存储器11中存储的程序代码或者处理数据，例如运行前端开发程序10的程序代码等。

显示器13可以称为显示屏或显示单元。在一些实施例中显示器13可以是LED显示器、液晶显示器、触控式液晶显示器以及有机发光二极管(Organic Light-EmittingDiode，OLED)触摸器等。显示器13用于显示在电子设备1中处理的信息以及用于显示可视化的工作界面，例如显示数据统计的结果。

网络接口14可选地可以包括标准的有线接口、无线接口(如WI-FI接口)，该网络接口14通常用于在所述电子设备1与其它电子设备之间建立通信连接。

图1仅示出了具有组件11-14以及前端开发程序10的电子设备1，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。

可选地，所述电子设备1还可以包括目标用户接口，目标用户接口可以包括显示器(Display)、输入单元比如键盘(Keyboard)，可选的目标用户接口还可以包括标准的有线接口、无线接口。可选地，在一些实施例中，显示器可以是LED显示器、液晶显示器、触控式液晶显示器以及有机发光二极管(Organic Light-Emitting Diode，OLED)触摸器等。其中，显示器也可以适当的称为显示屏或显示单元，用于显示在电子设备1中处理的信息以及用于显示可视化的目标用户界面。

该电子设备1还可以包括射频(Radio Frequency，RF)电路、传感器和音频电路等等，在此不再赘述。

在上述实施例中，处理器12执行存储器11中存储的前端开发程序10时可以实现如下步骤：

当接收到初始化命令时，显示所述初始化命令对应的工程模板列表，以供开发人员进行选择；

若检测到基于所述工程模板列表触发的选择指令，则确定所述选择指令对应的目标工程模板；

拉取所述目标工程模板对应的配置清单，并按照所述配置清单，构建工程目录，以生成模板工程；

接收基于所述模板工程输入的代码，并在检测到代码提交指令时，执行代码检查钩子，以确定所述代码是否规范；

若所述代码规范且接收到打包命令，则调用代码打包工具对所述代码进行打包，并将打包后的所述代码放到工程目录中。

关于上述步骤的详细介绍，请参照下述图2关于前端开发装置100实施例的功能模块图以及图3关于前端开发方法实施例的流程图的说明。

参照图2所示，为本发明前端开发装置100的功能模块图。

本发明所述前端开发装置100可以安装于电子设备中。根据实现的功能，所述前端开发装置100可以包括接收模块110、检测模块120、生成模块130、执行模块140及打包模块150。本发明所述模块也可以称之为单元，是指一种能够被电子设备处理器所执行，并且能够完成固定功能的一系列计算机程序段，其存储在电子设备的存储器中。

在本实施例中，关于各模块/单元的功能如下：

接收模块110，用于当接收到初始化命令时，显示所述初始化命令对应的工程模板列表，以供开发人员进行选择。

本实施例中，开发人员在进行前端开发的过程中，首先在开发终端，如电脑等终端，打开开发工具，从而触发初始化命令，此时的开发系统在检测到初始化命令后，显示对应的工程模板列表，以供开发人员根据实际情况进行选择，工程模板列表中包含至少一个工程模板，其中，工程模板指的是为固定开发某一类项目而将该某类项目的技术框架、组件库、样式库、JS工具库、构建工具等予以固定化、标准化。

也即，每一个项目都对应有至少一个工程模板，因此，开发人员可根据自身要开发的目标项目的项目特点，选择相应的工程模板，如目标项目是一个H5项目，则应当选择H5工程模板，如目标项目是一个小程序，则应当选择小程序模板等。

检测模块120，用于若检测到基于所述工程模板列表触发的选择指令，则确定所述选择指令对应的目标工程模板。

本实施例中，在开发系统显示了工程模板列表之后，开发人员可通过移动鼠标等方式，在工程模板列表中选择自己想要的工程模板，具体可在鼠标光标移动到某一位置时，通过点击鼠标，触发选择指令，开发系统若检测到该选择指令，则确定该选择指令的触发位置，并根据触发位置，确定选择指令对应的目标工程模板，也即开发人员想要的工程模板。

在其他实施方式中，目标工程模板的确定还可以是开发人员在开发工具对应的开发界面中输入目标项目的描述信息，开发系统从而根据描述信息，自动为目标项目匹配合适的目标工程模板等。

生成模块130，用于拉取所述目标工程模板对应的配置清单，并按照所述配置清单，构建工程目录，以生成模板工程。

本实施例中，在开发系统中，每一个工程模板都有对应的配置清单，开发系统在确定了当前开发人员想要的目标工程模板之后，即可拉取该目标工程模板的配置清单，从而根据配置清单中的配置项，构建工程目录，最终生成初始化的模板工程，其中，模板工程中包含预先配置好的技术框架、组件库、样式库、JS工具库、构建工具等。

也即，配置清单是一个列表，而工程目录是一个文件夹体系，开发系统会按照配置清单执行创建文件夹，拷贝配置项对应的模板工程文件到对应文件夹等，从而生成和所选模板一样的文件夹层级和各层级下的文件内容，即可得到模板工程。

执行模块140，用于接收基于所述模板工程输入的代码，并在检测到代码提交指令时，执行代码检查钩子，以确定所述代码是否规范。

本实施例中，在生成模板工程之后，开发人员即可使用模板工程进行业务功能的开发，具体在模板工程中键入相应的代码，并在键入完成之后，点击提交，从而触发代码提交指令，开发系统在检测到该代码提交指令时，对开发人员提交的代码进行规范检查，确定代码是否符合代码规范，其中代码规范为预先设置的，确保代码能够正确执行的要求。

在一个实施例中，所述接收基于所述模板工程输入的代码，并在检测到代码提交指令时，执行代码检查钩子，以确定所述代码是否规范，包括：

若所述代码不规范，则显示错误代码的提示信息，以提示开发人员重新修改提交。

打包模块150，用于若所述代码规范且接收到打包命令，则调用代码打包工具对所述代码进行打包，并将打包后的所述代码放到工程目录中。

本实施例中，在校验代码规范后，输出提交成功的提交信息，以告知开发人员当前代码符合代码规范，此时，开发人员即可对代码进行打包，开发系统在接收到开发人员输入的打包命令时，调用代码打包工具对代码进行打包，并将打包后的代码放到工程目录中。

在一个实施例中，所述若所述代码规范且接收到打包命令，则调用代码打包工具对所述代码进行打包，包括：

确定对应浏览器的识别类型，将所述代码转换成所述识别类型对应的目标代码；

确定所述目标代码中的目标变量名，并将所述目标变量名替换成预设字符串；

对替换后的目标代码进行压缩打包。

本实施例中，也即，为了使得开发时写的代码能被对应的浏览器识别，首先需要确定浏览器的识别类型，也即浏览器支持识别哪种代码类型，再将代码转换成识别类型对应的目标代码，也即浏览器支持识别的类型代码，即为目标代码。

接着，确定目标代码中的目标变量名，其中，目标变量名为有语义的变量名，在具体实施时，可根据开发人员定义目标变量名，然后，将目标变量名替换成预设字符串，在具体实施时，预设字符串为无意义的字符串，从而提高代码的安全性。

最后，对替换后的目标代码进行压缩打包，压缩后代码体积变小，体积小了性能更好。

在一个实施例中，所述将打包后的所述代码放到工程目录中，包括：

确定所述代码的功能属性，并基于所述功能属性，确定打包后的所述代码在工程目录中的路径；

将打包后的所述代码放到所述路径中。

本实施例中，也即，先通过确定代码的功能属性，确定代码是执行什么功能，再根据功能属性，确定代码在工程目录中的路径，也即，每一种功能属性在工程目录中的位置不同。

在具体实施时，可根据代码所在的模板工程的位置，确定代码的功能属性，也即，在模板工程中，每一区域位置输入的代码所能实现的功能不一致，因此，可根据代码所在模板工程的位置来确定代码的功能属性；或者，将代码输入预设模拟器中，以通过预设模拟器执行代码，从而得到执行结果，根据执行结果确定代码的功能属性，也即，开发系统中还集成预设模拟器，用以模拟执行开发人员输入的代码，从而得到模拟的执行结果，最后根据执行结果确定代码的功能属性等。

在一个实施例中，还包括：

若接收到部署命令，则调用代码部署工具，将打包好的代码按照预设的发布流程部署到指定服务器中，并反馈部署后的项目地址。

在具体实施时，代码打包完成后，开发人员执行开发工具预置的部署命令，开发系统在接收到该部署命令后，即调用代码部署工具，将打包好的代码按照预设的发布流程，部署到指定服务器中，并反馈部署后的项目地址。

在一个实施例中，所述若接收到部署命令，则调用代码部署工具，将打包好的代码按照预设的发布流程部署到指定服务器中，并反馈部署后的项目地址，包括：

复制所述打包好的代码，并确定所述打包好的代码在所述指定服务器的路径地址，基于所述路径地址，将所述打包好的代码发布到所述指定服务器，以将所述打包好的代码放到所述指定服务器中所述路径地址对应的文件夹中；

接收所述指定服务器基于所述文件夹返回的项目地址，并反馈所述项目地址。

具体的，复制打包好的代码，并确定该代码在指定服务器的路径地址，基于该路径地址，将打包好的代码发布到指定服务器，以将代码放到指定服务器中该路径地址对应的文件夹中。

接收指定服务器基于该文件夹返回的项目地址，并将该项目地址反馈到开发系统的显示界面，以便开发人员知晓。

也即，在部署过程中，开发系统先复制一遍开发人员的代码，并确定代码在指定服务器的路径地址，具体可根据工程目录确定，如与工程目录一致的路径等，然后将代码部署到指定服务器的相应位置，最后返回部署后的项目地址，如，指定服务器地址是baidu.com，在将打包好的代码部署到指定服务器的a文件夹中下，即可返回baidu.com/a的项目地址。

在一个实施例中，还包括：

若接收到校验命令，则调用预设浏览器，并基于所述预设浏览器，打开所述项目地址，以显示所述项目地址对应的目标页面，以供开发人员校验。

具体的，代码部署完成后，开发人员执行开发工具预置的校验命令，开发系统在接收到该校验命令后，即调用开发系统默认的浏览器，并以浏览器打开部署后的项目地址，从而得到目标页面，开发人员可在该目标页面上检查部署是否成功，以及测试开发的业务功能等。

该方法可选应用于前端开发系统，以下简称开发系统，开发系统包括开发终端和开发工具，其中，开发工具安装于开发终端中，开发人员可通过开发终端，在开发工具预置初始化命令以及脚本等，极大地节约开发者的时间和精力，从而使得开发者能够把精力聚焦于业务功能的开发，从而提高工作效率，提升工作质量，最终达到削减企业人力成本，提升企业利润的效果。

此外，本发明还提供一种前端开发方法。参照图3所示，为本发明前端开发方法的实施例的方法流程示意图。电子设备1的处理器12执行存储器11中存储的前端开发程序10时，实现前端开发方法，包括步骤S101-S105。以下对各个步骤进行具体说明。

步骤S101：当接收到初始化命令时，显示所述初始化命令对应的工程模板列表，以供开发人员进行选择。

开发人员在进行前端开发的过程中，首先在开发终端，如电脑等终端，打开开发工具，从而触发初始化命令，此时的开发系统在检测到初始化命令后，显示对应的工程模板列表，以供开发人员根据实际情况进行选择，工程模板列表中包含至少一个工程模板，其中，工程模板指的是为固定开发某一类项目而将该某类项目的技术框架、组件库、样式库、JS工具库、构建工具等予以固定化、标准化。

也即，每一个项目都对应有至少一个工程模板，因此，开发人员可根据自身要开发的目标项目的项目特点，选择相应的工程模板，如目标项目是一个H5项目，则应当选择H5工程模板，如目标项目是一个小程序，则应当选择小程序模板等。

步骤S102：若检测到基于所述工程模板列表触发的选择指令，则确定所述选择指令对应的目标工程模板。

本实施例中，在开发系统显示了工程模板列表之后，开发人员可通过移动鼠标等方式，在工程模板列表中选择自己想要的工程模板，具体可在鼠标光标移动到某一位置时，通过点击鼠标，触发选择指令，开发系统若检测到该选择指令，则确定该选择指令的触发位置，并根据触发位置，确定选择指令对应的目标工程模板，也即开发人员想要的工程模板。

在其他实施方式中，目标工程模板的确定还可以是开发人员在开发工具对应的开发界面中输入目标项目的描述信息，开发系统从而根据描述信息，自动为目标项目匹配合适的目标工程模板等。

步骤S103：拉取所述目标工程模板对应的配置清单，并按照所述配置清单，构建工程目录，以生成模板工程。

本实施例中，在开发系统中，每一个工程模板都有对应的配置清单，开发系统在确定了当前开发人员想要的目标工程模板之后，即可拉取该目标工程模板的配置清单，从而根据配置清单中的配置项，构建工程目录，最终生成初始化的模板工程，其中，模板工程中包含预先配置好的技术框架、组件库、样式库、JS工具库、构建工具等。

也即，配置清单是一个列表，而工程目录是一个文件夹体系，开发系统会按照配置清单执行创建文件夹，拷贝配置项对应的模板工程文件到对应文件夹等，从而生成和所选模板一样的文件夹层级和各层级下的文件内容，即可得到模板工程。

步骤S104：接收基于所述模板工程输入的代码，并在检测到代码提交指令时，执行代码检查钩子，以确定所述代码是否规范。

本实施例中，在生成模板工程之后，开发人员即可使用模板工程进行业务功能的开发，具体在模板工程中键入相应的代码，并在键入完成之后，点击提交，从而触发代码提交指令，开发系统在检测到该代码提交指令时，对开发人员提交的代码进行规范检查，确定代码是否符合代码规范，其中代码规范为预先设置的，确保代码能够正确执行的要求。

在一个实施例中，所述接收基于所述模板工程输入的代码，并在检测到代码提交指令时，执行代码检查钩子，以确定所述代码是否规范，包括：

若所述代码不规范，则显示错误代码的提示信息，以提示开发人员重新修改提交。

步骤S105：若所述代码规范且接收到打包命令，则调用代码打包工具对所述代码进行打包，并将打包后的所述代码放到工程目录中。

本实施例中，在校验代码规范后，输出提交成功的提交信息，以告知开发人员当前代码符合代码规范，此时，开发人员即可对代码进行打包，开发系统在接收到开发人员输入的打包命令时，调用代码打包工具对代码进行打包，并将打包后的代码放到工程目录中。

在一个实施例中，所述若所述代码规范且接收到打包命令，则调用代码打包工具对所述代码进行打包，包括：

确定对应浏览器的识别类型，将所述代码转换成所述识别类型对应的目标代码；

确定所述目标代码中的目标变量名，并将所述目标变量名替换成预设字符串；

对替换后的目标代码进行压缩打包。

本实施例中，也即，为了使得开发时写的代码能被对应的浏览器识别，首先需要确定浏览器的识别类型，也即浏览器支持识别哪种代码类型，再将代码转换成识别类型对应的目标代码，也即浏览器支持识别的类型代码，即为目标代码。

接着，确定目标代码中的目标变量名，其中，目标变量名为有语义的变量名，在具体实施时，可根据开发人员定义目标变量名，然后，将目标变量名替换成预设字符串，在具体实施时，预设字符串为无意义的字符串，从而提高代码的安全性。

最后，对替换后的目标代码进行压缩打包，压缩后代码体积变小，体积小了性能更好。

在一个实施例中，所述将打包后的所述代码放到工程目录中，包括：

确定所述代码的功能属性，并基于所述功能属性，确定打包后的所述代码在工程目录中的路径；

将打包后的所述代码放到所述路径中。

本实施例中，也即，先通过确定代码的功能属性，确定代码是执行什么功能，再根据功能属性，确定代码在工程目录中的路径，也即，每一种功能属性在工程目录中的位置不同。

在具体实施时，可根据代码所在的模板工程的位置，确定代码的功能属性，也即，在模板工程中，每一区域位置输入的代码所能实现的功能不一致，因此，可根据代码所在模板工程的位置来确定代码的功能属性；或者，将代码输入预设模拟器中，以通过预设模拟器执行代码，从而得到执行结果，根据执行结果确定代码的功能属性，也即，开发系统中还集成预设模拟器，用以模拟执行开发人员输入的代码，从而得到模拟的执行结果，最后根据执行结果确定代码的功能属性等。

在一个实施例中，还包括：

若接收到部署命令，则调用代码部署工具，将打包好的代码按照预设的发布流程部署到指定服务器中，并反馈部署后的项目地址。

在具体实施时，代码打包完成后，开发人员执行开发工具预置的部署命令，开发系统在接收到该部署命令后，即调用代码部署工具，将打包好的代码按照预设的发布流程，部署到指定服务器中，并反馈部署后的项目地址。

在一个实施例中，所述若接收到部署命令，则调用代码部署工具，将打包好的代码按照预设的发布流程部署到指定服务器中，并反馈部署后的项目地址，包括：

复制所述打包好的代码，并确定所述打包好的代码在所述指定服务器的路径地址，基于所述路径地址，将所述打包好的代码发布到所述指定服务器，以将所述打包好的代码放到所述指定服务器中所述路径地址对应的文件夹中；

接收所述指定服务器基于所述文件夹返回的项目地址，并反馈所述项目地址。

具体的，复制打包好的代码，并确定该代码在指定服务器的路径地址，基于该路径地址，将打包好的代码发布到指定服务器，以将代码放到指定服务器中该路径地址对应的文件夹中。

接收指定服务器基于该文件夹返回的项目地址，并将该项目地址反馈到开发系统的显示界面，以便开发人员知晓。

也即，在部署过程中，开发系统先复制一遍开发人员的代码，并确定代码在指定服务器的路径地址，具体可根据工程目录确定，如与工程目录一致的路径等，然后将代码部署到指定服务器的相应位置，最后返回部署后的项目地址，如，指定服务器地址是baidu.com，在将打包好的代码部署到指定服务器的a文件夹中下，即可返回baidu.com/a的项目地址。

在一个实施例中，还包括：

若接收到校验命令，则调用预设浏览器，并基于所述预设浏览器，打开所述项目地址，以显示所述项目地址对应的目标页面，以供开发人员校验。

具体的，代码部署完成后，开发人员执行开发工具预置的校验命令，开发系统在接收到该校验命令后，即调用开发系统默认的浏览器，并以浏览器打开部署后的项目地址，从而得到目标页面，开发人员可在该目标页面上检查部署是否成功，以及测试开发的业务功能等。

该方法可选应用于前端开发系统，以下简称开发系统，开发系统包括开发终端和开发工具，其中，开发工具安装于开发终端中，开发人员可通过开发终端，在开发工具预置初始化命令以及脚本等，极大地节约开发者的时间和精力，从而使得开发者能够把精力聚焦于业务功能的开发，从而提高工作效率，提升工作质量，最终达到削减企业人力成本，提升企业利润的效果。

此外，本发明实施例还提出一种计算机可读存储介质，该计算机可读存储介质可以是硬盘、多媒体卡、SD卡、闪存卡、SMC、只读存储器(ROM)、可擦除可编程只读存储器(EPROM)、便携式紧致盘只读存储器(CD-ROM)、USB存储器等等中的任意一种或者几种的任意组合。所述计算机可读存储介质中包括存储数据区和存储程序区，存储数据区存储根据区块链节点的使用所创建的数据，存储程序区存储有前端开发程序10，所述前端开发程序10被处理器执行时，应用于第二终端，实现如下操作：

当接收到初始化命令时，显示所述初始化命令对应的工程模板列表，以供开发人员进行选择；

若检测到基于所述工程模板列表触发的选择指令，则确定所述选择指令对应的目标工程模板；

拉取所述目标工程模板对应的配置清单，并按照所述配置清单，构建工程目录，以生成模板工程；

接收基于所述模板工程输入的代码，并在检测到代码提交指令时，执行代码检查钩子，以确定所述代码是否规范；

若所述代码规范且接收到打包命令，则调用代码打包工具对所述代码进行打包，并将打包后的所述代码放到工程目录中。

该方法可选应用于前端开发系统，以下简称开发系统，开发系统包括开发终端和开发工具，其中，开发工具安装于开发终端中，开发人员可通过开发终端，在开发工具预置初始化命令以及脚本等，极大地节约开发者的时间和精力，从而使得开发者能够把精力聚焦于业务功能的开发，从而提高工作效率，提升工作质量，最终达到削减企业人力成本，提升企业利润的效果。

在另一个实施例中，本发明所提供的前端开发方法，为进一步保证上述所有出现的数据的私密和安全性，上述所有数据还可以存储于一区块链的节点中。例如二维码、识别码等等，这些数据均可存储在区块链节点中。

需要说明的是，本发明所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。

本发明之计算机可读存储介质的具体实施方式与上述前端开发方法的具体实施方式大致相同，在此不再赘述。

需要说明的是，上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。并且本文中的术语"包括"、"包含"或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、装置、物品或者方法不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、装置、物品或者方法所固有的要素。在没有更多限制的情况下，由语句"包括一个……"限定的要素，并不排除在包括该要素的过程、装置、物品或者方法中还存在另外的相同要素。

需要说明的是，上述本发明实施例可以基于人工智能技术对相关的数据进行获取和处理。其中，人工智能(Artificial Intelligence，AI)是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。

人工智能基础技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大数据处理技术、操作/交互系统、机电一体化等技术。人工智能软件技术主要包括计算机视觉技术、机器人技术、生物识别技术、语音处理技术、自然语言处理技术以及机器学习/深度学习等几大方向。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在如上所述的一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用于使得一台电子设备(可以是手机，计算机，电子装置，或者网络设备等)执行本发明各个实施例所述的方法。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种前端开发方法，其特征在于，所述方法包括：

当接收到初始化命令时，显示所述初始化命令对应的工程模板列表，以供开发人员进行选择；

若检测到基于所述工程模板列表触发的选择指令，则确定所述选择指令对应的目标工程模板；

拉取所述目标工程模板对应的配置清单，并按照所述配置清单，构建工程目录，以生成模板工程；

接收基于所述模板工程输入的代码，并在检测到代码提交指令时，执行代码检查钩子，以确定所述代码是否规范；

若所述代码规范且接收到打包命令，则调用代码打包工具对所述代码进行打包，并将打包后的所述代码放到工程目录中。

2.如权利要求1所述的前端开发方法，其特征在于，所述接收基于所述模板工程输入的代码，并在检测到代码提交指令时，执行代码检查钩子，以确定所述代码是否规范，包括：

若所述代码不规范，则显示错误代码的提示信息，以提示开发人员重新修改提交。

3.如权利要求1所述的前端开发方法，其特征在于，所述若所述代码规范且接收到打包命令，则调用代码打包工具对所述代码进行打包，包括：

确定对应浏览器的识别类型，将所述代码转换成所述识别类型对应的目标代码；

确定所述目标代码中的目标变量名，并将所述目标变量名替换成预设字符串；

对替换后的目标代码进行压缩打包。

4.如权利要求1所述的前端开发方法，其特征在于，所述将打包后的所述代码放到工程目录中，包括：

确定所述代码的功能属性，并基于所述功能属性，确定打包后的所述代码在工程目录中的路径；

将打包后的所述代码放到所述路径中。

5.如权利要求1所述的前端开发方法，其特征在于，所述方法还包括：

若接收到部署命令，则调用代码部署工具，将打包好的代码按照预设的发布流程部署到指定服务器中，并反馈部署后的项目地址。

6.如权利要求5所述的前端开发方法，其特征在于，所述若接收到部署命令，则调用代码部署工具，将打包好的代码按照预设的发布流程部署到指定服务器中，并反馈部署后的项目地址，包括：

复制所述打包好的代码，并确定所述打包好的代码在所述指定服务器的路径地址，基于所述路径地址，将所述打包好的代码发布到所述指定服务器，以将所述打包好的代码放到所述指定服务器中所述路径地址对应的文件夹中；

接收所述指定服务器基于所述文件夹返回的项目地址，并反馈所述项目地址。

7.如权利要求1所述的前端开发方法，其特征在于，所述方法还包括：

若接收到校验命令，则调用预设浏览器，并基于所述预设浏览器，打开所述项目地址，以显示所述项目地址对应的目标页面，以供开发人员校验。

8.一种前端开发装置，其特征在于，所述装置包括：

接收模块，用于当接收到初始化命令时，显示所述初始化命令对应的工程模板列表，以供开发人员进行选择；

检测模块，用于若检测到基于所述工程模板列表触发的选择指令，则确定所述选择指令对应的目标工程模板；

生成模块，用于拉取所述目标工程模板对应的配置清单，并按照所述配置清单，构建工程目录，以生成模板工程；

执行模块，用于接收基于所述模板工程输入的代码，并在检测到代码提交指令时，执行代码检查钩子，以确定所述代码是否规范；

打包模块，用于若所述代码规范且接收到打包命令，则调用代码打包工具对所述代码进行打包，并将打包后的所述代码放到工程目录中。

9.一种电子设备，其特征在于，所述电子设备包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的程序，所述程序被所述至少一个处理器执行，以使所述至少一个处理器能够执行如权利要求1至7中任一项所述前端开发方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有前端开发程序，所述前端开发程序被处理器执行时，实现如权利要求1至7中任一项所述前端开发方法的步骤。

Images