CN112181417B - 前端研发配置装置及方法 - Google Patents

Abstract

本发明提供了一种前端研发配置装置及方法，所述装置包含环境模块、代码生成模块和打包模块；所述环境模块用于根据页面配置过程中各流程的配置需求获取配置模板集合，根据所述配置模板集合中各配置模板内的预定标识变量生成参数信息，通过所述参数信息获得用户输入的定义参数；所述代码生成模块用于将所述定义参数根据所述参数信息补入至对应的配置模板中生成配置文件；将所述配置文件转换为配置代码；所述打包模块用于根据页面配置过程中各流程之间的衔接关系，将所述配置代码按顺序组装为页面代码，打包所述页面代码生成页面配置包。

Description

前端研发配置装置及方法

技术领域

本发明涉及前段开发领域，可应用于金融领域或其他领域，尤指一种前端研发配置装置及方法。

背景技术

在当前前端开发过程中，主要通过组件化，前后端分离，工程化等技术手段提升前端的研发效率，且对于前端开发需要将这些技术手段结合使用；基于这些提升研发手段，前端的研发流程大体为：通过工程化的方式实现页面研发环境的快速搭建；基于前后端分离，进行前后端的接口约定，完成独立并行研发；基于组件化的手段完成页面的拼装研发；利用工程化工具进行打包、部署、上线。基于以上流程，页面开发呈流水线的开发方式，各个流程职责清晰，是一种通用的提升页面研发效率的手段。但是，虽然是标准化的流程，但对于初学开发人员，流程比较繁琐；面对固定的业务场景时，流程往往是固定的，缺乏对上述流程的进一步封装，无法进一步提升前端研发效率。综述以上，现有前端开发过程中存在学习成本高，开发流程繁琐等影响研发效率的问题。

发明内容

本发明目的在于提供一种前端研发配置装置及方法解决现有前端开发过程学习成本较高的问题。

为达上述目的，本发明所提供的前端研发配置装置具体包含环境模块、代码生成模块和打包模块；所述环境模块用于根据页面配置过程中各流程的配置需求获取配置模板集合，根据所述配置模板集合中各配置模板内的预定标识变量生成参数信息，通过所述参数信息获得用户输入的定义参数；所述代码生成模块用于将所述定义参数根据所述参数信息补入至对应的配置模板中生成配置文件；将所述配置文件转换为配置代码；所述打包模块用于根据页面配置过程中各流程之间的衔接关系，将所述配置代码按顺序组装为页面代码，打包所述页面代码生成页面配置包。

在上述前端研发配置装置中，优选的，所述装置还包含校验模块，所述校验模块用于根据所述参数信息获得预设的设置规则；根据所述设置规则校验所述定义参数；当所述定义参数不符合所述设置规则时，生成提示信息。

在上述前端研发配置装置中，优选的，所述校验模块还包含预览单元，所述预览单元用于根据所述页面配置包生成预览页面，将所述预览页面展示输出。

在上述前端研发配置装置中，优选的，所述打包模块还包含筛选单元，所述筛选单元用于通过babel转换器对所述页面代码进行抽象语法树解析获得引用模组代码信息；根据所述引用模组代码信息删除所述页面代码中未引用的模块代码后打包所述页面代码生成页面配置包。

在上述前端研发配置装置中，优选的，所述打包模块还包含整合单元，所述整合单元用于根据预设共性代码剔除所述页面代码中各配置代码的共性内容，将剔除共性内容后的所述页面代码打包生成页面配置包。

本发明还提供一种前端研发配置方法，所述方法包含：根据页面配置过程中各流程的配置需求获取配置模板集合，根据所述配置模板集合中各配置模板内的预定标识变量生成参数信息，通过所述参数信息获得用户输入的定义参数；将所述定义参数根据所述参数信息补入至对应的配置模板中生成配置文件；将所述配置文件转换为配置代码；根据页面配置过程中各流程之间的衔接关系，将所述配置代码按顺序组装为页面代码，打包所述页面代码生成页面配置包。

在上述前端研发配置方法中，优选的，所述方法还包含：根据所述参数信息获得预设的设置规则；根据所述设置规则校验所述定义参数；当所述定义参数不符合所述设置规则时，生成提示信息。

在上述前端研发配置方法中，优选的，所述方法还包含：根据所述页面配置包生成预览页面，将所述预览页面展示输出。

在上述前端研发配置方法中，优选的，打包所述页面代码生成页面配置包含：通过babel转换器对所述页面代码进行抽象语法树解析获得引用模组代码信息；根据所述引用模组代码信息删除所述页面代码中未引用的模块代码后打包所述页面代码生成页面配置包。

在上述前端研发配置方法中，优选的，打包所述页面代码生成页面配置包含：根据预设共性代码剔除所述页面代码中各配置代码的共性内容，将剔除共性内容后的所述页面代码打包生成页面配置包。

本发明还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述方法。

本发明还提供一种计算机可读存储介质，所述计算机可读存储介质存储有执行上述方法的计算机程序。

本发明的有益技术效果在于：可有效提升前端研发效率；通过系统提供的标准化输出予以提高前端UI的一致性，同时减少前端研发的上手难度，有理由初学者的进阶学习。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，并不构成对本发明的限定。在附图中：

图1为本发明一实施例所提供的前端研发配置装置的结构示意图；

图2为本发明一实施例所提供的前端研发配置装置的应用结构示意图；

图3为本发明一实施例所提供的打包模块的结构示意图；

图4为本发明一实施例所提供的打包模块的结构示意图；

图5为本发明一实施例所提供的前端研发配置方法的流程示意图；

图6为本发明一实施例所提供的电子设备的结构示意图。

具体实施方式

以下将结合附图及实施例来详细说明本发明的实施方式，借此对本发明如何应用技术手段来解决技术问题，并达成技术效果的实现过程能充分理解并据以实施。需要说明的是，只要不构成冲突，本发明中的各个实施例及各实施例中的各个特征可以相互结合，所形成的技术方案均在本发明的保护范围之内。

另外，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

请参考图1所示，本发明所提供的前端研发配置装置具体包含环境模块、代码生成模块和打包模块；所述环境模块用于根据页面配置过程中各流程的配置需求获取配置模板集合，根据所述配置模板集合中各配置模板内的预定标识变量生成参数信息，通过所述参数信息获得用户输入的定义参数；所述代码生成模块用于将所述定义参数根据所述参数信息补入至对应的配置模板中生成配置文件；将所述配置文件转换为配置代码；所述打包模块用于根据页面配置过程中各流程之间的衔接关系，将所述配置代码按顺序组装为页面代码，打包所述页面代码生成页面配置包。其中，所述代码生成模块可采用脚手架工具获得所述定义参数，从而提高数据效率；所述参数信息可包含参数定义的参数值和/或参数定义选项等页面配置过程中所需要设定的内容；以此，通过模块化各流程后统一转换的方式予以提升前端研发效率，整体上，本发明所提供的上述前端研发配置装置提供了一个模板转换系统协作完成配置模板到最后上线介质的转换；开发者按照模板进行字段输入，经过转换处理，最后输出发布上线的所需要的前端代码及打包上线文件。

请参考图2所示，在本发明一实施例中，所述装置还可包含校验模块，所述校验模块用于根据所述参数信息获得预设的设置规则；根据所述设置规则校验所述定义参数；当所述定义参数不符合所述设置规则时，生成提示信息。进一步的，所述校验模块还包含预览单元，所述预览单元用于根据所述页面配置包生成预览页面，将所述预览页面展示输出。实际工作中，该校验模块主要在模板出错时，给出对应的校验信息，提示开发者进行模板修改；提供页面预览功能，协助开发者能快速看到页面效果，对模板做出调整；提供Mock数据功能，协助开发者在无后台研发的情况下，完成前端代码的研发，实现前后端研发分离；其中关于Mock数据功能主要用于提升前后端分离研发效率，避免开发对服务端的接口的影响，提供简易的，更轻量级的本地Mock方式，使得可以在本机电脑即可完成接口的定义，映射及请求的发送；整体实现上hook应用发送请求的过程，在合适的时机注入mock参数，具体流程如下：1、在应用启动时读取相关参数(例如：在npm start时，在package.json读取mock参数并进行注入)；2、在判断为为mock模式后，需要根据应用传入的url读取对照关系，根据URL选择对应的mock文件；3、分别在发送请求前及收到response后，用mock文件里的request及response对象进行替换；4、如果mock.js中无url与本地mock文件的对应关系，则直接发送请求。

请参考图3所示，在本发明一实施例中，所述打包模块还可包含筛选单元，所述筛选单元用于通过babel转换器对所述页面代码进行抽象语法树解析，获得引用模组代码信息；根据所述引用模组代码信息删除所述页面代码中未引用的模块代码后，打包所述页面代码生成页面配置包。在实际工作中，所述筛选单元无需采用传统的webpack，而是使用了脚手架工具通过tree-shaking等机制，去除没有引用的模块，减少打包后的体积。另在打包过程中，除了生成必要的静态打包好的文件外，还会生成必要的签名文件信息，保证后续加载页面的安全性，此内容跟后续加载页面的流程有一定关系签名验签逻辑有一定关系。当然，本领域相关技术人员在实际使用时也可根据实际需要选择应用工具，本发明在此并不做具体限定。

请参考图4所示，在本发明一实施例中，所述打包模块还可包含整合单元，所述整合单元用于根据预设共性代码剔除所述页面代码中各配置代码的共性内容，将剔除共性内容后的所述页面代码打包生成页面配置包。在实际工作中，代码打包时还可考虑到通过该系统生成的页面都是基于共性的框架生成的这一因素，因此，可利用提前去分号的共性代码剔除重复部分，亦即，在整个打包过程中，会共性框架的打包代码，只会将自己特色的代码进行打包，减少了打包后的体积。

综上，现有技术更多的是体现的为工程解耦的内容，更多是体现开发完成后，解决打包构建环境不一致，发布流程繁琐的问题。在此基础上，本发明所提供的前端研发配置装置进一步想解决前端开发(UI页面绘制)难度大的问题，通过简易的JSON描述，自动生成页面，进一步降低整个开发的难度。此外与其他可视化，拖拽类发明不同的是，拖拽到代码区域生成的内容仍然为前端代码(需要学习前端框架)，对于运营人员和初学者来说，仍然有一定的难度。

请参考图5所示，本发明还提供一种前端研发配置方法，所述方法包含：

根据页面配置过程中各流程的配置需求获取配置模板集合，根据所述配置模板集合中各配置模板内的预定标识变量生成参数信息，通过所述参数信息获得用户输入的定义参数；

将所述定义参数根据所述参数信息补入至对应的配置模板中生成配置文件；

将所述配置文件转换为配置代码；

根据页面配置过程中各流程之间的衔接关系，将所述配置代码按顺序组装为页面代码，打包所述页面代码生成页面配置包。

在上述实施例中，所述方法还可包含：根据所述参数信息获得预设的设置规则；根据所述设置规则校验所述定义参数；当所述定义参数不符合所述设置规则时，生成提示信息；也可根据所述页面配置包生成预览页面，将所述预览页面展示输出；该实施例在实际工作中的具体应用方式已在前述实施例中详细说明，在此就不再一一详述。

在本发明一实施例中，打包所述页面代码生成页面配置可包含：通过babel转换器对所述页面代码进行抽象语法树解析获得引用模组代码信息；根据所述引用模组代码信息删除所述页面代码中未引用的模块代码后打包所述页面代码生成页面配置包。进一步的，打包所述页面代码生成页面配置还可包含：根据预设共性代码剔除所述页面代码中各配置代码的共性内容，将剔除共性内容后的所述页面代码打包生成页面配置包；该实施例在实际工作中的具体应用方式已在前述实施例中详细说明，在此就不再一一详述。

本发明的有益技术效果在于：可有效提升前端研发效率；通过系统提供的标准化输出予以提高前端UI的一致性，同时减少前端研发的上手难度，有理由初学者的进阶学习。

本发明还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述方法。

本发明还提供一种计算机可读存储介质，所述计算机可读存储介质存储有执行上述方法的计算机程序。

如图6所示，该电子设备600还可以包括：通信模块110、输入单元120、音频处理单元130、显示器160、电源170。值得注意的是，电子设备600也并不是必须要包括图6中所示的所有部件；此外，电子设备600还可以包括图6中没有示出的部件，可以参考现有技术。

如图6所示，中央处理器100有时也称为控制器或操作控件，可以包括微处理器或其他处理器装置和/或逻辑装置，该中央处理器100接收输入并控制电子设备600的各个部件的操作。

其中，存储器140，例如可以是缓存器、闪存、硬驱、可移动介质、易失性存储器、非易失性存储器或其它合适装置中的一种或更多种。可储存上述与失败有关的信息，此外还可存储执行有关信息的程序。并且中央处理器100可执行该存储器140存储的该程序，以实现信息存储或处理等。

输入单元120向中央处理器100提供输入。该输入单元120例如为按键或触摸输入装置。电源170用于向电子设备600提供电力。显示器160用于进行图像和文字等显示对象的显示。该显示器例如可为LCD显示器，但并不限于此。

该存储器140可以是固态存储器，例如，只读存储器(ROM)、随机存取存储器(RAM)、SIM卡等。还可以是这样的存储器，其即使在断电时也保存信息，可被选择性地擦除且设有更多数据，该存储器的示例有时被称为EPROM等。存储器140还可以是某种其它类型的装置。存储器140包括缓冲存储器141(有时被称为缓冲器)。存储器140可以包括应用/功能存储部142，该应用/功能存储部142用于存储应用程序和功能程序或用于通过中央处理器100执行电子设备600的操作的流程。

存储器140还可以包括数据存储部143，该数据存储部143用于存储数据，例如联系人、数字数据、图片、声音和/或任何其他由电子设备使用的数据。存储器140的驱动程序存储部144可以包括电子设备的用于通信功能和/或用于执行电子设备的其他功能(如消息传送应用、通讯录应用等)的各种驱动程序。

通信模块110即为经由天线111发送和接收信号的发送机/接收机110。通信模块(发送机/接收机)110耦合到中央处理器100，以提供输入信号和接收输出信号，这可以和常规移动通信终端的情况相同。

基于不同的通信技术，在同一电子设备中，可以设置有多个通信模块110，如蜂窝网络模块、蓝牙模块和/或无线局域网模块等。通信模块(发送机/接收机)110还经由音频处理器130耦合到扬声器131和麦克风132，以经由扬声器131提供音频输出，并接收来自麦克风132的音频输入，从而实现通常的电信功能。音频处理器130可以包括任何合适的缓冲器、解码器、放大器等。另外，音频处理器130还耦合到中央处理器100，从而使得可以通过麦克风132能够在本机上录音，且使得可以通过扬声器131来播放本机上存储的声音。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

以上所述的具体实施例，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本发明的具体实施例而已，并不用于限定本发明的保护范围，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种前端研发配置装置，其特征在于，所述装置包含环境模块、代码生成模块和打包模块；

所述环境模块用于根据页面配置过程中各流程的配置需求获取配置模板集合，根据所述配置模板集合中各配置模板内的预定标识变量生成参数信息，通过所述参数信息获得用户输入的定义参数；

所述代码生成模块用于将所述定义参数根据所述参数信息补入至对应的配置模板中生成配置文件；将所述配置文件转换为配置代码；

所述打包模块用于根据页面配置过程中各流程之间的衔接关系，将所述配置代码按顺序组装为页面代码，打包所述页面代码生成页面配置包；

所述打包模块还包含筛选单元，所述筛选单元用于通过babel转换器对所述页面代码进行抽象语法树解析，获得引用模组代码信息；根据所述引用模组代码信息删除所述页面代码中未引用的模块代码后，打包所述页面代码生成页面配置包。

2.根据权利要求1所述的前端研发配置装置，其特征在于，所述装置还包含校验模块，所述校验模块用于根据所述参数信息获得预设的设置规则；根据所述设置规则校验所述定义参数；当所述定义参数不符合所述设置规则时，生成提示信息。

3.根据权利要求2所述的前端研发配置装置，其特征在于，所述校验模块还包含预览单元，所述预览单元用于根据所述页面配置包生成预览页面，将所述预览页面展示输出。

4.根据权利要求1所述的前端研发配置装置，其特征在于，所述打包模块还包含整合单元，所述整合单元用于根据预设共性代码剔除所述页面代码中各配置代码的共性内容，将剔除共性内容后的所述页面代码打包生成页面配置包。

5.一种前端研发配置方法，其特征在于，所述方法包含：

根据页面配置过程中各流程的配置需求获取配置模板集合，根据所述配置模板集合中各配置模板内的预定标识变量生成参数信息，通过所述参数信息获得用户输入的定义参数；

将所述定义参数根据所述参数信息补入至对应的配置模板中生成配置文件；将所述配置文件转换为配置代码；

根据页面配置过程中各流程之间的衔接关系，将所述配置代码按顺序组装为页面代码，打包所述页面代码生成页面配置包；

打包所述页面代码生成页面配置包含：通过babel转换器对所述页面代码进行抽象语法树解析，获得引用模组代码信息；根据所述引用模组代码信息删除所述页面代码中未引用的模块代码后，打包所述页面代码生成页面配置包。

6.根据权利要求5所述的前端研发配置方法，其特征在于，所述方法还包含：

根据所述参数信息获得预设的设置规则；

根据所述设置规则校验所述定义参数；

当所述定义参数不符合所述设置规则时，生成提示信息。

7.根据权利要求5所述的前端研发配置方法，其特征在于，所述方法还包含：根据所述页面配置包生成预览页面，将所述预览页面展示输出。

8.根据权利要求5所述的前端研发配置方法，其特征在于，打包所述页面代码生成页面配置包含：

根据预设共性代码剔除所述页面代码中各配置代码的共性内容，将剔除共性内容后的所述页面代码打包生成页面配置包。

9.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求5至8任一所述方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有执行权利要求5至8任一所述方法的计算机程序。