大型前端项目的构建方法及系统与流程

本发明属于平台大型项目建立及维护的技术领域，尤其涉及大型前端项目的构建方法及系统。

背景技术：

相关技术中，多用于的技术spa单页面应用架构、多页面应用架构的类似架构完成大型项目的搭建。spa(singlepageapplication)单页面应用架构是将整个前端项目作为一个整体，当业务开发完成后，将整个项目打包压缩成一个静态页面。单页面应用可以减少请求网络资源的时间，一旦加载完成后，应用内运行流畅，不再需要经常去加载网络资源。多页面应用架构。多页面应用架构是将同一项目按不同的模块组织，整个项目打包压缩的时候，不同的模块生成不同的页面。多页面应用既能保持单页面应用的运行流畅特点，也能避免首次加载资源太大导致的首次打开网页速度慢的问题。

但在spa单页面应用将整个项目打包压缩在一个静态页面中，当项目内容逐渐庞大，这个静态页面会变的非常大，首次打开页面，通过网络加载这个静态页面资源时，需要耗费很长的时间，用户等待时间长。多页面应用架构是将一个项目拆分多个模块，由于所有模块都在同一项目中同时打包压缩，必须保证所有模块都开发完成，才能完成上线。大型项目中，不同模块往往由不同的团队负责，且进度不一致。在未整理开发完成的情况下，无法做到部分上线，整体效率低。上述缺陷产生的原因在于：spa应用架构和多页面应用架构最大的局限性就在于需要整体打包压缩。最终环节集中式处理，就需要保证所有模块都已完全准备就绪，而大多数情况下，各个模块不一致的进度必然需要耗费一定的等待时间。哪怕只有一个模块未完成，其他模块都只能等待。随着模块的不断增多，越是大型的项目，耗费的等待时间就越多，极大的影响了生产效率。

本行业从业人员会对小型项目采用单页应用，对大型项目会采用多页面应用。其他从业人员不容易想到是因为业内前端一般都是分散在各个业务线中，各自有各自的业务和技术体系，在新方案出来之前，也是采用的多页面应用方案，随着组织结构的改进，将所有业务线中的小团队组织成一个综合独立团队，面临了更复杂的挑战，必须要有不同的创新方案，才想到当前方案。

由此可知，现有技术中在进行大型项目构建时，涉及多固定模块的生成及搭建，其固定模块的功能确定，同时，如涉及多个模块则要等所有固定模块都完成后，才能进行系统搭建，在未整理开发完成的情况下，无法做到部分上线，整体效率低。因此基本有个别模块未完成，其他模块都只能等待。随着模块的不断增多，越是大型的项目，耗费的等待时间就越多，极大的影响了生产效率。

技术实现要素：

本发明实施例提供大型前端项目的构建方法及系统，用于至少解决上述技术问题之一。

第一方面，本发明实施例提供大型前端项目的构建方法，包括：

步骤s101,提取初始化工程所包括的多个初始化单元中的多个关联工具。

步骤s102,为根据多个当前预设单元功能信息列表，从对应预设单元功能信息与多个关联工具信息的对应关系中，获取所述多个当前预设单元功能分别对应的所述多个当前关联工具组，将所述多个当前关联工具组以组为单位进行整合，封装为多个独立的功能单元构件，所述多个预设单元功能信息列表为所述初始化工程中可实现的多个独立功能信息的功能集合。

步骤s103,根据当前工程的功能，整合所述多个功能单元构件所生成的多个功能单元，对所述当前工程进行构建。

基于步骤s101中包括：

步骤s1011，提取初始化工程的基础目录结构中所包括的多个初始化单元。步骤s1012，提取所述多个初始化单元中的多个关联工具。

基于所述多个关联工具包括：html压缩工具、css打包工具、自动格式化工具、字体转换工具、http请求转发工具、函数封装工具、适配多国语言工具及字体加载工具、自动化构建工具。自动化构建工具。

基于所述步骤s103中包括：根据所述多个功能单元创建所述当前工程的基础目录结构。

基于步骤s101前还包括：

步骤s100,建立初始化工程，所述初始化中包括多个初始化单元功能。

基于步骤s101中还包括：所述初始化工程为基于vue技术的单页面应用项目。

基于所述步骤s101中包括：所述多个关联工具为webpack构建工具模块。

基于所述步骤s103后还包括：

步骤s104，若当前预设单元功能信息未在所述多个预设单元功能信息列表中，则将当前预设单元功能信息加入所述多个预设单元功能信息列表中，对所述多个预设单元功能信息列表进行更新。

第二方面，本发明实施例提供大型前端项目的构建系统，包括：提取关联工具单元、封装单元及项目构建单元。

所述提取关联工具单元，配置为提取初始化工程所包括的多个初始化单元中的多个关联工具。

所述封装单元,配置为根据多个当前预设单元功能信息列表，从对应预设单元功能信息与多个关联工具信息的对应关系中，获取所述多个当前预设单元功能分别对应的从所述关联工具单元中所获取的多个当前关联工具组，将所述多个当前关联工具组以组为单位进行整合，封装为多个独立的功能单元构件，所述多个预设单元功能信息列表为所述初始化工程中可实现的多个独立功能信息的功能集合。

所述项目构建单元,配置为根据当前工程的功能，整合所述封装单元中获取的所述功能单元构件所生成的多个功能单元，对所述当前工程进行构建。

基于上述构建系统，还包括：更新单元。所述更新单元，配置为若当前预设单元功能信息未在所述多个预设单元功能信息列表中，则将当前预设单元功能信息加入所述多个预设单元功能信息列表中，对所述多个预设单元功能信息列表进行更新。

第三方面，提供一种电子设备，其包括：至少一个处理器，以及与所述至少一个处理器通信连接的存储器，其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行本发明任一实施例的方法的步骤。

第四方面，本发明实施例还提供一种计算机程序产品，所述计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，所述计算机程序包括程序指令，当所述程序指令被计算机执行时，使所述计算机执行本发明任一实施例的方法的步骤。

本发明通过对初始化项目中的功能单元进行提取，构建可“通用”的构件单元，从而可灵活的应用于项目开发中。首先、由于整个项目体系由原先的一个或多个大型项目，拆分成众多独立的小型单页应用项目，使用统一的架构工具管理，当构建工具升级之后，所有项目都能同步使用，不需要多次重复开发。其次、由于各个小型项目之间具有独立业务逻辑，每个开发工程师可以快速开发和维护自己的项目，而不必担心引起其他项目的代码冲突。另外，由于项目间独立，当其中某个项目开发测试完成后，便可快速上线，而不必像大型项目一样，要所有人都完成开发测试，才能上线。不会出现一个人进度滞后，其他人都只能等待的状况。

附图说明

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

图1为本发明一实施例提供的大型前端项目的构建方法的流程图。

图2为本发明一实施例提供的另一种大型前端项目的构建方法的流程图。

图3为本发明一实施例提供的又一种大型前端项目的构建方法的流程图。

图4为本发明一实施例提供的再一种大型前端项目的构建方法的流程图。

图5为本发明一实施例提供的大型前端项目的构建系统的组合示意图。

图6为本发明另一实施例提供的大型前端项目的构建系统的组合示意图。

图7为本发明一实施例提供的大型前端项目的构建方法架构流程图。

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

具体实施方式

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

请参考图1，其示出了本发明的大型前端项目的构建方法一实施例的流程图。包括以下步骤：

步骤s101,提取多个关联工具。

本步骤中，提取初始化工程所包括的多个初始化单元中的多个关联工具。上述多个关联工具包括：html压缩工具、css打包工具、自动格式化工具、字体转换工具、http请求转发工具、函数封装工具、适配多国语言工具及字体加载工具、自动化构建工具。上述多个关联工具为webpack构建工具模块。虽然自动化构建工具是每一个项目单独配置的，改进以后，就可以做成一个公共的工具，然后每个项目通过引用的方式使用。这样能保证所有项目基于同一套体系运转。

步骤s102,封装独立的功能单元构件。

本步骤中，为根据多个当前预设单元功能信息列表，从对应预设单元功能信息与多个关联工具信息的对应关系中，获取所述多个当前预设单元功能分别对应的所述多个当前关联工具组，将所述多个当前关联工具组以组为单位进行整合，封装为多个独立的功能单元构件，所述多个预设单元功能信息列表为所述初始化工程中可实现的多个独立功能信息的功能集合。

步骤s103,工程构建。

本步骤中，根据当前工程的功能，整合所述多个功能单元构件所生成的多个功能单元，对所述当前工程进行构建。在本步骤中，还可根据所述多个功能单元创建所述当前工程的基础目录结构。从而保证项目搭建的完整性。

为保证关联工具分离的有效性，如图2所示，在一中优选的实施例中，上述步骤s101中包括：

步骤s1011，提取初始化工程的基础目录结构中所包括的多个初始化单元。步骤s1012，提取所述多个初始化单元中的多个关联工具。

如图3所示，在上述步骤s101前还包括：步骤s100。

步骤s100,建立初始化工程。

本步骤中，建立初始化工程，所述初始化中包括多个初始化单元功能。上述初始化工程为基于vue技术的单页面应用项目。上述初始化是指新建一个工程，且这个工程具有一个最基础的目录结构以及各种关联工具。这个初始化过程可以通过业内通用的工具来完成。

如图4所示，在一中优选的实施例中，步骤s103后还包括：

步骤s104，列表更新。

本步骤中，若当前预设单元功能信息未在所述多个预设单元功能信息列表中，则将当前预设单元功能信息加入所述多个预设单元功能信息列表中，对所述多个预设单元功能信息列表进行更新。

第二方面，本发明实施例提供大型前端项目的构建系统，如图5所示，包括：提取关联工具单元101、封装单元201及项目构建单元301。

所述提取关联工具单元101，配置为提取初始化工程所包括的多个初始化单元中的多个关联工具。

所述封装单元201,配置为根据多个当前预设单元功能信息列表，从对应预设单元功能信息与多个关联工具信息的对应关系中，获取所述多个当前预设单元功能分别对应的从所述提取关联工具单元101中所获取的多个当前关联工具组，将所述多个当前关联工具组以组为单位进行整合，封装为多个独立的功能单元构件，所述多个预设单元功能信息列表为所述初始化工程中可实现的多个独立功能信息的功能集合。

所述项目构建单元301,配置为根据当前工程的功能，整合所述封装单元201中获取的所述功能单元构件所生成的多个功能单元，对所述当前工程进行构建。

如图6所示，基于上述构建系统，还包括：更新单元401。所述更新单元，配置为若当前预设单元功能信息未在所述多个预设单元功能信息列表中，则将当前预设单元功能信息加入所述多个预设单元功能信息列表中，对所述多个预设单元功能信息列表进行更新。

应当理解，图5中记载的诸单元与上述大型前端项目的构建方法中的各个步骤相对应。由此，上文针对方法描述的操作和特征以及相应的技术效果同样适用于图5中的诸单元，在此不再赘述。

值得注意的是，本公开的实施例中的单元并不用于限制本公开的方案，另外，还可以通过硬件处理器来实现相关功能模块，例如分离模块也可以用处理器实现，在此不再赘述。

在本发明的另一种实施方式中，提供了另一种大型前端项目的构建方法，在本实施例中的所出现的英文缩写的英文全称及中文定义如下。

1.spa:singlepageapplication单页面应用。

2.vue:一种前端开发技术框架。

3.webpack:一种工程中打包压缩的工具。

如图7所示，主要的过程分为以下四步。

1、初始化，首先会初始化一个基于vue技术的单页面应用项目，该项目具备整个系统工程所有的构建模块，业务模块，资源模块。但该项目不能有具体的业务逻辑，作为一个基础项目存在。上述初始化是指新建一个工程，且这个工程具有一个最基础的目录结构以及各种关联工具。这个初始化过程可以通过业内通用的工具来完成。

2、抽离初始化项目的webpack构建模块，通过改造封装，将该webpack模块封装成一个可独立使用的构建工具，该工具需具备可安装、可扩展的特点。然后将该工具引入初始化项目中，通过多次调试，保证该工具的可用性和稳定性。本步骤中，改变工程项目的目录结构和各种工具之间的协作的方式。上述多个关联工具包括：html压缩工具、css打包工具、自动格式化工具、字体转换工具、http请求转发工具、函数封装工具、适配多国语言工具及字体加载工具、自动化构建工具。并包括自动化构建工具，原先是每一个项目单独配置的，改进以后，就可以做成一个公共的工具，然后每个项目通过引用的方式使用。这样能保证所有项目基于同一套体系运转。上述“改造封装”如改造之后就把html压缩工具和css打包工具整合到一个工具里了。

3、扩展项目，根据业务发展需要，复制初始化项目创建新项目，然后基于新项目实现业务逻辑，通过复制和创建新项目，不断的丰富项目体系来满足复杂的业务需求。上述步骤1是使用业内通用工具，步骤2相当于改进了通用工具，使之变成了适合当前项目特点的工具。开始扩展使用到多个项目中，形成统一的体系。

4、更新构建工具，由于众多项目构建模块的要求不一样，需要不断综合多个项目的需求，通过规划和设计，不断升级构建工具。

因此，本发明结合多页面应用的统一性和单页面应用的灵活性。将之前的多页面应用拆分成了多个单页面应用，同时将每个单页应用的核心打包构建模块都抽离成后改造成公共构建工具，并被所有项目引入使用。这样既能利用公共项目统一管理其他项目，也保证了每个独立项目业务的独立性和灵活性。

本发明的备选方案为：整理业务体系，将相近的业务做成一个多页面应用，整体项目体系中有多个大型多页面应用。其基于现有架构扩展即可，不需要开发新的工具。并技术实现简单。

在另一些实施例中，本发明实施例还提供了一种非易失性计算机存储介质，计算机存储介质存储有计算机可执行指令，该计算机可执行指令可执行上述任意方法实施例中的大型前端项目的构建及使用方法；

作为一种实施方式，本发明的非易失性计算机存储介质存储有计算机可执行指令，计算机可执行指令设置为：

步骤s101,提取初始化工程所包括的多个初始化单元中的多个关联工具。

步骤s102,为根据多个当前预设单元功能信息列表，从对应预设单元功能信息与多个关联工具信息的对应关系中，获取所述多个当前预设单元功能分别对应的所述多个当前关联工具组，将所述多个当前关联工具组以组为单位进行整合，封装为多个独立的功能单元构件，所述多个预设单元功能信息列表为所述初始化工程中可实现的多个独立功能信息的功能集合。

步骤s103,根据当前工程的功能，整合所述多个功能单元构件所生成的多个功能单元，对所述当前工程进行构建。

基于步骤s101中包括：

步骤s1011，提取初始化工程的基础目录结构中所包括的多个初始化单元。步骤s1012，提取所述多个初始化单元中的多个关联工具。

基于所述多个关联工具包括：html压缩工具、css打包工具、自动格式化工具、字体转换工具、http请求转发工具、函数封装工具、适配多国语言工具及字体加载工具、自动化构建工具。自动化构建工具。

基于所述步骤s103中包括：根据所述多个功能单元创建所述当前工程的基础目录结构。

基于步骤s101前还包括：

步骤s100,建立初始化工程，所述初始化中包括多个初始化单元功能。

基于步骤s101中还包括：所述初始化工程为基于vue技术的单页面应用项目。

基于所述步骤s101中包括：所述多个关联工具为webpack构建工具模块。

基于所述步骤s103后还包括：

步骤s104，若当前预设单元功能信息未在所述多个预设单元功能信息列表中，则将当前预设单元功能信息加入所述多个预设单元功能信息列表中，对所述多个预设单元功能信息列表进行更新。

作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块，如本发明实施例中的大型前端项目的构建及使用方法对应的程序指令/模块。一个或者多个程序指令存储在非易失性计算机可读存储介质中，当被处理器执行时，执行上述任意方法实施例中的大型前端项目的构建及使用方法。

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

本发明实施例还提供一种计算机程序产品，计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，计算机程序包括程序指令，当程序指令被计算机执行时，使计算机执行上述任一项大型前端项目的构建及使用方法。

图8是本发明实施例提供的电子设备的结构示意图，如图8所示，该设备包括：一个或多个处理器810以及存储器820，图8中以一个处理器810为例。大型前端项目的构建及使用方法的设备还可以包括：输入装置830和输出装置840。处理器810、存储器820、输入装置830和输出装置840可以通过总线或者其他方式连接，图8中以通过总线连接为例。存储器820为上述的非易失性计算机可读存储介质。处理器810通过运行存储在存储器820中的非易失性软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例大型前端项目的构建及使用方法。输入装置830可接收输入的数字或字符信息，以及产生与信息投放装置的用户设置以及功能控制有关的键信号输入。输出装置840可包括显示屏等显示设备。

上述产品可执行本发明实施例所提供的方法，具备执行方法相应的功能模块和有益效果。未在本实施例中详尽描述的技术细节，可参见本发明实施例所提供的方法。

作为一种实施方式，上述电子设备可以应用于大型前端项目的构建及使用系统及平台中，包括：至少一个处理器；以及，与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够：

步骤s101,提取初始化工程所包括的多个初始化单元中的多个关联工具。

步骤s102,为根据多个当前预设单元功能信息列表，从对应预设单元功能信息与多个关联工具信息的对应关系中，获取所述多个当前预设单元功能分别对应的所述多个当前关联工具组，将所述多个当前关联工具组以组为单位进行整合，封装为多个独立的功能单元构件，所述多个预设单元功能信息列表为所述初始化工程中可实现的多个独立功能信息的功能集合。

步骤s103,根据当前工程的功能，整合所述多个功能单元构件所生成的多个功能单元，对所述当前工程进行构建。

基于步骤s101中包括：

步骤s1011，提取初始化工程的基础目录结构中所包括的多个初始化单元。步骤s1012，提取所述多个初始化单元中的多个关联工具。

基于所述多个关联工具包括：html压缩工具、css打包工具、自动格式化工具、字体转换工具、http请求转发工具、函数封装工具、适配多国语言工具及字体加载工具、自动化构建工具。自动化构建工具。

基于所述步骤s103中包括：根据所述多个功能单元创建所述当前工程的基础目录结构。

基于步骤s101前还包括：

步骤s100,建立初始化工程，所述初始化中包括多个初始化单元功能。

基于步骤s101中还包括：所述初始化工程为基于vue技术的单页面应用项目。

基于所述步骤s101中包括：所述多个关联工具为webpack构建工具模块。

基于所述步骤s103后还包括：

步骤s104，若当前预设单元功能信息未在所述多个预设单元功能信息列表中，则将当前预设单元功能信息加入所述多个预设单元功能信息列表中，对所述多个预设单元功能信息列表进行更新。

本发明实施例的电子设备以多种形式存在，包括但不限于：

(1)移动通信设备：这类设备的特点是具备移动通信功能，并且以提供话音、数据通信为主要目标。这类终端包括:智能手机(例如iphone)、多媒体手机、功能性手机，以及低端手机等。

(2)超移动个人计算机设备：这类设备属于个人计算机的范畴，有计算和处理功能，一般也具备移动上网特性。这类终端包括：pda、mid和umpc设备等，例如ipad。

(3)便携式娱乐设备：这类设备可以显示和播放多媒体内容。该类设备包括:音频、视频播放器(例如ipod)，掌上游戏机，电子书，以及智能玩具和便携式车载导航设备。

(4)服务器:提供计算服务的设备，服务器的构成包括处理器、硬盘、内存、系统总线等，服务器和通用的计算机架构类似，但是由于需要提供高可靠的服务，因此在处理能力、稳定性、可靠性、安全性、可扩展性、可管理性等方面要求较高。

(5)其他具有数据交互功能的电子装置。

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

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

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。