CN111290753B - 前端开发环境的搭建方法、装置、设备及存储介质 - Google Patents

Abstract

本发明涉及一种前端开发环境的搭建方法、装置、设备及存储介质，属于前端开发技术领域，其中的方法包括：通过Web微服务平台化预建立的前端应用工程模板创建前端应用模块，在所述前端应用模块加入前端资源文件；对所述前端应用模块所属的前端模块进行定义，其中，所述定义为对所述前端模块的静态资源目录和工程化相关文件进行的配置；通过JavaScript包管理工具建立所述定义后的前端模块的依赖关系；通过所述Web微服务平台化的前端开发框架预建立的前端工程模板创建前端平台模块，结合所述依赖关系搭建前端开发环境。本发明解决了目前非前后端分离开发过程中过于依赖后端环境的问题，也解决了完全前后端分离下前端工程结构未能按模块拆分过于耦合的问题。

Description

前端开发环境的搭建方法、装置、设备及存储介质

技术领域

本发明涉及前端开发技术领域，尤其涉及一种前端开发环境的搭建方法、装置、设备及存储介质。

背景技术

微服务是一种服务间松耦合的、每个服务之间高度自治并且使用轻量级协议进行通信的可持续集成部署的分布式架构体系。其可以采取较为典型的分布式结构，细分的部署粒度，服务的扩展性更为灵活。

前端开发模式目前有两种方式：

其中的一种是，利用微服务体系实现各服务间隔离、自治，体现在工程中各服务模块也相对独立，在基于SpringCloud搭建的微服务平台架构中，常用的是将每个模块对应的前端资源放入对应的web模块resourc es/static目录下，通过maven将所有的模块整合在一起，但是这样所有的前端资源都分散在不同的jar包中，通过配置静态资源路由来寻址这些资源，这导致前端开发环境是依赖java工程，可能会受到数据库、中间件等环境的影响，并且资源加载顺序无法控制，静态资源无法热更新，各模块打包时所需的平台资源和公共组件资源无法获得，对于异构模块需要将编译后的代码放入到web工程中才可以使用，而且异构系统在开发阶段获取不了平台的资源环境等，这些都很大程度上影响了前端开发人员的工作环境与效率。

另一种前端开发模式就是将前端工程完全独立，将所有模块的代码都放在一个工程中，提供完全纯粹的前端开发环境，但是这样平台无法对已有的模块自由组合，缺少模块的依赖管理，体系上也无法和后端的模块对应上，这样也不是我们所期望的结果。

发明内容

鉴于上述的分析，本发明实施例旨在提供一种前端开发环境的搭建方法、装置、设备及存储介质，用以解决现有的前端开发过程中过于依赖后端工程的问题。

第一方面，本发明实施例提供了一种前端开发环境的搭建方法，所述方法包括：

通过Web微服务平台化预建立的前端应用工程模板创建前端应用模块，在所述前端应用模块加入前端资源文件，其中，所述前端资源文件包括源工程迁移的资源文件和根据开发需求形成的资源文件；

所述前端应用模块所属的前端模块进行定义，其中，所述定义为对所述前端模块的静态资源目录和工程化相关文件进行的配置；

通过JavaScript包管理工具建立所述定义后的前端模块的依赖关系；

通过所述Web微服务平台化的前端开发框架预建立的前端工程模板创建前端平台模块，结合所述依赖关系搭建前端开发环境。

结合上述说明，在本发明实例的另一种可能的实施方式中，所述方法还包括：

读取Web微服务平台化的前端开发框架的配置文件以获取定义后的前端模块；

对所述定义后的前端模块进行预编译、打包和压缩，并将压缩后的前端模块发送至包管理工具进行管理。

结合上述说明，在本发明实例的另一种可能的实施方式中，对所述前端应用模块所属的前端模块进行定义，还包括：

对所述前端模块的预编译命令进行配置；和/或

对所述前端模块的资源映射进行配置。

结合上述说明，在本发明实例的另一种可能的实施方式中，所述通过所述包管理工具建立所述定义后的前端模块的依赖关系，包括：

获取所述前端模块的应用模块与组件间的第一依赖关系；

工程化相关文件获取所述前端模块的平台模块与应用模块间的第二依赖关系；

根据所述第一依赖关系和所述第二依赖关系生成所述定义后的前端模块的依赖关系。

结合上述说明，在本发明实例的另一种可能的实施方式中，所述方法还包括：

所述资源文件包括html，js，css，img文件中的一种或两种及以上的组合。

结合上述说明，在本发明实例的另一种可能的实施方式中，所述方法还包括：

基于http-proxy实现所述前端模块的服务接口调用。

第二方面，本发明实施例还提供了一种前端开发环境的搭建装置，所述装置包括：

封装单元，用于将模块包文件从原代码工程中抽离，并将每一段独立的抽离后的模块包文件发送至Web微服务平台化的前端开发框架，以生成对应的前端模块；

配置定义单元，用于对所述前端应用模块所属的前端模块进行定义，其中，所述定义包括对所述前端模块的静态资源目录和工程化相关文件进行的配置；

依赖建立单元，用于通过JavaScript包管理工具建立所述定义后的前端模块的依赖关系；

环境搭建单元，用于从所述Web微服务平台化的前端开发框架中预建立的工程模板中获取待搭建环境的待用模板，根据待用模板以及所述依赖关系搭建前端开发环境。

上述的装置，所述装置还包括：

读取模块，用于读取Web微服务平台化的前端开发框架的配置文件以获取定义后的前端模块；

管理模块，用于对所述定义后的前端模块进行预编译、打包和压缩，并将压缩后的前端模块发送至包管理工具进行管理。

第三方面，本发明还提供了一种电子设备，所述电子设备包括：

处理器；

用于存储处理器可执行的指令的存储器；

其中，所述存储器被配置为用以实施上述的前端开发环境的搭建方法。

第四方面，本发明还提供了一种非易失性计算机可读存储介质，其上存储有计算机程序指令，所述计算机程序指令被处理器执行时实现上述任意一项所述的前端开发环境的搭建方法。

本发明通过将原工作的模块包文件抽离封装形成独立的客户端的形式，使得按照开发需求根据已形成的客户端进行所需要的配置，根据不同的配置文件能够形成不同的客户端模块，将所有需要的配置打包成一个模块发布到管理平台后开发人员能够直接使用这些客户端模块。

本发明解决了在非前后端分离开发过程中过于依赖后端环境的问题，降低了前端开发的难度，同时也解决了完全前后端分离下前端工程结构未能按模块拆分过于耦合的问题。

本发明中，上述各技术方案之间还可以相互组合，以实现更多的优选组合方案。本发明的其他特征和优点将在随后的说明书中阐述，并且，部分优点可从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过说明书以及附图中所特别指出的内容中来实现和获得。

附图说明

附图仅用于示出具体实施例的目的，而并不认为是对本发明的限制，在整个附图中，相同的参考符号表示相同的部件。

图1为本发明实施例一种前端开发环境的搭建方法的基本流程示意图；

图2为本发明实施例中前端开发环境的搭建后web微服务系统的结构示意图；

图3为本发明实施例封装后的前端模块的结构示意图；

图4为本发明实施例依赖关系的形成流程示意图；

图5为本发明实施例一种前端开发环境的搭建装置的结构示意图；

图6为本发明的电子设备的结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明涉及一种前端开发环境的搭建方法、装置、设备及存储介质，其主要运用于前端开发使用语言进行过渡的场景中，其基本思想是：将现有工程的资源文件及配置文件以及根据开发需求生成的配置资源文件等进行封装形成前端模块，该前端模块包括前端平台模块以及前端应用模块，其中的前端平台模块又包括前端基础模块，前端基础模块包括若干基础子模块，前端模块中包括了前端应用模块的依赖以及组件的依赖，将前端模块发布后，开发人员能够通过这种方式直接通过配置文件读取这些前端模块，而不再依赖于已编译的后端工程文件，对于开发工作人员而言提供了一种新的前端开发环境以及一种新的前端开发环境的快速搭建方法。

图1为本发明实施例一提供的流程图，本实施例可适用于对前端工程进行封装以独立进行配置的情况，该方法具体包括如下步骤：

在步骤110中，通过Web微服务平台化预建立的前端应用工程模板创建前端应用模块，在所述前端应用模块加入前端资源文件，其中，所述前端资源文件包括源工程迁移的资源文件和根据开发需求形成的资源文件；

本发明实施例一种可行的实施方式中，所述源工程可以为在开发过程中的原java环境中的java工程，所述模块包文件为通过java语言编写的java代码形成的jar包，每一独立形成的jar包可能用于实现某一功能或者应用。

通过源工程获取的资源文件，可以为html，js，css，img文件中的一种或两种及以上的组合，例如通过java语言实现的jar，在jar包内可包括其对应的资源文件，可通过封装的形式形成所述前端模块，其它类型的资源文件可以为根据具体代码封装生成。

本发明实施例的一种具体的实施场景中，所述前端资源文件还包括根据开发需求形成的资源文件，根据具体的开发需求可以实现资源文件的定制，进一步还可以实现对资源文件的平台共享。

在步骤120中，对所述前端应用模块所属的前端模块进行定义，其中，所述定义包括对所述前端模块的静态资源目录和工程化相关文件进行的配置；

在步骤110中生成的前端模块为基础的客户端模块，其所形成的模块中至少应包括静态资源目录和工程化相关文件，对静态资源目录和工程化相关文件进行的具体配置即为对所述前端模块进行的定义。

所述工程化相关文件为通过本发明的方法搭建的前端开发环境中，在开发过程中的工程所使用的工程化相关文件，其包括但不限于预编译文件、模块化打包文件以及压缩文件等。

本步骤中的定义，也可发生于前端模块的封装过程中，即对所述静态资源目录和工程化相关文件进行定义后，结合所述资源文件封装为所述前端模块。

在步骤130中，通过JavaScript包管理工具建立所述定义后的前端模块的依赖关系；

所述JavaScript包管理工具一般为npm包管理工具，通过调用npm包管理工具能够将所述前端模块存储到Web微服务平台化的前端开发框架的相应存储路径。

本步骤中，定义后的前端模块中包括了静态资源目录和工程化相关文件，通过JavaScript包管理工具读取所述静态资源目录可建立所述前端模块的依赖关系，通过对所述node.js框架下的express工具调用可对所述依赖关系进行读取。

所述前端模块可以为一种便于管理的模块包文件，以通过所述JavaScript包管理工具进行管理。

在步骤140中，通过所述Web微服务平台化的前端开发框架预建立的前端工程模板创建前端平台模块，结合所述依赖关系搭建前端开发环境。

本发明实施例一种可行的实施方式中，所述Web微服务平台化的前端开发框架中预建立的工程模板为脚手架模板，通过所述脚手架模板以及对应的配置文件能够获取待用模板，根据所述待用模板以及所述依赖关系能够快速搭建所需要的前端开发环境，定义后的封装前端模块，无须重复编译开发在新的前端开发环境中即可直接调取使用。

本发明实施例另一种可行的实施方式中，在所述node.js框架下可自建对应的模板管理工具，亦可使用yeoman管理工具管理脚手架模板，yeoman是成熟的工程脚手架管理工具，能够实现快速搭建开发环境。

本发明实施例中所述脚手架模块的意义主要为定义工程结构和基础属性设置，初始化之后，只需要将抽离出来的前端资源文件放置在对应的目录中，然后在npm模块入口文件中声明前端模块的静态资源目录和工程化相关(预编译、模块化打包压缩等)配置，即可完成前端模块的封装。

本发明实施例一种具体和实施场景中，所述前端模块脚手架装置的配置包括：

使用yeoman管理脚手架模板，以快速搭建开发环境；

创建portal-client(前端平台模块，属于前端模块中的平台模块)平台脚手架，包含工程结构、基础配置和内置脚本等；

创建app-client(前端应用模块，属于前端模块中的应用模块)应用脚手架，包含工程结构、基础配置和内置脚本等；

扩展特殊应用脚手架，针对异构开发的兼容等；

将脚手架发布至至npm私服(前端模块的管理平台)进行管理。

通过yeoman可以管理多种脚手架以适应不同的场景。

本发明实施例一种可行的实施方式中，所述基于node.js的脚手架可以根据实际需求进行定制，定制之后的脚手架工具能够快速生成相应的项目以提高开发效率。

本发明的方法，在传统的web应用开发的基础结构，例如api、web和server结构的Web微服务平台化的前端开发框架基础上增加了新的前端模块，结合图2所示，为本发明的实施例的模块结构划分示意图，其中的前端模块为现有的api、web和server的基础上增加的client模块(前端模块)，从图中可以看出，所述前端模块与原有的java工程完全解耦，使得前端模块在Web微服务平台化的前端开发框架中拥有更灵活的应用以及更多创造性应用。

结合图3所示，为本发明的前端模块在Web微服务平台化的前端开发框架下的前端模块的工程结构，其中，前端工程结构是基于npm的模块化管理实现，工程结构与模块划分也更加清晰，结合图2及图3所示，前端平台模块包括若干平台基础模块，每一平台基础模块又包括若干平台基础子模块，各模块之间的关系亦可包括前端开发环境搭建所需要的依赖关系。

结合图3所示，本发明实施例一种可行的实施方式中，所述前端模块的管理单元为npm私服，可通过nexus来搭建npm私服，client模块可以发布至私服后供其他需要的平台下载，进而提供前端模块、应用和组件的依赖管理。

结合图3所示，封装后的前端模块中的base-client为前端基础子模块；starter-portal-client为平台基础模块，app-client为业务子模块，portal-clie nt为业务平台整合模块。

所述portal-client前端构建包括：

通过内置命令对portal-client整体构建打包；

通过内置命令发布portal-client和app-client至至npm私服(前端模块的管理平台)，可供其他平台自由组合使用。

所述portal-client前端开发配置包括：

配置前端开发服务访问端口；

配置后端服务反向代理地址；

配置mock服务访问模式(mock-server、share-portal、dev-portal)；

配置平台应用的装载顺序及应用的装载模式；

通过内置命令启动前端开发服务；

通过平台具体场景及开发环境来配置个人的前端开发环境促进快速开发，联调和测试。

具体地，对前端工程portal-client和app-client的初始化，包括：

使用管理工具yeoman中的portal-client脚手架创建平台工程portal-client；

配置应用依赖，到npm私服(前端模块的管理平台)中已经存在的client模块可以直接配置后装载；

使用yeoman中app-client脚手架创建应用工程app-client；

配置应用构建模式及依赖组件；

在portal-client中使用内置命令安装client模块(包含平台工程内client及私服上的client)；

通过脚手架快速创建工程，并且快速处理应用及组件依赖，构建好本地应用的开发环境。

其中的平台基础模块内置多个基础子模块，包含前端开发服务和平台基础资源前端模块的服务器路径、资源路径和模板路径。

本发明实施例一种可行的实施方式中，在前端开发环境搭建完成后的应用过程还包括：读取Web微服务平台化的前端开发框架的配置文件以获取定义后的前端模块；对所述定义后的前端模块进行预编译、打包和压缩，并将压缩后的前端模块发送至包管理工具进行管理。

本发明实施例的一种实施场景中，在开发完成后平台会针对client模块进行预编译、打包和压缩，整个过程可由node.js框架下的gulp工具来控制，gulp工具是基于流的前端构建工具：

通过读取平台配置文件获取所有的client模块，获取需要进行预编译的模块，使用node子进程进行预编译处理；

按照client模块顺序输出静态资源到dist目录整合；

获取所有client模块中指定的模块化压缩的入口，通过rjs进行模块化压缩输出；

最后获得整合后的完整模块包文件所表示的前端代码。

本发明实施例的实施场景中，开发人员在新的开发环境中能够通过前端模块快速获取整合后的完整前端代码，而且不需要关联前端的具体工程，整个开发流程大为精简。

所述前端开发模块用于前端开发，当开发完成后，通过Web微服务平台化的前端开发框架的配置文件获取开发完成的前端模块，对所述定义后的前端模块进行预编译、打包和压缩，并将压缩后的前端模块通过搭建企业内部的npm仓库，将前端模块通过npm包管理工具的publish组件发布至搭建的至npm私服(前端模块的管理平台)，达到所有的client模块进行管理。

本发明实施例的一种实施场景下，所述打包流程包括：

利用node.js框架gulp工具构建任务前端打包上述步骤的开发流程，用gulp构建任务监控所有静态资源、js、css、sass和html；

一般地，具体步骤包括：

清除输出目录；

对于需要预编译的模板进行预编译处理；

整合平台基础依赖和应用模块的资源文件到整合目录；

整合应用模块配置的第三方资源文件到整合目录；

依据配置的js文件模块化入口进行模块化文件合并；

压缩合并后的js模块整合文件和css文件到输出目录；

删除整合目录。

本发明实施例一种可行的实施方式中，所述前端应用模块所属的前端模块进行定义，还包括对前端模块中的预编译命令以及资源映射进行配置，包括：对所述前端模块的预编译命令进行配置；和/或对所述前端模块的资源映射进行配置。

本发明实施例的一般应用场景中，通过在定义client模块时需要对所述前端模块的静态资源目录、模块化打包入口文件、预编译命令、资源映射均进行配置，通过在前端模块接入Web微服务平台化的前端开发框架的入口文件中增加相应的申明(以定义的方式或修改属性参数的方式进行)的方式，使得前端模块在node.js框架下区别于通用的npm模块，因此通过搭建企业内部的npm仓库，将前端模块的各client模块通过npm publish发布至搭建的新的前端开发环境，达到所有的client前端模块进行管理的效果。

本发明实施例一种可行的实施方式中，所述通过所述包管理工具建立所述定义后的前端模块的依赖关系，包括：

在步骤410中，获取所述前端模块的应用模块与组件间的第一依赖关系；

所述第一依赖关系为所述模块包文件(具体为业务子模块)在工程中所体现的应用模块与组件之间的依赖关系，其一般可通过资源映射的方式体现，所述第一依赖关系一般为原web微服务环境中模块包文件与web微服务之间的通信协议产生的，亦可通过调取资源映射文件的方式调取。

在步骤420中，工程化相关文件获取所述前端模块的平台模块与应用模块间的第二依赖关系；

在步骤430中，根据所述第一依赖关系和所述第二依赖关系生成所述定义后的前端模块的依赖关系。

所述第二依赖关系为模块包文件具体为平台业务模块与对应的应用模块之间的对应关系，其一般地可在封装的配置文件中体现；所述第二依赖关系可以为在新增前端模块的web微服务环境中前端模块与对应的组件或对应应用之间的通信协议产生，所述第一依赖关系与所述第二依赖关系之间可以互为补充，亦可为互为包含，通过根据所述第一依赖关系和所述第二依赖关系生成所述定义后的前端模块的依赖关系，能够避免封装后的前端模块在配置时出现依赖偏差。

本发明实施例的前端开发环境搭建完成后，通过读取平台配置文件获取所需要的client模块，按照配置文件中的顺序依次加载对应的各模块，然后获取到各模块的静态资源路径，将该路径通过执行express.static指定为开发服务的静态资源目录，这样就实现了结合上述依赖关系控制client模块的静态资源加载及相应顺序。

在平台与client模块开发过程中，还可以通过npm link命令实现开发的工程组下内部模块协同开发的问题，防止频繁的发布和装载。

通过本发明实施例搭建的前端开发环境，可以让前端人员友好的控制及调试开发，不依赖任何后端服务、数据库和中间件。

本发明实施例一种可行的实施方式中，平台提供的client模块的模板可内置多种命令完善前端工程化的结构标准、代码规范，例如

editorconfig：同化编辑器之前差异；

eslint：模块包文件所表示的代码校验；

prettier：美化代码等。

本发明实施例一种可行的实施方式中，所述方法还包括基于http-proxy(代理服务器)实现所述前端模块的服务接口调用。

本发明实施例一种可行的实施方式中，通过node.js的http-proxy模块实现前端开发服务向后端服务的反向代理，代理地址可以在配置文件中进行配置。配置文件中可以指定mock类型、服务地址及规则，mock的实现也是http-proxy代理实现。

对于需要预编译client模块的开发环境集成，需要配置文件中指定client模块的开发服务地址及静态资源映射路径，然后亦可通过http-proxy来代理这些资源路径。

前端模块在开发中调用服务接口的方式包括以下几种，其均主要基于node的http-proxy来实现：指定的mock server公用的后台服务；指定的后台开发人员的服务，Web微服务平台化的前端开发框架提供了本地缓存，可以将请求过的接口数据进行缓存，在前端完全隔离的情况下使用内置缓存数据进行开发。

图5为本发明实施例提供的一种前端开发环境的搭建装置的结构示意图，该装置可由软件和/或硬件实现，一般地集成于服务器中，可通过前端开发环境的搭建方法来实现。如图所示，本实施例可以以上述实施例为基础，提供了一种前端开发环境的搭建装置，其主要包括了封装单元510、配置定义单元520、依赖建立单元530以及环境搭建单元540。

其中的封装单元510，用于通过Web微服务平台化预建立的前端应用工程模板创建前端应用模块，在所述前端应用模块加入前端资源文件；

其中的配置定义单元520，用于对所述前端应用模块所属的前端模块进行定义，其中，所述定义包括对所述前端模块的静态资源目录和工程化相关文件进行的配置；

其中的依赖建立单元530，用于通过JavaScript包管理工具建立所述定义后的前端模块的依赖关系；

其中的环境搭建单元540，用于通过所述Web微服务平台化的前端开发框架预建立的前端工程模板创建前端平台模块，结合所述依赖关系搭建前端开发环境。

本发明实施例一种可行的实施方式中，所述装置还包括：

读取模块，用于读取Web微服务平台化的前端开发框架的配置文件以获取定义后的前端模块；

管理模块，用于对所述定义后的前端模块进行预编译、打包和压缩，并将压缩后的前端模块发送至包管理工具进行管理。

上述实施例中提供的前端开发环境的搭建装置可执行本发明中任意实施例中所提供的前端开发环境的搭建方法，具备执行该方法相应的功能模块和有益效果，未在上述实施例中详细描述的技术细节，可参见本发明任意实施例中所提供的前端开发环境的搭建方法。

通过本发明实施例提供的上述装置和方法，基于微服务的完善前端开发环境搭建完成之后，能够实现前端应用的独立解耦、前端依赖管理、纯粹的开发环境和平台化工程化的管理。

本领域技术人员可以理解，实现上述实施例方法的全部或部分流程，可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于计算机可读存储介质中。其中，所述计算机可读存储介质为磁盘、光盘、只读存储记忆体或随机存储记忆体等。

图6示例了一种电子设备的实体结构示意图，如图6所示，该电子设备可以包括：处理器(processor)810、通信接口(Communications Interface)820、存储器(memory)830和通信总线840，其中，处理器810，通信接口820，存储器830通过通信总线840完成相互间的通信。处理器810可以调用存储器830中的逻辑指令，以执行如下方法：通过Web微服务平台化预建立的前端应用工程模板创建前端应用模块，在所述前端应用模块加入前端资源文件，其中，所述前端资源文件包括源工程迁移的资源文件和根据开发需求形成的资源文件；所述前端应用模块所属的前端模块进行定义，其中，所述定义为对所述前端模块的静态资源目录和工程化相关文件进行的配置；通过JavaScript包管理工具建立所述定义后的前端模块的依赖关系；通过所述Web微服务平台化的前端开发框架预建立的前端工程模板创建前端平台模块，结合所述依赖关系搭建前端开发环境。

需要说明的是，本实施例中的电子设备在具体实现时可以为服务器，也可以为PC机，还可以为其他设备，只要其结构中包括如图6所示的处理器810、通信接口820、存储器830和通信总线840，其中处理器810，通信接口820，存储器830通过通信总线840完成相互间的通信，且处理器810可以调用存储器830中的逻辑指令以执行上述方法即可。本实施例不对电子设备的具体实现形式进行限定。

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

另一方面，本发明实施例还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现以执行上述各实施例提供的传输方法，例如包括：通过Web微服务平台化预建立的前端应用工程模板创建前端应用模块，在所述前端应用模块加入前端资源文件，其中，所述前端资源文件包括源工程迁移的资源文件和根据开发需求形成的资源文件；对所述前端应用模块所属的前端模块进行定义，其中，所述定义为对所述前端模块的静态资源目录和工程化相关文件进行的配置；通过JavaScript包管理工具建立所述定义后的前端模块的依赖关系；通过所述Web微服务平台化的前端开发框架预建立的前端工程模板创建前端平台模块，结合所述依赖关系搭建前端开发环境。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

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

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

Claims (9)

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

通过Web微服务平台化预建立的前端应用工程模板创建前端应用模块，在所述前端应用模块加入前端资源文件，其中，所述前端资源文件包括源工程迁移的资源文件和根据开发需求形成的资源文件；

对所述前端应用模块所属的前端模块进行定义，其中，所述定义为对所述前端模块的静态资源目录和工程化相关文件进行的配置；

通过JavaScript包管理工具建立所述定义后的前端模块的依赖关系，包括：获取所述前端模块的应用模块与组件间的第一依赖关系；工程化相关文件获取所述前端模块的平台模块与应用模块间的第二依赖关系；根据所述第一依赖关系和所述第二依赖关系生成所述定义后的前端模块的依赖关系；

通过所述Web微服务平台化的前端开发框架预建立的前端工程模板创建前端平台模块，结合所述依赖关系搭建前端开发环境。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

读取Web微服务平台化的前端开发框架的配置文件以获取定义后的前端模块；

对所述定义后的前端模块进行预编译、打包和压缩，并将压缩后的前端模块发送至包管理工具进行管理。

3.根据权利要求1或2所述的方法，其特征在于，所述前端应用模块所属的前端模块进行定义，还包括：

对所述前端模块的预编译命令进行配置；和/或

对所述前端模块的资源映射进行配置。

4.根据权利要求1所述的方法，其特征在于，所述方法还包括：

所述资源文件包括html、js、css、img文件中的一种或两种及以上的组合。

5.根据权利要求1所述的方法，其特征在于，所述方法还包括：基于http-proxy实现所述前端模块的服务接口调用。

6.一种前端开发环境的搭建装置，其特征在于，所述装置包括：

封装单元，用于将模块包文件从原代码工程中抽离，并将每一段独立的抽离后的模块包文件发送至Web微服务平台化的前端开发框架，以生成对应的前端模块；通过Web微服务平台化预建立的前端应用工程模板创建前端应用模块；

配置定义单元，用于所述前端应用模块所属的前端模块进行定义，其中，所述定义包括对所述前端模块的静态资源目录和工程化相关文件进行的配置；

依赖建立单元，用于通过JavaScript包管理工具建立所述定义后的前端模块的依赖关系，包括：获取所述前端模块的应用模块与组件间的第一依赖关系；工程化相关文件获取所述前端模块的平台模块与应用模块间的第二依赖关系；根据所述第一依赖关系和所述第二依赖关系生成所述定义后的前端模块的依赖关系；

环境搭建单元，用于从所述Web微服务平台化的前端开发框架中预建立的工程模板中获取待搭建环境的待用模板，根据待用模板以及所述依赖关系搭建前端开发环境。

7.根据权利要求6所述的装置，其特征在于，所述装置还包括：

读取模块，用于读取Web微服务平台化的前端开发框架的配置文件以获取定义后的前端模块；

管理模块，用于对所述定义后的前端模块进行预编译、打包和压缩，并将压缩后的前端模块发送至包管理工具进行管理。

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

处理器；

用于存储处理器可执行的指令的存储器；

其中，所述存储器存储的指令被配置为：

通过Web微服务平台化预建立的前端应用工程模板创建前端应用模块，在所述前端应用模块加入前端资源文件，其中，所述前端资源文件包括源工程迁移的资源文件和根据开发需求形成的资源文件；

所述前端应用模块所属的前端模块进行定义，其中，所述定义包括对所述前端模块的静态资源目录和工程化相关文件进行的配置；

通过JavaScript包管理工具建立所述定义后的前端模块的依赖关系，包括：获取所述前端模块的应用模块与组件间的第一依赖关系；工程化相关文件获取所述前端模块的平台模块与应用模块间的第二依赖关系；根据所述第一依赖关系和所述第二依赖关系生成所述定义后的前端模块的依赖关系；

通过所述Web微服务平台化的前端开发框架预建立的前端工程模板创建前端平台模块，结合所述依赖关系搭建前端开发环境。

9.一种非易失性计算机可读存储介质，其上存储有计算机程序指令，其特征在于，所述计算机程序指令被处理器执行时实现权利要求1至5中任意一项所述的方法。

Images