一种前端文件自适配打包的方法、设备及存储介质与流程

1.本技术涉及web前端开发技术领域，尤其涉及一种前端文件自适配打包的方法、设备及存储介质。


背景技术：

2.随着web业务的不断复杂化和多元化，传统前端技术难以支撑复杂的业务逻辑，开发费时费力，后期维护成本巨大。伴随着这些问题，前端组件化，模块化，工程化应运而生，它使用软件工程的技术和方法来进行前端的开发变得规范化、标准化。
3.webpack是一个模块打包器，在前端自动化构建中有着举足轻重的地位。在没有模块打包器以前，我们通过手动的引入，实现代码的整合。代码只是一个个的文件，相互之间没有内在依赖关系，因此，引入有着严格的先后顺序。在模块打包器出现之后，自动化构建工具接管了我们手工的代码组织，给我们带来了便利。
4.但它也有一些弊端，有时候它还会将很多无用的代码也组织到最终的打包包裹中，因此，目前亟需一种可以根据个性化需求对前端文件进行自适配打包的方法。


技术实现要素：

5.本技术实施例提供了一种前端文件自适配打包的方法、设备及存储介质，用以解决现有技术缺少一种可以根据个性化需求对前端文件进行自适配打包的方法，从而无法适配公共项目下多个性需求的技术问题。
6.第一方面，本技术实施例提供了一种前端文件自适配打包的方法，其特征在于，方法包括：响应于前端文件打包指令，在前端文件中确定构成页面必要组件的必要文件，以及确定构成页面特色组件的特色需求文件；其中，前端文件打包指令包括打包指令与运行指令；将特色需求文件的名称修改为包含特色标志的特色环境变量名称；其中，特色标志用于区分必要文件与特色需求文件；基于预设的特色环境变量需求信息，确定待打包的特色需求文件，并将待打包的特色需求文件与必要文件进行打包。
7.本技术实施例提供的一种前端文件自适配打包的方法，在需要对前端文件进行自适配打包的情况下，首先将前端文件进行分类，分为必要文件与特色文件，然后将特色文件进行名称修改，以方便区分两类文件；然后根据预设的特色环境变量需求信息，对前端文件进行自适配打包。本技术实施例通过上述方法使打包的包裹仅包含我们所需的前端文件，避免了很多无用的代码文件组织到最终的包裹中，从而影响加载速度。
8.在本技术的一种实现方式中，在前端文件中确定构成页面必要组件的必要文件，以及确定构成页面特色组件的特色需求文件，具体包括：基于预设的若干个必要组件入口标识，在前端文件中确定对应的若干个必要组件入口文件；以及，基于预设的若干个特色组件入口标识，在前端文件中确定对应的若干个特色组件入口文件；通过必要组件入口文件与特色组件入口文件，分别确定构成页面必要组件的必要文件与构成页面特色组件的特色需求文件；其中，必要组件入口文件用于存储运行对应组件的主函数，特色组件入口文件用
于存储运行对应组件的主函数。
9.在本技术的一种实现方式中，通过必要组件入口文件与特色组件入口文件，分别确定构成页面必要组件的必要文件与构成页面特色组件的特色需求文件，具体包括：确定必要组件入口文件为构成页面必要组件的必要文件，并确定必要组件入口文件中链接的前端文件为构成页面必要组件的必要文件；以及，确定特色组件入口前端文件为构成页面特色组件的特色需求文件，并确定特色组件入口文件中链接的文件为构成页面特色组件的特色需求文件。
10.在本技术的一种实现方式中，在响应于前端文件打包指令之前，方法还包括：建立前端文件库，并将前端文件存储于前端文件库；在前端文件库中建立索引目录。
11.在本技术的一种实现方式中，在建立前端文件库之后，方法还包括：根据特色页面需求信息，确定自适配打包的特色环境变量需求信息，并将特色环境变量需求信息存储于前端文件库中；其中，特色环境变量需求信息中包含若干个特色环境变量名称。
12.在本技术的一种实现方式中，基于预设的特色环境变量需求信息，确定待打包的特色需求文件，并将待打包的特色需求文件与必要文件进行打包，具体包括：将特色环境变量需求信息注入到前端文件库中，以确定待打包的特色需求文件；确定前端文件打包指令是否为运行打包指令；在确定前端文件打包指令是运行打包指令的情况下，将待打包的特色需求文件对应的特色环境变量名称与必要文件对应的环境变量名称定义为全局变量；将待打包的特色需求文件与必要文件进行打包，并将打包完成包裹存储于系统内存。
13.在本技术的一种实现方式中，方法还包括：在确定前端文件打包指令是运行打包指令的情况下，将待打包的特色需求文件与必要文件进行打包，并将打包完成包裹存储于系统磁盘中。
14.在本技术的一种实现方式中，将特色环境变量需求信息注入到前端文件库中，以确定待打包的特色需求文件，具体包括：响应于环境变量注入指令，将特色环境变量需求信息注入到前端文件库中；基于特色标志，前端文件库将特色需求文件提取到前端文件池中，并将特色环境变量需求信息中包含的若干个特色环境变量名称与前端文件池中特色需求文件进行以一一匹配，以确定待打包的特色需求文件。
15.第二方面，本技术实施例还提供了一种前端文件自适配打包的设备，其特征在于，设备包括：处理器；及存储器，其上存储有可执行代码，当可执行代码被执行时，使得处理器执行如权利要求1-8任一项的一种方法。
16.第三方面，本技术实施例还提供了一种前端文件自适配打包的非易失性计算机存储介质，存储有计算机可执行指令，其特征在于，计算机可执行指令设置为：响应于前端文件打包指令，在前端文件中确定构成页面必要组件的必要文件，以及确定构成页面特色组件的特色需求文件；其中，前端文件打包指令包括打包指令与运行指令；将将特色需求文件的名称修改为包含特色标志的特色环境变量名称；其中，特色标志用于区分必要文件与特色需求文件；基于预设的特色环境变量需求信息，确定待打包的特色需求文件，并将待打包的特色需求文件与必要文件进行打包。
附图说明
17.此处所说明的附图用来提供对本技术的进一步理解，构成本技术的一部分，本申
请的示意性实施例及其说明用于解释本技术，并不构成对本技术的不当限定。在附图中：
18.图1为本技术实施例提供的一种前端文件自适配打包的方法流程图；
19.图2为本技术实施例提供的一种前端文件自适配打包的设备内部结构示意图。
具体实施方式
20.为使本技术的目的、技术方案和优点更加清楚，下面将结合本技术具体实施例及相应的附图对本技术技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
21.本技术实施例提供了一种前端文件自适配打包的方法、设备及存储介质，用以解决现有技术缺少一种可以根据个性化需求对前端文件进行自适配打包的方法，从而无法适配公共项目下多个性需求的技术问题。
22.下面通过附图对本技术实施例提出的技术方案进行详细的说明。
23.图1为本技术实施例提供的一种前端文件自适配打包的方法流程图。如图1所示，本技术实施例提供的一种前端文件自适配打包的方法，主要包括以下步骤：
24.步骤101、响应于前端文件打包指令，在前端文件中确定构成页面必要组件的必要文件，以及确定构成页面特色组件的特色需求文件。
25.需要说明的是，为了给本技术实施例提供的一种前端文件自适配打包的方法提供一个数据存储环境，本技术实施例在响应于前端文件打包指令之前，需要建立一个前端文件库，并将前端文件存储于前端文件库。另外，为了方便后期对前端文件的更新及维护，本技术实施例还需要在前端文件库中建立索引目录。
26.在本技术的一个实施例中，在建立前端文件库之后，为了确保在进行自适配打包时有依据去选择对应的特色需求文件，还需要在响应于前端文件打包指令之前，根据特色页面需求信息，确定自适配打包的特色环境变量需求信息，并将特色环境变量需求信息存储于前端文件库中。
27.可以理解的是，特色页面需求信息为需要计划在页面中添加何种特色组件的信息，特色环境变量需求信息为根据特色页面需求信息确定的具体需要的特色组件信息或者某一特色组件的部分信息。其中，特色环境变量需求信息中包含若干个特色环境变量名称。另外，还可以理解的是，可以由若干个特色页面需求信息确定若干个特色环境变量需求信息，并将其存储在前端文件库中以供选择。
28.在本技术的一个实施例中，在建立前端文件库，并将前端文件及特色环境变量需求信息存储在前端文件库之后，如果接收到前端文件打包指令，首先基于预设的若干个必要组件入口标识，在前端文件中确定对应的若干个必要组件入口文件；以及，基于预设的若干个特色组件入口标识，在前端文件中确定对应的若干个特色组件入口文件；其中，必要组件入口文件用于存储运行对应组件的主函数，特色组件入口文件用于存储运行对应组件的主函数。然后，先将确定的必要组件入口文件确定为构成页面必要组件的必要文件，将确定特色组件入口文件确定为为构成页面特色组件的特色需求文件。再将必要组件入口文件中链接的前端文件确定为构成页面必要组件的必要文件，以及将特色组件入口文件中链接的前端文件确定为构成页面特色组件的特色需求文件。
29.可以理解的是，前端文件即为构成页面所需要的文件，例如代码文件，图片，文本等；必要组件即为构成页面必须存在的组件或者是规定的页面中的固定组件，特色组件即为构成页面特有组件，可以根据需求或喜好进行调整的组件；而必要文件则为构成必要组件所涉及的前端文件，特色需求文件则为构成特色组件所涉及的前端文件。
30.需要说明的是，由于在必要组件入口文件中链接的前端文件中还可能链接有其他前端文件，因此，将必要组件入口文件中链接的前端文件确定为构成页面必要组件的必要文件，以及将特色组件入口文件中链接的前端文件确定为构成页面特色组件的特色需求文件，是将组件入口文件中链接的前端文件，以及该前端文件中链接的各级前端文件均确定为必要文件或者特色需求文件。
31.还需要说明的是，本技术提供的一种前端文件自适配打包的方法，可以用于应用开发阶段前端文件的打包，也可以用于应用启动阶段前端文件的打包。因此，前端文件打包指令可以包括两类：打包指令与运行指令。其中，打包指令对应于应用开发阶段前端文件的打包，运行指令应于应用启动阶段前端文件的打包。
32.步骤102、将特色需求文件的名称修改为包含特色标志的特色环境变量名称。
33.在本技术的一个实施例中，在前端文件中确定构成页面必要组件的必要文件，以及确定构成页面特色组件的特色需求文件之后，将特色需求文件的名称修改为包含特色标志的特色环境变量名称；其中，特色标志用于区分必要文件与特色需求文件。
34.步骤103、基于预设的特色环境变量需求信息，确定待打包的特色需求文件，并将待打包的特色需求文件与必要文件进行打包。
35.在本技术的一个实施例中，在将特色需求文件的名称修改为包含特色标志的特色环境变量名称之后，会触发环境变量注入指令，基于环境变量注入指令，将特色环境变量需求信息注入到前端文件库中。然后前端文件库会基于特色标志将所有的特色需求文件提取到前端文件池中，并将特色环境变量需求信息中包含的若干个特色环境变量名称与前端文件池中特色需求文件进行以一一匹配，以确定待打包的特色需求文件。需要说明的是，前端文件池可以是前端文件库中的某一存储空间，也可以是前端文件库外的某一存储空间，主要用于对特色需求文件的筛选。
36.在本技术的一个实施例中，在确定待打包的特色需求文件之后，判断前端文件打包指令的类型。在确定前端文件打包指令是运行打包指令的情况下，将待打包的特色需求文件对应的特色环境变量名称与必要文件对应的环境变量名称定义为全局变量，以供加载的页面使用；与此同时，将待打包的特色需求文件与必要文件进行打包，并将打包完成包裹存储于系统内存，以便运行该包裹。
37.在本技术的一个实施例中，在确定前端文件打包指令是运行打包指令的情况下，将待打包的特色需求文件与必要文件进行打包，并将打包完成包裹存储于系统磁盘中。
38.基于同样的发明构思，本技术实施例还提供了一种前端文件自适配打包的设备，其内部结构如图2所示。
39.图2为本技术实施例提供的一种前端文件自适配打包的设备内部结构示意图。如图2所示，设备包括：处理器201；存储器202，其上存储有可执行指令，当可执行指令被执行时，使得处理器201执行如上述的一种前端文件自适配打包的方法。
40.在本技术的一个实施例中，处理器201用于响应于前端文件打包指令，在前端文件
中确定构成页面必要组件的必要文件，以及确定构成页面特色组件的特色需求文件；其中，前端文件打包指令包括打包指令与运行指令；将特色需求文件的名称修改为包含特色标志的特色环境变量名称；其中，特色标志用于区分必要文件与特色需求文件；基于预设的特色环境变量需求信息，确定待打包的特色需求文件，并将待打包的特色需求文件与必要文件进行打包。
41.本技术的一些实施例提供的对应于图1的一种前端文件自适配打包的的非易失性计算机存储介质，存储有计算机可执行指令，计算机可执行指令设置为：
42.响应于前端文件打包指令，在前端文件中确定构成页面必要组件的必要文件，以及确定构成页面特色组件的特色需求文件；其中，前端文件打包指令包括打包指令与运行指令；
43.将特色需求文件的名称修改为包含特色标志的特色环境变量名称；其中，特色标志用于区分必要文件与特色需求文件；
44.基于预设的特色环境变量需求信息，确定待打包的特色需求文件，并将待打包的特色需求文件与必要文件进行打包。
45.本技术中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于物联网设备和介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
46.本技术实施例提供的系统和介质与方法是一一对应的，因此，系统和介质也具有与其对应的方法类似的有益技术效果，由于上面已经对方法的有益技术效果进行了详细说明，因此，这里不再赘述系统和介质的有益技术效果。
47.本领域内的技术人员应明白，本技术的实施例可提供为方法、系统、或计算机程序产品。因此，本技术可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本技术可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
48.本技术是参照根据本技术实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
49.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
50.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一
个方框或多个方框中指定的功能的步骤。
51.在一个典型的配置中，计算设备包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。
52.内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flash ram)。内存是计算机可读介质的示例。
53.计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
54.还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。
55.以上所述仅为本技术的实施例而已，并不用于限制本技术。对于本领域技术人员来说，本技术可以有各种更改和变化。凡在本技术的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本技术的权利要求范围之内。