一种前端研发环境构建方法及装置

技术领域

本申请涉及框架构建领域，具体而言，涉及一种前端研发环境构建方法及装置。

背景技术

Vue是前端研发工程师中的三大主流框架之一，是一套用于构建用户页面的渐进式JavaScript框架。然而，研发工程师在接手一个新项目，或者是重构项目时，通常会有手足无措之感，同时还会给项目带来各种各样问题。究其原因，便是前期的Vue基础构建并非完善。

发明内容

本申请实施例的目的在于提供一种前端研发环境构建方法及装置，能够完善前期的Vue基础构建，从而降低前端研发工程师的学习成本，进而提高前端研发工程师的工作效果。

本申请实施例第一方面提供了一种前端研发环境构建方法，包括：

获取重要依赖库、请求处理封装方法、pack核心代码、项目配置文件以及生产环境安装包；

将所述项目配置文件中生产依赖工具的数据移动到开发依赖工具中，得到目标配置文件；

将所述重要依赖库和请求处理封装方法引入前端研发环境中；

根据所述生产环境安装包在所述前端研发环境中安装本地模拟测试生产环境；

通过所述pack核心代码对所述前端研发环境的路径管理器进行模块化处理，得到构建好的前端研发环境。

在上述实现过程中，该方法可以优先获取重要依赖库、请求处理封装方法、pack核心代码、项目配置文件以及生产环境安装包；然后，将项目配置文件中生产依赖工具的数据移动到开发依赖工具中，得到目标配置文件；再将重要依赖库和请求处理封装方法引入前端研发环境中；再后，根据生产环境安装包在前端研发环境中安装本地模拟测试生产环境；最后，再通过pack核心代码对前端研发环境的路径管理器进行模块化处理，得到构建好的前端研发环境。可见，该方法能够完善前期的Vue基础构建，从而降低前端研发工程师的学习成本，进而提高前端研发工程师的工作效果。

进一步地，所述方法还包括：

当新增依赖数据时，通过save-d的方式进行新增依赖数据，以使所述生产依赖工具保持空置状态。

进一步地，所述方法还包括：

获取所述前端研发环境中产生的网络数据请求；

通过调用所述请求处理封装方法对所述网络数据请求进行打断优化，得到优化后的数据请求；

根据所述优化后的数据请求进行本地模拟JSON数据开发，完成业务逻辑。

进一步地，所述根据所述生产环境安装包在所述前端研发环境中安装本地模拟测试生产环境，包括：

根据所述生产环境安装包在所述前端研发环境中安装本地模拟测试生产环境；

删除所述本地模拟测试生产环境对应的安装包文件夹，并重新安装所述本地模拟测试生产环境。

进一步地，所述方法还包括：

获取待测试的目标项目；

通过所述本地模拟测试生产环境在本地服务器运行所述目标项目进行测试。

本申请实施例第二方面提供了一种前端研发环境构建装置，所述前端研发环境构建装置包括：。

第一获取单元，用于获取重要依赖库、请求处理封装方法、pack核心代码、项目配置文件以及生产环境安装包；

数据移动单元，用于将所述项目配置文件中生产依赖工具的数据移动到开发依赖工具中，得到目标配置文件；

引入单元，用于将所述重要依赖库和请求处理封装方法引入前端研发环境中；

安装单元，用于根据所述生产环境安装包在所述前端研发环境中安装本地模拟测试生产环境；

路由处理单元，用于通过所述pack核心代码对所述前端研发环境的路径管理器进行模块化处理，得到构建好的前端研发环境。

在上述实现过程中，该装置可以通过第一获取单元获取重要依赖库、请求处理封装方法、pack核心代码、项目配置文件以及生产环境安装包；通过数据移动单元将项目配置文件中生产依赖工具的数据移动到开发依赖工具中，得到目标配置文件；通过引入单元将重要依赖库和请求处理封装方法引入前端研发环境中；通过安装单元来根据生产环境安装包在前端研发环境中安装本地模拟测试生产环境；通过路由处理单元来通过pack核心代码对前端研发环境的路径管理器进行模块化处理，得到构建好的前端研发环境。可见，该装置能够完善前期的Vue基础构建，从而降低前端研发工程师的学习成本，进而提高前端研发工程师的工作效果。

进一步地，所述前端研发环境构建装置还包括：

新增单元，用于当新增依赖数据时，通过save-d的方式进行新增依赖数据，以使所述生产依赖工具保持空置状态。

进一步地，所述前端研发环境构建装置还包括：

第二获取单元，用于获取所述前端研发环境中产生的网络数据请求；

打断优化单元，用于通过调用所述请求处理封装方法对所述网络数据请求进行打断优化，得到优化后的数据请求；

模拟开发单元，用于根据所述优化后的数据请求进行本地模拟JSON数据开发，完成业务逻辑。

进一步地，所述安装单元包括：

安装子单元，用于根据所述生产环境安装包在所述前端研发环境中安装本地模拟测试生产环境；

重装子单元，用于删除所述本地模拟测试生产环境对应的安装包文件夹，并重新安装所述本地模拟测试生产环境。

进一步地，所述前端研发环境构建装置还包括：

第三获取单元，用于获取待测试的目标项目；

测试单元，用于通过所述本地模拟测试生产环境在本地服务器运行所述目标项目进行测试。

本申请实施例第三方面提供了一种电子设备，包括存储器以及处理器，所述存储器用于存储计算机程序，所述处理器运行所述计算机程序以使所述电子设备执行本申请实施例第一方面中任一项所述的前端研发环境构建方法。

本申请实施例第四方面提供了一种计算机可读存储介质，其存储有计算机程序指令，所述计算机程序指令被一处理器读取并运行时，执行本申请实施例第一方面中任一项所述的前端研发环境构建方法。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对本申请实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本申请实施例提供的一种前端研发环境构建方法的流程示意图；

图2为本申请实施例提供的另一种前端研发环境构建方法的流程示意图；

图3为本申请实施例提供的又一种前端研发环境构建方法的流程示意图；

图4为本申请实施例提供的再一种前端研发环境构建方法的流程示意图；

图5为本申请实施例提供的一种前端研发环境构建装置的结构示意图；

图6为本申请实施例提供的另一种前端研发环境构建装置的结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行描述。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。同时，在本申请的描述中，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

实施例1

请参看图1，图1为本实施例提供了一种前端研发环境构建方法的流程示意图。其中，该前端研发环境构建方法包括：

S101、获取重要依赖库、请求处理封装方法、pack核心代码、项目配置文件以及生产环境安装包。

S102、将项目配置文件中生产依赖工具的数据移动到开发依赖工具中，得到目标配置文件。

本实施例中，项目配置文件为package.json；生产依赖工具为dependences；开发依赖工具为devDependences。

S103、将重要依赖库和请求处理封装方法引入前端研发环境中。

S104、根据生产环境安装包在前端研发环境中安装本地模拟测试生产环境。

本实施例中，本地模拟测试生产环境是Node.js是一个基于ChromeV8引擎的JavaScript运行环境。Node.js使用了一个事件驱动、非阻塞式I/O的模型,使其轻量又高效。Node.js的包管理器npm,是全球最大的开源库生态系统。

作为一种可选的实施方式，根据生产环境安装包在前端研发环境中安装本地模拟测试生产环境，包括：

根据生产环境安装包在前端研发环境中安装本地模拟测试生产环境；

删除本地模拟测试生产环境对应的安装包文件夹，并重新安装本地模拟测试生产环境。

本实施例中，Vue、router等重要依赖库以CDN或者静态资源的方式，在主页面中引入，如此项目打包构建时减轻负载，同时需要在./build/webpack.baseconf.js中进行拓展处理，核心代码如下：

S105、通过pack核心代码对前端研发环境的路径管理器进行模块化处理，得到构建好的前端研发环境。

本实施例中，路由借助Webpack核心代码，进行模块化处理，核心代码如下：

本实施例中，该方法通过对于四个实际项目的亲测，得到该方法可适用于95％以上前端新项目和重构的效果，其中四个实际项目如下：

A、银保非寿口袋端(旧项目借鉴于此进行配置优化升级，可无缝衔接)；

B、保险资产配置PAD端(新项目直接开发业务逻辑，从其他平台无缝衔接函数封装库)；

C、与理财基金、展业平台跨组项目对比更具优势(解决项目注释不清、冗余、构建速度慢等痛点)；

D、某地产成熟项目的重构(避免资源浪费，让项目无缝衔接，迭代更新更有效)。

可见，该方法可以应用于金融领域，从而以此来起到快速、准确、简单的使用效果。

本实施例中，该方法的执行主体可以为计算机、服务器等计算装置，对此本实施例中不作任何限定。

在本实施例中，该方法的执行主体还可以为智能手机、平板电脑等智能设备，对此本实施例中不作任何限定。

可见，实施本实施例所描述的前端研发环境构建方法，能够基于Vue2、Webpack、npm架构完善的前端通用基础环境，从而使得其能够适用于95％以上前端新项目和重构。同时，还能够避免繁琐的配置，降低学习成本，使得研发人员只需专注业务逻辑开发，从而大幅节约成本，减少前端研发工程师的工作压力。

实施例2

请参看图2，图2为本实施例提供了一种前端研发环境构建方法的流程示意图。其中，该前端研发环境构建方法包括：

S201、获取重要依赖库、请求处理封装方法、pack核心代码、项目配置文件以及生产环境安装包。

S202、将项目配置文件中生产依赖工具的数据移动到开发依赖工具中，得到目标配置文件。

S203、将重要依赖库和请求处理封装方法引入前端研发环境中。

S204、根据生产环境安装包在前端研发环境中安装本地模拟测试生产环境。

作为一种可选的实施方式，根据生产环境安装包在前端研发环境中安装本地模拟测试生产环境，包括：

根据生产环境安装包在前端研发环境中安装本地模拟测试生产环境；

删除本地模拟测试生产环境对应的安装包文件夹，并重新安装本地模拟测试生产环境。

S205、通过pack核心代码对前端研发环境的路径管理器进行模块化处理，得到构建好的前端研发环境。

S206、当新增依赖数据时，通过save-d的方式进行新增依赖数据，以使生产依赖工具保持空置状态。

本实施例中，该方法可以将package.json中dependences的内容移动到devDependences中，将node_modules删除，然后重新安装，如此操作的理由亦是解决项目打包构建时缓慢的痛点。同理，后续新增依赖都通通使用—save-d的方式来进行，让dependences从头到尾保持一个空置状态。

本实施例中，该方法的执行主体可以为计算机、服务器等计算装置，对此本实施例中不作任何限定。

在本实施例中，该方法的执行主体还可以为智能手机、平板电脑等智能设备，对此本实施例中不作任何限定。

可见，实施本实施例所描述的前端研发环境构建方法，能够基于Vue2、Webpack、npm架构完善的前端通用基础环境，从而使得其能够适用于95％以上前端新项目和重构。同时，还能够避免繁琐的配置，降低学习成本，使得研发人员只需专注业务逻辑开发，从而大幅节约成本，减少前端研发工程师的工作压力。

实施例3

请参看图3，图3为本实施例提供了一种前端研发环境构建方法的流程示意图。其中，该前端研发环境构建方法包括：

S301、获取重要依赖库、请求处理封装方法、pack核心代码、项目配置文件以及生产环境安装包。

S302、将项目配置文件中生产依赖工具的数据移动到开发依赖工具中，得到目标配置文件。

S303、将重要依赖库和请求处理封装方法引入前端研发环境中。

S304、根据生产环境安装包在前端研发环境中安装本地模拟测试生产环境。

作为一种可选的实施方式，根据生产环境安装包在前端研发环境中安装本地模拟测试生产环境，包括：

根据生产环境安装包在前端研发环境中安装本地模拟测试生产环境；

删除本地模拟测试生产环境对应的安装包文件夹，并重新安装本地模拟测试生产环境。

S305、通过pack核心代码对前端研发环境的路径管理器进行模块化处理，得到构建好的前端研发环境。

S306、获取前端研发环境中产生的网络数据请求。

S307、通过调用请求处理封装方法对网络数据请求进行打断优化，得到优化后的数据请求。

本实施例中，Axios数据请求可以进行打断优化，避免非法频繁操作时UI还得定制化处理，当然，此处不进行过多介绍，因为银行有自定义通用的封装方法可调用，所以此处直接引入银行封装方法即可。

S308、根据优化后的数据请求进行本地模拟JSON数据开发，完成业务逻辑。

本实施例中，该方法提出一种有关于Axios的Mock开发方法。其核心做法为：复制多一个Mock环境配置，然后在封装的数据请求中，通过环境区分改变数据加载方式，达到直接请求本地项目所伪造的静态数据。这样只要按照接口文档入参出参的方式，直接就可以将业务逻辑完成。

本实施例中，Webpack配置优化可以围绕以下几点出发：

A、在router中，require代替import解决首页加载时间过长的问题，

B、在./config/index.js中build，设置productionSourceMap为false，为打包瘦身，map文件到生产环境下没必要存在。同时，将productionGzip设置为true，达到压缩化处理，尽管加大了打包文件的大小，但无伤大雅。也可以使用compression-webpack-plugin插件，生成比js更小的gz文件，目前大部分浏览器都支持。

本实施例中，该方法的执行主体可以为计算机、服务器等计算装置，对此本实施例中不作任何限定。

在本实施例中，该方法的执行主体还可以为智能手机、平板电脑等智能设备，对此本实施例中不作任何限定。

可见，实施本实施例所描述的前端研发环境构建方法，能够基于Vue2、Webpack、npm架构完善的前端通用基础环境，从而使得其能够适用于95％以上前端新项目和重构。同时，还能够避免繁琐的配置，降低学习成本，使得研发人员只需专注业务逻辑开发，从而大幅节约成本，减少前端研发工程师的工作压力。

实施例4

请参看图4，图4为本实施例提供了一种前端研发环境构建方法的流程示意图。其中，该前端研发环境构建方法包括：

S401、获取重要依赖库、请求处理封装方法、pack核心代码、项目配置文件以及生产环境安装包。

S402、将项目配置文件中生产依赖工具的数据移动到开发依赖工具中，得到目标配置文件。

S403、将重要依赖库和请求处理封装方法引入前端研发环境中。

S404、根据生产环境安装包在前端研发环境中安装本地模拟测试生产环境。

作为一种可选的实施方式，根据生产环境安装包在前端研发环境中安装本地模拟测试生产环境，包括：

根据生产环境安装包在前端研发环境中安装本地模拟测试生产环境；

删除本地模拟测试生产环境对应的安装包文件夹，并重新安装本地模拟测试生产环境。

S405、通过pack核心代码对前端研发环境的路径管理器进行模块化处理，得到构建好的前端研发环境。

S406、获取待测试的目标项目。

S407、通过本地模拟测试生产环境在本地服务器运行目标项目进行测试。

本实施例中，该方法可以通过node本地模拟测试生产环境，将项目直接在本地服务器运行起来。

本实施例中，该方法的执行主体可以为计算机、服务器等计算装置，对此本实施例中不作任何限定。

在本实施例中，该方法的执行主体还可以为智能手机、平板电脑等智能设备，对此本实施例中不作任何限定。

可见，实施本实施例所描述的前端研发环境构建方法，能够基于Vue2、Webpack、npm架构完善的前端通用基础环境，从而使得其能够适用于95％以上前端新项目和重构。同时，还能够避免繁琐的配置，降低学习成本，使得研发人员只需专注业务逻辑开发，从而大幅节约成本，减少前端研发工程师的工作压力。

实施例5

请参看图5，图5为本实施例提供的一种前端研发环境构建装置的结构示意图。如图5所示，该前端研发环境构建装置包括：

第一获取单元510，用于获取重要依赖库、请求处理封装方法、pack核心代码、项目配置文件以及生产环境安装包；

数据移动单元520，用于将项目配置文件中生产依赖工具的数据移动到开发依赖工具中，得到目标配置文件；

引入单元530，用于将重要依赖库和请求处理封装方法引入前端研发环境中；

安装单元540，用于根据生产环境安装包在前端研发环境中安装本地模拟测试生产环境；

路由处理单元550，用于通过pack核心代码对前端研发环境的路径管理器进行模块化处理，得到构建好的前端研发环境。

本实施例中，对于前端研发环境构建装置的解释说明可以参照实施例1、实施例2、实施例3或实施例4中的描述，对此本实施例中不再多加赘述。

可见，实施本实施例所描述的前端研发环境构建装置，能够基于Vue2、Webpack、npm架构完善的前端通用基础环境，从而使得其能够适用于95％以上前端新项目和重构。同时，还能够避免繁琐的配置，降低学习成本，使得研发人员只需专注业务逻辑开发，从而大幅节约成本，减少前端研发工程师的工作压力。

实施例6

请参看图6，图6为本实施例提供的一种前端研发环境构建装置的结构示意图。如图6所示，该前端研发环境构建装置包括：

第一获取单元510，用于获取重要依赖库、请求处理封装方法、pack核心代码、项目配置文件以及生产环境安装包；

数据移动单元520，用于将项目配置文件中生产依赖工具的数据移动到开发依赖工具中，得到目标配置文件；

引入单元530，用于将重要依赖库和请求处理封装方法引入前端研发环境中；

安装单元540，用于根据生产环境安装包在前端研发环境中安装本地模拟测试生产环境；

路由处理单元550，用于通过pack核心代码对前端研发环境的路径管理器进行模块化处理，得到构建好的前端研发环境。

作为一种可选的实施方式，前端研发环境构建装置还包括：

新增单元560，用于当新增依赖数据时，通过save-d的方式进行新增依赖数据，以使生产依赖工具保持空置状态。

作为一种可选的实施方式，前端研发环境构建装置还包括：

第二获取单元570，用于获取前端研发环境中产生的网络数据请求；

打断优化单元580，用于通过调用请求处理封装方法对网络数据请求进行打断优化，得到优化后的数据请求；

模拟开发单元590，用于根据优化后的数据请求进行本地模拟JSON数据开发，完成业务逻辑。

作为一种可选的实施方式，安装单元540包括：

安装子单元541，用于根据生产环境安装包在前端研发环境中安装本地模拟测试生产环境；

重装子单元542，用于删除本地模拟测试生产环境对应的安装包文件夹，并重新安装本地模拟测试生产环境。

作为一种可选的实施方式，前端研发环境构建装置还包括：

第三获取单元600，用于获取待测试的目标项目；

测试单元610，用于通过本地模拟测试生产环境在本地服务器运行目标项目进行测试。

本实施例中，对于前端研发环境构建装置的解释说明可以参照实施例1、实施例2、实施例3或实施例4中的描述，对此本实施例中不再多加赘述。

可见，实施本实施例所描述的前端研发环境构建装置，能够基于Vue2、Webpack、npm架构完善的前端通用基础环境，从而使得其能够适用于95％以上前端新项目和重构。同时，还能够避免繁琐的配置，降低学习成本，使得研发人员只需专注业务逻辑开发，从而大幅节约成本，减少前端研发工程师的工作压力。

本申请实施例提供了一种电子设备，包括存储器以及处理器，所述存储器用于存储计算机程序，所述处理器运行所述计算机程序以使所述电子设备执行本申请实施例1、实施例2、实施例3或实施例4中的前端研发环境构建方法。

本申请实施例提供了一种计算机可读存储介质，其存储有计算机程序指令，所述计算机程序指令被一处理器读取并运行时，执行本申请实施例1、实施例2、实施例3或实施例4中的前端研发环境构建方法。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本申请的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本申请各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅为本申请的实施例而已，并不用于限制本申请的保护范围，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应所述以权利要求的保护范围为准。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。