一种项目打包方法、装置及计算机设备

技术领域

本发明涉及数据处理技术领域，具体涉及项目打包方法、装置及计算机设备。

背景技术

目前基于模块打包器(web pack)的前端项目工程，绝大部分需要用到UI组件库中的UI组件，相关技术中的前端项目工程进行打包时，引入UI组件的方法是全量引入UI组件库中的组件，但是一个前端项目工程需要的只是UI组件库中的部分组件，并不是需要UI组件库中的所有UI组件，这样在对项目打包时就会将没有用到的UI组件也一起打包，使得打包后的产物体积太大，占用存储空间大。

发明内容

因此，本发明要解决的技术问题在于克服现有技术中全量引入组件导致对项目进行打包时，打包后的产物体积大、占用存储空间大的缺陷，从而提供一种项目打包方法、装置及计算机设备。

根据第一方面，本发明公开了一种项目打包方法，包括如下步骤：获取目标项目的待打包代码；将所述待打包代码打包为业务文件包和框架文件包；获取所述业务文件包中的UI组件名称；根据预设的UI组件依赖映射表、所述业务文件包中的UI组件名称确定所述目标项目所需的UI组件；根据所述目标项目所需的UI组件重置所述业务文件包中的UI组件引入文件并进行打包。

可选地，所述获取所述业务文件包中的UI组件名称，包括：获取预设插件；根据所述预设插件将所述业务文件包中注释代码中的UI组件名称去除。

可选地，所述UI组件依赖映射表通过如下步骤建立：获取UI组件库的源代码；根据所述UI组件库的源代码的头部文件确定UI组件依赖关系；根据所述UI组件依赖关系构建所述UI组件依赖映射表。

可选地，在所述获取目标项目的待打包代码之前，所述方法还包括：获取UI组件库；响应于组件调用请求，根据所述UI组件库中的UI组件确定所述目标项目的待打包代码。

可选地，所述UI组件名称的获取方法包括：js正则表达式匹配和ast抽象语法树分析。

根据第二方面，本发明还公开了一种项目打包装置，包括：第一获取模块，用于获取目标项目的待打包代码；第一打包模块，用于将所述待打包代码打包为业务文件包和框架文件包；第二获取模块，用于获取所述业务文件包中的UI组件名称；待打包组件确定模块，用于根据预设的UI组件依赖映射表、所述业务文件包中的UI组件名称确定所述目标项目所需的UI组件；第二打包模块，用于根据所述目标项目所需的UI组件重置所述业务文件包中的UI组件引入文件并进行打包。

可选地，所述第二获取模块包括：第二获取子模块，用于获取预设插件；去除模块，用于根据所述预设插件将所述业务文件包中注释代码中的UI组件名称去除。

可选地，所述装置还包括：第三获取模块，用于获取UI组件库的源代码；组件依赖关系确定模块，用于根据所述UI组件库的源代码的头部文件确定UI组件依赖关系；构建模块，用于根据所述UI组件依赖关系构建所述UI组件依赖映射表。

根据第三方面，本发明还公开了一种计算机设备，包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器执行如第一方面或第一方面任一可选实施方式所述的项目打包方法的步骤。

根据第四方面，本发明还公开了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如第一方面或第一方面任一可选实施方式所述的项目打包方法的步骤。

本发明技术方案，具有如下优点：

本发明提供的项目打包方法及装置，通过获取目标项目的待打包代码，将待打包代码打包为业务文件包和框架文件包；获取业务文件包中的UI组件名称，根据预设的UI组件依赖映射表、业务文件包中的UI组件名称确定目标项目所需的UI组件，根据目标项目所需的UI组件重置业务文件包中的UI组件引入文件并进行打包。本发明在进行项目打包时，根据预设的组件依赖映射表、业务文件包中的组件名称确定待按需引入组件，进而只将项目中用到的组件进行打包，将现有技术中的全量打包变为按需打包，打包产物体积变小，节约了存储空间，减少了页面加载体积，加快了加载速度。

附图说明

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

图1为本发明实施例中项目打包方法的一个具体示例的流程图；

图2为本发明实施例中项目打包装置的一个具体示例的原理框图；

图3为本发明实施例中计算机设备的一个具体示例图。

具体实施方式

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

在本发明的描述中，需要说明的是，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。

在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，还可以是两个元件内部的连通，可以是无线连接，也可以是有线连接。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

此外，下面所描述的本发明不同实施方式中所涉及的技术特征只要彼此之间未构成冲突就可以相互结合。

本发明实施例公开了一种项目打包方法，如图1所示，包括如下步骤：

S11：获取目标项目的待打包代码。

示例性地，在本发明实施例中，该目标项目指的是一个前端项目，其待打包代码可以存储在存储器，使用时直接从存储器中获取，也可以在运行环境中直接打开运行。本发明实施例对该目标项目的待打包代码不作具体限定，本领域技术人员可以根据实际情况确定。

S12：将待打包代码打包为业务文件包和框架文件包。

示例性地，该框架文件包是框架文件的集合，该框架文件指的是除业务文件以外的文件，框架文件可以包括引用的插件、项目框架级别的代码文件等。本发明实施例对该框架文件不作具体限定，本领域技术人员可以根据实际情况确定。业务文件包是业务文件的集合，该业务文件指的是路由配置中路由所对应的文件及其依赖的文件。

在本发明实施例中，将待打包代码分类打包为业务文件包和框架文件包使用的是webpack的插件webpack.optimize.CommonsChunkPlugin。例如，通过路径筛选把相应的文件全打包成vuedor.js文件(即框架文件包)，还比如将文件模块node_modules路径下的所有文件，打包为src/home/index.vue业务文件包。

S13：获取业务文件包中的UI组件名称。

示例性地，该UI组件名称指的是业务文件中直接引用的UI组件，其可以为英文名称(例如，Loading)、也可以为中文名称(例如，支付)，还可以为自定义的名称，本发明实施例对该UI组件名称不作具体限定，本领域技术人员可以根据命名的实际情况确定。该UI组件名称可以利用自己编写的自定义的转换器(如ox-components-transform-loader)来获取，具体的获取方法可以包括：js正则表达式匹配、ast抽象语法树分析等，本发明实施例对该UI组件名称的获取方法不作具体限定，本领域技术人员可以根据实际情况确定。

S14：根据预设的UI组件依赖映射表、业务文件包中的UI组件名称确定目标项目所需的UI组件。

示例性地，该预设的UI组件依赖映射表可以提前根据UI组件库构建好，其具体构建方法如下：

首先，获取UI组件库的源代码。该UI组件库的源代码可以直接利用调用函数调用获取。其次，UI组件库的源代码的头部文件记载了各个UI组件的引用关系，根据UI组件库的源代码的头部文件确定UI组件依赖关系；根据UI组件依赖关系构建UI组件依赖映射表。

根据预设的UI组件依赖映射表、业务文件包中的组件名称确定目标项目所需的UI组件具体可以为根据上述获取到的UI组件名称与预设的UI组件依赖映射表确定每一个UI组件依赖的UI组件，在本发明实施例中，通过插件ox-components-transform-loader确定每一个UI组件依赖的UI组件，然后将上述获取到的UI组件名称对应的UI组件以及一个UI组件依赖的UI组件一起确定为目标项目所需的UI组件。

当确定好上述获取到的UI组件名称对应的UI组件的依赖UI组件时，则通过node的操作文件方法把所有UI组件名称输出到一个中间文件中，例如，[‘el-slider’，‘el-switch’，‘el-button’]，其中，el-slider、el-switch和el-button均为UI组件名称。

S15：根据目标项目所需的UI组件重置业务文件包中的UI组件引入文件并进行打包。

示例性地，根据目标项目所需的UI组件将业务文件包中的全量引入UI组件打包重置为按需引入打包，即将主函数从全量引入修改为按需引入。根据组件类型的不同，组件的按需引入类型可以包括：普通组件引入、指令引入、css引入、全局方法引入等。本发明实施例对该组件引入的类型不作具体限定，本领域技术人员可以根据实际情况确定。

本发明提供的项目打包方法，通过获取目标项目的待打包代码，将待打包代码打包为业务文件包和框架文件包；获取业务文件包中的UI组件名称，根据预设的UI组件依赖映射表、业务文件包中的UI组件名称确定目标项目所需的UI组件，根据目标项目所需的UI组件重置业务文件包中的UI组件引入文件并进行打包。本发明在进行项目打包时，根据预设的组件依赖映射表、业务文件包中的组件名称确定待按需引入组件，进而只将项目中用到的组件进行打包，将现有技术中的全量打包变为按需打包，打包产物体积变小，节约了存储空间，减少了页面加载体积，加快了加载速度。

作为本发明实施例一个可选实施方式，当业务文件中的注释中含有UI组件名称，且在打包时未去掉注释时，在后续用ox-components-transform-loader对业务文件进行转换时，会把注释中的UI组件名称提取出来，导致使用的UI组件统计不准确，故需要在统计UI组件名称前将注释中的UI组件名称去掉，上述步骤S13包括：

首先，获取预设插件。

示例性地，该预设插件可以为uglifyjs-webpack-plugin，其可以直接从webpack中调用。本发明实施例对该预设插件不作具体限定，本领域技术人员可以根据实际情况确定。

其次，根据预设插件将业务文件包中注释代码中的UI组件名称去除。

本发明实施例通过将业务文件的注释中含有UI组件名称去除掉，保证了该目标项目使用的UI组件名称的统计正确性，同时在打包时进一步减少了无用UI组件，进一步减小了打包产物的体积。

作为本发明实施例一个可选实施方式，为了保证开发人员的开发体验，在上述步骤S11之前，该项目打包方法还包括：

首先，获取UI组件库。该UI组件库可以直接利用调用函数调用。在本发明实施例中，在开发人员开发时全量引入UI组件。其次，响应于组件调用请求，根据UI组件库中的UI组件确定目标项目的待打包代码。

示例性地，在研发人员开发时，若需要用到UI组件库中的UI组件，直接调用其的组件即可，根据组件调用请求对应的UI组件确定目标项目的待打包代码。

本发明实施例通过在开发时全量引入组件，在打包时按需引入，既兼顾了开发者的开发体验，让开发者专注于业务开发无需过多关注UI组件库引入的打包编译细节的同时又保证了打包产物的减重效果。

本发明实施例还公开了一种项目打包装置，如图2所示，包括：

第一获取模块21，用于获取目标项目的待打包代码；具体实现方式见上述实施例中步骤S11的相关描述，在此不再赘述。

第一打包模块22，用于将待打包代码打包为业务文件包和框架文件包；具体实现方式见上述实施例中步骤S12的相关描述，在此不再赘述。

第二获取模块23，用于获取业务文件包中的UI组件名称；具体实现方式见上述实施例中步骤S13的相关描述，在此不再赘述。

待打包组件确定模块24，用于根据预设的UI组件依赖映射表、业务文件包中的UI组件名称确定目标项目所需的UI组件；具体实现方式见上述实施例中步骤S14的相关描述，在此不再赘述。

第二打包模块25，用于根据目标项目所需的UI组件重置业务文件包中的UI组件引入文件并进行打包。具体实现方式见上述实施例中步骤S15的相关描述，在此不再赘述。

本发明提供的项目打包装置，通过获取目标项目的待打包代码，将待打包代码打包为业务文件包和框架文件包；获取业务文件包中的UI组件名称，根据预设的UI组件依赖映射表、业务文件包中的UI组件名称确定目标项目所需的UI组件，根据目标项目所需的UI组件重置业务文件包中的UI组件引入文件并进行打包。本发明在进行项目打包时，根据预设的组件依赖映射表、业务文件包中的组件名称确定待按需引入组件，进而只将项目中用到的组件进行打包，将现有技术中的全量打包变为按需打包，打包产物体积变小，节约了存储空间，减少了页面加载体积，加快了加载速度。

作为本发明实施例一个可选实施方式，上述第二获取模块23包括：

第二获取子模块，用于获取预设插件；具体实现方式见上述实施例中对应的步骤的相关描述，在此不再赘述。

去除模块，用于根据预设插件将业务文件包中注释代码中的UI组件名称去除。具体实现方式见上述实施例中对应的步骤的相关描述，在此不再赘述。

作为本发明实施例一个可选实施方式，该项目打包装置还包括：

第三获取模块，用于获取UI组件库的源代码；具体实现方式见上述实施例中对应的步骤的相关描述，在此不再赘述。

组件依赖关系确定模块，用于根据UI组件库的源代码的头部文件确定UI组件依赖关系；具体实现方式见上述实施例中对应的步骤的相关描述，在此不再赘述。

构建模块，用于根据UI组件依赖关系构建UI组件依赖映射表。具体实现方式见上述实施例中对应的步骤的相关描述，在此不再赘述。

作为本发明实施例一个可选实施方式，该项目打包装置还包括：

首先，获取UI组件库。具体实现方式见上述实施例中对应的步骤的相关描述，在此不再赘述。

其次，响应于组件调用请求，根据UI组件库中的组件确定目标项目的待打包代码。

作为本发明实施例一个可选实施方式，UI组件名称的获取方法包括：js正则表达式匹配和ast抽象语法树分析。具体实现方式见上述实施例中对应的步骤的相关描述，在此不再赘述。

本发明实施例还提供了一种计算机设备，如图3所示，该计算机设备可以包括处理器31和存储器32，其中处理器31和存储器32可以通过总线或者其他方式连接，图3中以通过总线连接为例。

处理器31可以为中央处理器(Central Processing Unit，CPU)。处理器31还可以为其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field－Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等芯片，或者上述各类芯片的组合。

存储器32作为一种非暂态计算机可读存储介质，可用于存储非暂态软件程序、非暂态计算机可执行程序以及模块，如本发明实施例中的项目打包方法对应的程序指令/模块(例如，图2所示的第一获取模块21、第一打包模块22、第二获取模块23、待打包组件确定模块24和第二打包模块25)。处理器31通过运行存储在存储器32中的非暂态软件程序、指令以及模块，从而执行处理器的各种功能应用以及数据处理，即实现上述方法实施例中的项目打包方法。

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

所述一个或者多个模块存储在所述存储器32中，当被所述处理器31执行时，执行如图1所示实施例中的项目打包方法。

上述计算机设备具体细节可以对应参阅图1所示的实施例中对应的相关描述和效果进行理解，此处不再赘述。

本领域技术人员可以理解，实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述存储介质可为磁碟、光盘、只读存储记忆体(Read－Only Memory，ROM)、随机存储记忆体(Random AccessMemory，RAM)、快闪存储器(Flash Memory)、硬盘(Hard Disk Drive，缩写：HDD)或固态硬盘(Solid－State Drive，SSD)等；所述存储介质还可以包括上述种类的存储器的组合。

虽然结合附图描述了本发明的实施例，但是本领域技术人员可以在不脱离本发明的精神和范围的情况下作出各种修改和变型，这样的修改和变型均落入由所附权利要求所限定的范围之内。