前端工程生成方法及装置与流程

1.本申请涉及前端开发领域，也可用于金融领域，具体涉及一种前端工程生成方法及装置。


背景技术：

2.在同领域项目不断开发过程中，通常会随着开发过程结合领域特色形成一套完整的前端开发生态，包括定制的前端标准工程以及围绕这个基础工程的一些基础构件，例如通用组件、通用指令、npm插件等。
3.目前都是将已有的前端工程构件以工程代码的形式统一放置在前端工程中，形成一套“大而全”的工程模板。在大多数情况下这些工程构件并不是都适用当前项目，这种“大而全”的工程模板会导致在工程内存在较多的冗余代码，影响项目开发和打包效率。


技术实现要素：

4.针对现有技术中的问题，本申请提供一种前端工程生成方法及装置，能够灵活、便捷得为前端开发人员在创建前端工程时提供适当的基础构件以搭配出所需的前端工程，提高前端开发效率。
5.为了解决上述问题中的至少一个，本申请提供以下技术方案：
6.第一方面，本申请提供一种前端工程生成方法，包括：
7.接收用户的前端构件选择指令，并根据所述前端构件选择指令从预设构件仓库中获取对应的前端构件；
8.将所述前端构件分别写入基础工程内或与所述基础工程相应的工程依赖文件内，并在所述基础工程的相应位置处生成与各所述前端构件对应的引用代码，得到目标前端工程。
9.进一步地，所述将所述前端构件分别写入基础工程内或与所述基础工程相应的工程依赖文件内，并在所述基础工程的相应位置处生成与各所述前端构件对应的引用代码，包括：
10.将所述前端构件中的前端布局、全局样式、全局组件以及全局指令引入所述基础工程内的设定静态路径内，并在所述设定静态路径的入口文件中写入对应的引用代码或注册代码；
11.将所述前端构件中插件的插件名称写入与所述基础工程相应的工程依赖文件的依赖列表中，并在所述基础工程的入口文件中写入对应的注册代码。
12.进一步地，在所述设定静态路径的入口文件中写入对应的注册代码和在所述基础工程的入口文件中写入对应的注册代码之后，包括：
13.根据预设上下文规则确定所述入口文件的文件列表，并根据所述文件列表依次执行对应的全局组件注册操作、全局指令注册操作以及插件注册操作。
14.进一步地，在所述得到目标前端工程之前，包括：
15.在未接收到所述用户发送的全局样式选择指令时，在所述设定静态路径中引入组件库默认样式并在入口文件中写入对应的引用代码；
16.在未接收到所述用户发送的全局组件选择指令和/或全局指令选择指令时，在所述设定静态路径中写入预设空白说明文件。
17.第二方面，本申请提供一种前端工程生成装置，包括：
18.构件库选择模块，用于接收用户的前端构件选择指令，并根据所述前端构件选择指令从预设构件仓库中获取对应的前端构件；
19.工程配置模块，用于将所述前端构件分别写入基础工程内或与所述基础工程相应的工程依赖文件内，并在所述基础工程的相应位置处生成与各所述前端构件对应的引用代码，得到目标前端工程。
20.进一步地，所述工程配置模块包括：
21.静态路径写入单元，用于将所述前端构件中的前端布局、全局样式、全局组件以及全局指令引入所述基础工程内的设定静态路径内，并在所述设定静态路径的入口文件中写入对应的引用代码或注册代码；
22.依赖写入单元，用于将所述前端构件中插件的插件名称写入与所述基础工程相应的工程依赖文件的依赖列表中，并在所述基础工程的入口文件中写入对应的注册代码。
23.进一步地，所述工程配置模块还包括：
24.全局注册单元，用于根据预设上下文规则确定所述入口文件的文件列表，并根据所述文件列表依次执行对应的全局组件注册操作、全局指令注册操作以及插件注册操作。
25.进一步地，所述程配置模块还包括：
26.默认选择单元，用于在未接收到所述用户发送的全局样式选择指令时，在所述设定静态路径中引入组件库默认样式并在入口文件中写入对应的引用代码；
27.空白填补单元，用于在未接收到所述用户发送的全局组件选择指令和/或全局指令选择指令时，在所述设定静态路径中写入预设空白说明文件。
28.第三方面，本申请提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现所述的前端工程生成方法的步骤。
29.第四方面，本申请提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现所述的前端工程生成方法的步骤。
30.由上述技术方案可知，本申请提供一种前端工程生成方法及装置，通过用户从构件仓库中选择组建前端工程所需的前端构件，以灵活自定义配置从而得到目标前端工程，由此能够灵活、便捷得为前端开发人员在创建前端工程时提供适当的基础构件以搭配出所需的前端工程，提高前端开发效率。
附图说明
31.为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
32.图1为本申请实施例中的前端工程生成方法的流程示意图之一；
33.图2为本申请实施例中的前端工程生成方法的流程示意图之二；
34.图3为本申请实施例中的前端工程生成方法的流程示意图之三；
35.图4为本申请实施例中的前端工程生成装置的结构图之一；
36.图5为本申请实施例中的前端工程生成装置的结构图之二；
37.图6为本申请实施例中的前端工程生成装置的结构图之三；
38.图7为本申请实施例中的前端工程生成装置的结构图之四；
39.图8为本申请实施例中的电子设备的结构示意图。
具体实施方式
40.为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整的描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
41.考虑到现有技术中将已有的前端工程构件以工程代码的形式统一放置在前端工程中，形成一套“大而全”的工程模板，在大多数情况下这些工程构件并不是都适用当前项目，这种“大而全”的工程模板会导致在工程内存在较多的冗余代码，影响项目开发和打包效率的问题，本申请提供一种前端工程生成方法及装置，通过用户从构件仓库中选择组建前端工程所需的前端构件，以灵活自定义配置从而得到目标前端工程，由此能够灵活、便捷得为前端开发人员在创建前端工程时提供适当的基础构件以搭配出所需的前端工程，提高前端开发效率。
42.为了能够灵活、便捷得为前端开发人员在创建前端工程时提供适当的基础构件以搭配出所需的前端工程，提高前端开发效率，本申请提供一种前端工程生成方法的实施例，参见图1，所述前端工程生成方法具体包含有如下内容：
43.步骤s101：接收用户的前端构件选择指令，并根据所述前端构件选择指令从预设构件仓库中获取对应的前端构件。
44.可以理解的是，前端构件按照功能可以分为：
①
前端布局、
②
全局样式、
③
全局组件、
④
全局指令、
⑤
插件，其中
①
到
④
都是以工程代码的形式存在工程内src文件夹内的特定路径下，
①
布局存放在src\layout路径下、
②
全局样式存放在src\styles下、
③
全局组件存放在src\components下、
④
全局指令存放在src\directives下，而
⑤
是以npm依赖的形式存在前端工程的依赖信息文件package.json中。
45.可选的，本申请通过将上述前端构件预先存储至一构件仓库中，以供用户在构建前端工程时进行灵活选择。
46.步骤s102：将所述前端构件分别写入基础工程内或与所述基础工程相应的工程依赖文件内，并在所述基础工程的相应位置处生成与各所述前端构件对应的引用代码，得到目标前端工程。
47.可选的，对前端工程的基础构件进行上述的拆分后，仅需要依此对各类构件进行选择，根据用户选择分别将构件写入工程内或依赖文件内，并在工程对应位置生成相应的引用代码即可完成前端标准工程的生成。
48.从上述描述可知，本申请实施例提供的前端工程生成方法，能够通过用户从构件仓库中选择组建前端工程所需的前端构件，以灵活自定义配置从而得到目标前端工程，由此能够灵活、便捷得为前端开发人员在创建前端工程时提供适当的基础构件以搭配出所需的前端工程，提高前端开发效率。
49.为了能够准确引入前端构件，在本申请的前端工程生成方法的一实施例中，参见图2，上述步骤s102还可以具体包含如下内容：
50.步骤s201：将所述前端构件中的前端布局、全局样式、全局组件以及全局指令引入所述基础工程内的设定静态路径内，并在所述设定静态路径的入口文件中写入对应的引用代码或注册代码。
51.步骤s202：将所述前端构件中插件的插件名称写入与所述基础工程相应的工程依赖文件的依赖列表中，并在所述基础工程的入口文件中写入对应的注册代码。
52.可选的，前端构件都有自己特定的注册和引用方式，其中前端布局的入口文件名固定为src\layout\index.vue，全局样式的入口文件名固定为src\styles\index.scss，因此这两项内容在标准工程中直接使用静态路径引入；全局组件和全局指令情况相似，由于不确定组件和指令的数量与名称，因此这里利用webpack提供的require.context()自定义上下文功能将指定路径下的所有文件生成文件列表，依次调用vue提供的vue.component()方法注册全局组件，调用vue.directive()方法注册全局指令。
53.可选的，对插件的引用稍微复杂一些，插件作为npm依赖引入，并不以工程代码的形式存在工程内，仅体现在前端工程的依赖信息文件package.json中，与其他普通工程依赖不同的是，插件的命名包含特殊前缀，例如以@sd
‑
plugin/开头，一个典型的插件命名可以是@sd
‑
plugin/xxx。经过这样的命名，这类插件在前端工程的依赖文件夹中都会存放在@sd
‑
plugin文件夹内，我们约定在开发插件时，入口文件均为index.js，因此可以在标准工程中预置了一个模块会自动识别这类满足特殊前缀的依赖并当做插件注册，这个模块同样利用了webpack的自定义上下文功能，将@sd
‑
plugin文件夹下所有index.js文件生成列表并依此执行，完成插件的自动注册。
54.为了能够准确引入前端构件，在本申请的前端工程生成方法的一实施例中，上述步骤s102还可以具体包含如下内容：
55.根据预设上下文规则确定所述入口文件的文件列表，并根据所述文件列表依次执行对应的全局组件注册操作、全局指令注册操作以及插件注册操作。
56.可选的，由于不确定组件和指令的数量与名称，因此本申请可以利用webpack提供的require.context()自定义上下文功能将指定路径下的所有文件生成文件列表，依次调用vue提供的vue.component()方法注册全局组件，调用vue.directive()方法注册全局指令。
57.可选的，本申请可以在标准工程中预置了一个模块会自动识别这类满足特殊前缀的依赖并当做插件注册，这个模块同样利用了webpack的自定义上下文功能，将@sd
‑
plugin文件夹下所有index.js文件生成列表并依此执行，完成插件的自动注册。
58.为了能够保障系统整体稳定性，在本申请的前端工程生成方法的一实施例中，参见图3，上述步骤s102还可以具体包含如下内容：
59.步骤s301：在未接收到所述用户发送的全局样式选择指令时，在所述设定静态路
径中引入组件库默认样式并在入口文件中写入对应的引用代码。
60.步骤s302：在未接收到所述用户发送的全局组件选择指令和/或全局指令选择指令时，在所述设定静态路径中写入预设空白说明文件。
61.可选的，用户选择所需全局样式，这里指的是对组件库的默认样式覆盖，例如更改主题色，如果用户选择了自定义样式，则将对应样式文件写入src\style文件夹内并在入口文件写入对src\style\index.scss的引用，如果用户未选择自定义样式，表示使用组件库默认样式，则在入口文件写入对默认组件库样式文件的引用。
62.可选的，用户选择所需的全局组件和指令，根据用户选择将对应的组件和指令文件分别放置在src\components和src\directives文件夹内，并在入口文件写入对两者的注册代码，当用户并未选择任何组件和指令时，需要在src\components和src\directives文件夹内写入两个空白说明文件以保证这两个文件夹不为空，以避免git不能提交空文件夹导致注册代码报错。
63.为了能够灵活、便捷得为前端开发人员在创建前端工程时提供适当的基础构件以搭配出所需的前端工程，提高前端开发效率，本申请提供一种用于实现所述前端工程生成方法的全部或部分内容的前端工程生成装置的实施例，参见图4，所述前端工程生成装置具体包含有如下内容：
64.构件库选择模块10，用于接收用户的前端构件选择指令，并根据所述前端构件选择指令从预设构件仓库中获取对应的前端构件。
65.工程配置模块20，用于将所述前端构件分别写入基础工程内或与所述基础工程相应的工程依赖文件内，并在所述基础工程的相应位置处生成与各所述前端构件对应的引用代码，得到目标前端工程。
66.从上述描述可知，本申请实施例提供的前端工程生成装置，能够通过用户从构件仓库中选择组建前端工程所需的前端构件，以灵活自定义配置从而得到目标前端工程，由此能够灵活、便捷得为前端开发人员在创建前端工程时提供适当的基础构件以搭配出所需的前端工程，提高前端开发效率。
67.为了能够准确引入前端构件，在本申请的前端工程生成装置的一实施例中，参见图5，所述工程配置模块20包括：
68.静态路径写入单元21，用于将所述前端构件中的前端布局、全局样式、全局组件以及全局指令引入所述基础工程内的设定静态路径内，并在所述设定静态路径的入口文件中写入对应的引用代码或注册代码。
69.依赖写入单元22，用于将所述前端构件中插件的插件名称写入与所述基础工程相应的工程依赖文件的依赖列表中，并在所述基础工程的入口文件中写入对应的注册代码。
70.为了能够准确引入前端构件，在本申请的前端工程生成装置的一实施例中，参见图6，所述工程配置模块20还包括：
71.全局注册单元23，用于根据预设上下文规则确定所述入口文件的文件列表，并根据所述文件列表依次执行对应的全局组件注册操作、全局指令注册操作以及插件注册操作。
72.为了能够保障系统整体稳定性，在本申请的前端工程生成装置的一实施例中，参见图7，所述程配置模块20还包括：
73.默认选择单元24，用于在未接收到所述用户发送的全局样式选择指令时，在所述设定静态路径中引入组件库默认样式并在入口文件中写入对应的引用代码。
74.空白填补单元25，用于在未接收到所述用户发送的全局组件选择指令和/或全局指令选择指令时，在所述设定静态路径中写入预设空白说明文件。
75.从硬件层面来说，为了能够灵活、便捷得为前端开发人员在创建前端工程时提供适当的基础构件以搭配出所需的前端工程，提高前端开发效率，本申请提供一种用于实现所述前端工程生成方法中的全部或部分内容的电子设备的实施例，所述电子设备具体包含有如下内容：
76.处理器(processor)、存储器(memory)、通信接口(communications interface)和总线；其中，所述处理器、存储器、通信接口通过所述总线完成相互间的通信；所述通信接口用于实现前端工程生成装置与核心业务系统、用户终端以及相关数据库等相关设备之间的信息传输；该逻辑控制器可以是台式计算机、平板电脑及移动终端等，本实施例不限于此。在本实施例中，该逻辑控制器可以参照实施例中的前端工程生成方法的实施例，以及前端工程生成装置的实施例进行实施，其内容被合并于此，重复之处不再赘述。
77.可以理解的是，所述用户终端可以包括智能手机、平板电子设备、网络机顶盒、便携式计算机、台式电脑、个人数字助理(pda)、车载设备、智能穿戴设备等。其中，所述智能穿戴设备可以包括智能眼镜、智能手表、智能手环等。
78.在实际应用中，前端工程生成方法的部分可以在如上述内容所述的电子设备侧执行，也可以所有的操作都在所述客户端设备中完成。具体可以根据所述客户端设备的处理能力，以及用户使用场景的限制等进行选择。本申请对此不作限定。若所有的操作都在所述客户端设备中完成，所述客户端设备还可以包括处理器。
79.上述的客户端设备可以具有通信模块(即通信单元)，可以与远程的服务器进行通信连接，实现与所述服务器的数据传输。所述服务器可以包括任务调度中心一侧的服务器，其他的实施场景中也可以包括中间平台的服务器，例如与任务调度中心服务器有通信链接的第三方服务器平台的服务器。所述的服务器可以包括单台计算机设备，也可以包括多个服务器组成的服务器集群，或者分布式装置的服务器结构。
80.图8为本申请实施例的电子设备9600的系统构成的示意框图。如图8所示，该电子设备9600可以包括中央处理器9100和存储器9140；存储器9140耦合到中央处理器9100。值得注意的是，该图8是示例性的；还可以使用其他类型的结构，来补充或代替该结构，以实现电信功能或其他功能。
81.一实施例中，前端工程生成方法功能可以被集成到中央处理器9100中。其中，中央处理器9100可以被配置为进行如下控制：
82.步骤s101：接收用户的前端构件选择指令，并根据所述前端构件选择指令从预设构件仓库中获取对应的前端构件。
83.步骤s102：将所述前端构件分别写入基础工程内或与所述基础工程相应的工程依赖文件内，并在所述基础工程的相应位置处生成与各所述前端构件对应的引用代码，得到目标前端工程。
84.从上述描述可知，本申请实施例提供的电子设备，通过用户从构件仓库中选择组建前端工程所需的前端构件，以灵活自定义配置从而得到目标前端工程，由此能够灵活、便
捷得为前端开发人员在创建前端工程时提供适当的基础构件以搭配出所需的前端工程，提高前端开发效率。
85.在另一个实施方式中，前端工程生成装置可以与中央处理器9100分开配置，例如可以将前端工程生成装置配置为与中央处理器9100连接的芯片，通过中央处理器的控制来实现前端工程生成方法功能。
86.如图8所示，该电子设备9600还可以包括：通信模块9110、输入单元9120、音频处理器9130、显示器9160、电源9170。值得注意的是，电子设备9600也并不是必须要包括图8中所示的所有部件；此外，电子设备9600还可以包括图8中没有示出的部件，可以参考现有技术。
87.如图8所示，中央处理器9100有时也称为控制器或操作控件，可以包括微处理器或其他处理器装置和/或逻辑装置，该中央处理器9100接收输入并控制电子设备9600的各个部件的操作。
88.其中，存储器9140，例如可以是缓存器、闪存、硬驱、可移动介质、易失性存储器、非易失性存储器或其它合适装置中的一种或更多种。可储存上述与失败有关的信息，此外还可存储执行有关信息的程序。并且中央处理器9100可执行该存储器9140存储的该程序，以实现信息存储或处理等。
89.输入单元9120向中央处理器9100提供输入。该输入单元9120例如为按键或触摸输入装置。电源9170用于向电子设备9600提供电力。显示器9160用于进行图像和文字等显示对象的显示。该显示器例如可为lcd显示器，但并不限于此。
90.该存储器9140可以是固态存储器，例如，只读存储器(rom)、随机存取存储器(ram)、sim卡等。还可以是这样的存储器，其即使在断电时也保存信息，可被选择性地擦除且设有更多数据，该存储器的示例有时被称为eprom等。存储器9140还可以是某种其它类型的装置。存储器9140包括缓冲存储器9141(有时被称为缓冲器)。存储器9140可以包括应用/功能存储部9142，该应用/功能存储部9142用于存储应用程序和功能程序或用于通过中央处理器9100执行电子设备9600的操作的流程。
91.存储器9140还可以包括数据存储部9143，该数据存储部9143用于存储数据，例如联系人、数字数据、图片、声音和/或任何其他由电子设备使用的数据。存储器9140的驱动程序存储部9144可以包括电子设备的用于通信功能和/或用于执行电子设备的其他功能(如消息传送应用、通讯录应用等)的各种驱动程序。
92.通信模块9110即为经由天线9111发送和接收信号的发送机/接收机9110。通信模块(发送机/接收机)9110耦合到中央处理器9100，以提供输入信号和接收输出信号，这可以和常规移动通信终端的情况相同。
93.基于不同的通信技术，在同一电子设备中，可以设置有多个通信模块9110，如蜂窝网络模块、蓝牙模块和/或无线局域网模块等。通信模块(发送机/接收机)9110还经由音频处理器9130耦合到扬声器9131和麦克风9132，以经由扬声器9131提供音频输出，并接收来自麦克风9132的音频输入，从而实现通常的电信功能。音频处理器9130可以包括任何合适的缓冲器、解码器、放大器等。另外，音频处理器9130还耦合到中央处理器9100，从而使得可以通过麦克风9132能够在本机上录音，且使得可以通过扬声器9131来播放本机上存储的声音。
94.本申请的实施例还提供能够实现上述实施例中的执行主体为服务器或客户端的
前端工程生成方法中全部步骤的一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述实施例中的执行主体为服务器或客户端的前端工程生成方法的全部步骤，例如，所述处理器执行所述计算机程序时实现下述步骤：
95.步骤s101：接收用户的前端构件选择指令，并根据所述前端构件选择指令从预设构件仓库中获取对应的前端构件。
96.步骤s102：将所述前端构件分别写入基础工程内或与所述基础工程相应的工程依赖文件内，并在所述基础工程的相应位置处生成与各所述前端构件对应的引用代码，得到目标前端工程。
97.从上述描述可知，本申请实施例提供的计算机可读存储介质，通过用户从构件仓库中选择组建前端工程所需的前端构件，以灵活自定义配置从而得到目标前端工程，由此能够灵活、便捷得为前端开发人员在创建前端工程时提供适当的基础构件以搭配出所需的前端工程，提高前端开发效率。
98.本领域内的技术人员应明白，本发明的实施例可提供为方法、装置、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd
‑
rom、光学存储器等)上实施的计算机程序产品的形式。
99.本发明是参照根据本发明实施例的方法、设备(装置)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
100.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
101.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
102.本发明中应用了具体实施例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。