CN115904367A - 一种前端脚手架处理方法、装置、电子设备及存储介质 - Google Patents

Abstract

本发明实施例公开了一种前端脚手架处理方法、装置、电子设备及存储介质，包括：获取项目创建命令；根据所述项目创建命令导出预设脚手架的初始配置文件，所述初始配置文件包括预设脚手架工具、预设目录结构以及初始流程设计结构；获取用户调整命令，并根据所述用户调整命令修改所述初始配置文件，以得到目标配置文件；根据所述目标配置文件启动本地服务，并对待打包目标进行编译打包，以得到目标项目文件；在目标服务器发布所述目标项目文件。本发明通过配置统一的脚手架工具以及初始流程设计结构，可以基于统一的管理方式进行系统开发，且通过预设目录结构的设置，使得本发明提出的脚手架具备更高的兼容性。

Description

一种前端脚手架处理方法、装置、电子设备及存储介质

技术领域

本发明涉及前端开发技术领域，尤其涉及一种前端脚手架处理方法、装置、电子设备及存储介质。

背景技术

前端脚手架工具是用户前端快速生成代码的一种工具，业界驻留使用的前端脚手架工具主要包括两类，一类为Vue-cli，另一类为Create-React-app。

以上两款脚手架工具均只支持一种技术框架，团队内部无法通过统一的管理方式，同时实现在H5端和PC端的系统兼容性。且两款脚手架工具的代码的编码风格、目录结构、代码检查等规范迥然不同，无法满足用户多样的发布流程。

因此，亟需一种能够使用统一编码风格，同时支持vue和react技术栈的脚手架处理方案。

发明内容

为了解决上述技术问题，本申请实施例提供了可应用于金融科技领域的一种前端脚手架处理方法、装置、电子设备及计算机可读存储介质，具体方案如下：

第一方面，本申请实施例提供了一种前端脚手架处理方法，包括：

获取项目创建命令；

根据所述项目创建命令导出预设脚手架的初始配置文件，所述初始配置文件包括预设脚手架工具、预设目录结构以及初始流程设计结构，所述预设目录结构包括templates目录，所述templates目录用于存储包括react和vue两种框架的模板；

获取用户调整命令，并根据所述用户调整命令修改所述初始配置文件，以得到目标配置文件；

根据所述目标配置文件启动本地服务，并对待打包目标进行编译打包，以得到目标项目文件；

在目标服务器发布所述目标项目文件。

根据本申请实施例的一种具体实施方式，创建所述预设脚手架的步骤包括：

获取预设脚手架工具，所述预设脚手架工具包括commander命令行工具、inquirer命令行交互界面、chalk和ora输出控制工具；

根据所述预设脚手架工具创建预设目录结构，所述预设目录结构包括bin目录、manual目录、node_modules目录、templates目录、src目录、eslintrc.js目录、package.json目录以及tsconfig.json目录；

根据所述预设目录结构获取初始流程设计结构，所述初始流程设计结构包括项目创建模块、模块打包模块、代码校验模块、服务启动模块、模板生成模块以及文档查看模块；

根据所述脚手架工具、预设目录结构和所述初始流程设计结构生成所述初始配置文件，并在预设包管理平台中发布所述初始配置文件。

根据本申请实施例的一种具体实施方式，所述获取项目创建命令的步骤之前，所述方法还包括：

从所述预设包管理平台中获取所述初始配置文件；

在全局目录中安装所述初始配置文件。

根据本申请实施例的一种具体实施方式，所述bin目录用于存储所述初始配置文件；所述manual目录用于存储用户文档；所述node_modules目录用于存储依赖包；所述templates目录用于存储模板，所述模板包括reac和vue两种框架；所述src目录用于存储脚手架逻辑代码；所述eslintrc.js目录用于存储eslint规则配置文件；所述package.json目录用于存储npm配置文件；所述tsconfig.json目录用于存储typescript配置文件。

根据本申请实施例的一种具体实施方式，所述项目创建模块用于在根据所述项目创建命令新建项目文件；

所述模块打包模块用于根据所述目录结构扫描待打包目标，并基于webpack工具对所述待打包目标进行打包；

所述代码校验模块用于扫描待检查代码，并基于eslint规则对所述待检查代码进行规则校验；

所述服务启动模块用于基于webpack-dev-server工具启动本地服务；

所述模板生成模块用于将所述目录结构中存储的模板文件拷贝到用户目录；

所述文档查看模块用于基于vuepress工具将md格式的用户操作手册转换为html格式的用户操作手册，以供用户查看所述用户操作手册。

第二方面，本申请实施例提供了一种前端脚手架处理装置，包括：

获取模块，用于获取项目创建命令；

配置模块，用于根据所述项目创建命令导出预设脚手架的初始配置文件，所述初始配置文件包括预设脚手架工具、预设目录结构以及初始流程设计结构，所述预设目录结构包括templates目录，所述templates目录用于存储包括react和vue两种框架的模板；

调整模块，用于获取用户调整命令，并根据所述用户调整命令修改所述初始配置文件，以得到目标配置文件；

启动模块，用于根据所述目标配置文件启动本地服务，并对待打包目标进行编译打包，以得到目标项目文件；

发布模块，用于在目标服务器发布所述目标项目文件。

根据本申请实施例的一种具体实施方式，创建所述预设脚手架的步骤包括：

获取预设脚手架工具，所述预设脚手架工具包括commander命令行工具、inquirer命令行交互界面、chalk和ora输出控制工具；

根据所述预设脚手架工具创建预设目录结构，所述预设目录结构包括bin目录、manual目录、node_modules目录、templates目录、src目录、eslintrc.js目录、package.json目录以及tsconfig.json目录；

根据所述预设目录结构获取初始流程设计结构，所述初始流程设计结构包括项目创建模块、模块打包模块、代码校验模块、服务启动模块、模板生成模块以及文档查看模块；

根据所述脚手架工具、预设目录结构和所述初始流程设计结构生成所述初始配置文件，并在预设包管理平台中发布所述初始配置文件。

根据本申请实施例的一种具体实施方式，所述装置还包括：

安装模块，用于从所述预设包管理平台中获取所述初始配置文件；在全局目录中安装所述初始配置文件。

第三方面，本申请实施例提供了一种电子设备，所述电子设备包括处理器和存储器，所述存储器存储有计算机程序，所述计算机程序在所述处理器上运行时执行前述第一方面及第一方面任一实施方式所述的前端脚手架处理方法。

第四方面，本申请实施例提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机程序，所述计算机程序在处理器上运行时执行前述第一方面及第一方面任一实施方式所述的前端脚手架处理方法。

本申请实施例提供了一种前端脚手架处理方法、装置、电子设备及存储介质，包括：获取项目创建命令；根据所述项目创建命令导出预设脚手架的初始配置文件，所述初始配置文件包括预设脚手架工具、预设目录结构以及初始流程设计结构，所述预设目录结构包括templates目录，所述templates目录用于存储包括react和vue两种框架的模板；获取用户调整命令，并根据所述用户调整命令修改所述初始配置文件，以得到目标配置文件；根据所述目标配置文件启动本地服务，并对待打包目标进行编译打包，以得到目标项目文件；在目标服务器发布所述目标项目文件。本发明通过配置统一的脚手架工具以及初始流程设计结构，可以基于统一的管理方式进行系统开发，且通过预设目录结构的设置，使得本发明提出的脚手架具备更高的兼容性。

附图说明

为了更清楚地说明本发明的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对本发明保护范围的限定。在各个附图中，类似的构成部分采用类似的编号。

图1示出了本申请实施例提供的一种前端脚手架处理方法的方法流程示意图；

图2示出了本申请实施例提供的一种前端脚手架处理装置的装置模块示意图；

图3示出了本申请实施例提供的一种电子设备的设备模块示意图。

具体实施方式

下面将结合本发明实施例中附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。

通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

在下文中，可在本发明的各种实施例中使用的术语“包括”、“具有”及其同源词仅意在表示特定特征、数字、步骤、操作、元件、组件或前述项的组合，并且不应被理解为首先排除一个或更多个其它特征、数字、步骤、操作、元件、组件或前述项的组合的存在或增加一个或更多个特征、数字、步骤、操作、元件、组件或前述项的组合的可能性。

此外，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

除非另有限定，否则在这里使用的所有术语(包括技术术语和科学术语)具有与本发明的各种实施例所属领域普通技术人员通常理解的含义相同的含义。所述术语(诸如在一般使用的词典中限定的术语)将被解释为具有与在相关技术领域中的语境含义相同的含义并且将不被解释为具有理想化的含义或过于正式的含义，除非在本发明的各种实施例中被清楚地限定。

参考图1，为本申请实施例提供的一种前端脚手架处理方法的方法流程示意图，本申请实施例提供的一种前端脚手架处理方法，如图1所示，所述前端脚手架处理方法包括：

步骤S101，获取项目创建命令；

在具体实施例中，所述项目创建命令可以是用户在进行系统开发过程中创建任意项目时，启动本实施例提供的前端脚手架处理方法所生成的命令。

具体的，本实施例在进行项目创建的过程中，采用的脚手架结构是具有统一目录架构、代码规范以及技术栈的。

在进行项目创建命令前，首先需要创建好预设脚手架结构。

根据本申请实施例的一种具体实施方式，创建所述预设脚手架的步骤包括：

获取预设脚手架工具，所述预设脚手架工具包括commander命令行工具、inquirer命令行交互界面、chalk和ora输出控制工具；

根据所述预设脚手架工具创建预设目录结构，所述预设目录结构包括bin目录、manual目录、node_modules目录、templates目录、src目录、eslintrc.js目录、package.json目录以及tsconfig.json目录；

根据所述预设目录结构获取初始流程设计结构，所述初始流程设计结构包括项目创建模块、模块打包模块、代码校验模块、服务启动模块、模板生成模块以及文档查看模块；

根据所述脚手架工具、预设目录结构和所述初始流程设计结构生成所述初始配置文件，并在预设包管理平台中发布所述初始配置文件。

在具体示例中，本实施例可以采用node.js和typescript，搭配多类型且编码成熟的插件包来搭建脚手架工具包。具体的，所述插件包主要包括commander命令行工具，inquirer命令行交互界面，chalk和ora输出控制工具。

其中，所述inquirer命令行交互界面用于获取用户输入的命令行。

所述chalk和ora输出控制工具用于控制台输出。

本实施例中的所述插件包还可以包括其它成熟插件，可以根据实际应用场景进行自适应添加替换。

具体的，本实施例提出的前端脚手架处理装置还会根据预设目录结构以及用户提前设置的初始流程设计结构进行打包封装，以得到进行前端开发时需要随时调用的前端脚手架的初始配置文件。

根据本申请实施例的一种具体实施方式，所述获取项目创建命令的步骤之前，所述方法还包括：

从所述预设包管理平台中获取所述初始配置文件；

在全局目录中安装所述初始配置文件。

在具体实施例中，在开始进行项目开发时，首先需要在开发界面的全局目录中下载并安装所述初始配置文件。

所述初始配置文件可以从指定的包管理平台中进行获取，也可以从指定的数据库中进行获取，所述初始配置文件的获取方式根据实际应用中初始配置文件的存储位置进行确定，此处不作限定。

在全局目录中安全所述初始配置文件后，在进行项目开发过程中，就可以随时调用所述初始配置文件中的前端脚手架工具、预设目录结构以及预设流程设计结构进行前端开发。

步骤S102，根据所述项目创建命令导出预设脚手架的初始配置文件，所述初始配置文件包括预设脚手架工具、预设目录结构以及初始流程设计结构，所述预设目录结构包括templates目录，所述templates目录用于存储包括react和vue两种框架的模板；

在具体实施例中，所述预设脚手架的初始配置文件中设置了统一流程规范的预设目录结构以及初始流程设计，从而在进行项目开发时，多个合作团队只需要学习预设脚手架的使用规范，既可以无障碍的进行协同开发。

在具体实施例中，目录用于存储开发过程中的各项文件，而本实施例设计了相应的目录结构，来存放本实施例进行开发过程中可能遇到的所有文件。

具体的，所述bin目录用于存储所述初始配置文件，bin目录用来生成最终输出的初始配置文件，并发布在指定的包管理平台中，以供前端开发随时进行调用；

所述manual目录用于存储用户文档，所述用户文档为用户在进行开发过程中需要使用的各类型文档，本实施例中的所述用户文档的内容可以根据实际应用场景进行自适应替换；

所述node_modules目录用于存储依赖包，本实施例中的所述依赖包文件根据实际应用场景进行自适应替换，此处不作限定；

所述templates目录用于存储模板，所述模板包括reac和vue两种框架，所述模板为基于UI组件库进行配置的reac框架的组件模板或vue框架的组件模板；

需知的，所述模板还可以包括angular框架，此处不作限定，可根据实际应用场景进行选择性替换。

所述UI组件库可以根据实际应用场景选择任意类型的组件库，所述UI组件库也可以为自定义组件库，此处不作限定。

所述src目录用于存储脚手架逻辑代码；所述eslintrc.js目录用于存储eslint规则配置文件；所述package.json目录用于存储npm配置文件；所述tsconfig.json目录用于存储typescript配置文件。

具体的，本实施例中的所述预设目录架构还包括存储多类型配置文件以及基础逻辑代码的目录，以便于配置文件的快速调用。

根据本申请实施例的一种具体实施方式，所述项目创建模块用于在根据所述项目创建命令新建项目文件；

所述模块打包模块用于根据所述目录结构扫描待打包目标，并基于webpack工具对所述待打包目标进行打包；

所述代码校验模块用于扫描待检查代码，并基于eslint规则对所述待检查代码进行规则校验；

所述服务启动模块用于基于webpack-dev-server工具启动本地服务；

所述模板生成模块用于将所述目录结构中存储的模板文件拷贝到用户目录；

所述文档查看模块用于基于vuepress工具将md格式的用户操作手册转换为html格式的用户操作手册，以供用户查看所述用户操作手册。

在具体实施例中，按照功能将开发流程划分为如下模块：

create项目创建模块、build模块打包模块、lint代码校验模块、serve服务启动模块、generate模板生成模块和doc文档查看模块。

本实施例提出的前端脚手架处理方法，组件库模块、目录结构和基础配置等相关基础代码均可以快速生成，采用合理的webpack、babel和yml等默认配置，真正实现了零配置开发。使得开发人员只需要关注业务代码的编写，减少重复性工作，更专注于代码的开发，大大简化了开发流程。

步骤S103，获取用户调整命令，并根据所述用户调整命令修改所述初始配置文件，以得到目标配置文件；

在具体开发过程中，在控制台运行创建项目的命令后，脚手架内部已用最优方案生成默认配置，用户可根据需要修改文件进行eslint规则相关配置、git文件配置、npm配置以及打包启动服务相关配置。

步骤S104，根据所述目标配置文件启动本地服务，并对待打包目标进行编译打包，以得到目标项目文件；

在具体实施例中，根据修改后得到的目标配置文件的各项预设命令，启动本地服务并进行本地调试。

运行编译打包命令进行打包，传env参数区分开发环境，并修改相应的文件配置，即可以得到目标项目文件。

在一种示例中，修改wermsrc.yml配置，可以将目标项目文件的格式修改为可向目标服务器发送的文件格式。

步骤S105，在目标服务器发布所述目标项目文件。

在具体实施例中，所述目标服务器可以为任意指定的服务器，本实施例对所述目标服务器不作限定。

本实施例提出的前端脚手架处理方法，能够按项目应用场景对脚手架工具进行自定义配置，技术框架可以自适应的选择vue或react，状态管理工具可以选择使用vue或mob3，UI库可以选择ant-design或poppy-ui等任意类型的UI组件库。

本实施例提出的前端脚手架处理方法，更加便于维护，对于开发人员，技术框架使用vue、react及相关插件，技术栈相对比较固定，因此技术掌握更深入，对代码开发和系统稳定方面受益极大。对于维护人员，项目基础代码仅维护一个脚手架即可。

本实施例提出的前端脚手架处理方法，确保脚手架使用统一的技术栈、编码风格、代码检查、文件目录结构实现标准化输入，版本升级时会向下兼容，以便于团队协同，从而降低代码架构方面的风险，降低生产事故的发生，保证开发系统的稳定性。

参考图2，为本公开实施例提供了一种前端脚手架处理装置200的装置模块示意图，本申请实施例提供的前端脚手架处理装置200，如图2所示，所述前端脚手架处理装置200包括：

获取模块201，用于获取项目创建命令；

配置模块202，用于根据所述项目创建命令导出预设脚手架的初始配置文件，所述初始配置文件包括预设脚手架工具、预设目录结构以及初始流程设计结构，所述预设目录结构包括templates目录，所述templates目录用于存储包括react和vue两种框架的模板；

调整模块203，用于获取用户调整命令，并根据所述用户调整命令修改所述初始配置文件，以得到目标配置文件；

启动模块204，用于根据所述目标配置文件启动本地服务，并对待打包目标进行编译打包，以得到目标项目文件；

发布模块205，用于在目标服务器发布所述目标项目文件。

根据本申请实施例的一种具体实施方式，创建所述预设脚手架的步骤包括：

获取预设脚手架工具，所述预设脚手架工具包括commander命令行工具、inquirer命令行交互界面、chalk和ora输出控制工具；

根据所述预设脚手架工具创建预设目录结构，所述预设目录结构包括bin目录、manual目录、node_modules目录、templates目录、src目录、eslintrc.js目录、package.json目录以及tsconfig.json目录；

根据所述预设目录结构获取初始流程设计结构，所述初始流程设计结构包括项目创建模块、模块打包模块、代码校验模块、服务启动模块、模板生成模块以及文档查看模块；

根据所述脚手架工具、预设目录结构和所述初始流程设计结构生成所述初始配置文件，并在预设包管理平台中发布所述初始配置文件。

根据本申请实施例的一种具体实施方式，所述前端脚手架处理装置200还包括：

安装模块，用于从所述预设包管理平台中获取所述初始配置文件；在全局目录中安装所述初始配置文件。

本实施例提供前端脚手架处理装置200的具体实施过程可以参考上述方法实施例1中的具体实施过程，为避免重复，在此不再赘述。

此外，本公开实施例提供了一种计算机设备，所述计算机设备包括存储器以及处理器，所述存储器存储有计算机程序，所述计算机程序在所述处理器上运行时执行上述方法实施例1所提供的前端脚手架处理方法。

具体的，如图3所示，本实施例提供的电子设备300包括：

射频单元301、网络模块302、音频输出单元303、输入单元304、传感器305、显示单元306、用户输入单元307、接口单元308、存储器309、处理器310、以及电源311等部件。本领域技术人员可以理解，图3中示出的电子设备结构并不构成对电子设备的限定，电子设备可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。在本申请实施例中，电子设备包括但不限于手机、平板电脑、笔记本电脑、掌上电脑、车载电子设备、可穿戴设备、以及计步器等。

应理解的是，本申请实施例中，射频单元301可用于收发信息或通话过程中，信号的接收和发送，具体的，将来自基站的下行数据接收后，给处理器310处理；另外，将上行的数据发送给基站。通常，射频单元301包括但不限于天线、至少一个放大器、收发信机、耦合器、低噪声放大器、双工器等。此外，射频单元301还可以通过无线通信系统与网络和其他设备通信。

电子设备通过网络模块302为用户提供了无线的宽带互联网访问，如帮助用户收发电子邮件、浏览网页和访问流式媒体等。

音频输出单元303可以将射频单元301或网络模块302接收的或者在存储器309中存储的音频数据转换成音频信号并且输出为声音。而且，音频输出单元303还可以提供与电子设备300执行的特定功能相关的音频输出(例如，呼叫信号接收声音、消息接收声音等等)。音频输出单元303包括扬声器、蜂鸣器以及受话器等。

输入单元304用于接收音频或视频信号。输入单元304可以包括图形处理器(Graphics Processing Unit，GPU)3041和麦克风3042，图形处理器3041对在视频捕获模式或图像捕获模式中由图像捕获电子设备(如摄像头)获得的静态图片或视频的图像数据进行处理。处理后的图像帧可以视频播放在显示单元306上。经图形处理器3041处理后的图像帧可以存储在存储器309(或其它存储介质)中或者经由射频单元301或网络模块302进行发送。麦克风3042可以接收声音，并且能够将这样的声音处理为音频数据。处理后的音频数据可以在电话通话模式的情况下转换为可经由射频单元301发送到移动通信基站的格式输出。

电子设备300还包括至少一种传感器305，比如光传感器、运动传感器以及其他传感器。具体地，光传感器包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板3061的亮度，接近传感器可在电子设备300移动到耳边时，关闭显示面板3061和/或背光。作为运动传感器的一种，加速计传感器可检测各个方向上(一般为三轴)加速度的大小，静止时可检测出重力的大小及方向，可用于识别电子设备姿态(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等；传感器305还可以包括指纹传感器、压力传感器、虹膜传感器、分子传感器、陀螺仪、气压计、湿度计、温度计、红外线传感器等，在此不再赘述。

显示单元306用于视频播放由用户输入的信息或提供给用户的信息。显示单元306可包括显示面板3061，可以采用液晶视频播放器(Liquid Crystal Display，LCD)、有机发光二极管(Organic Light-Emitting Diode,OLED)等形式来配置显示面板3061。

用户输入单元307可用于接收输入的数字或字符信息，以及产生与电子设备的用户设置以及功能控制有关的键信号输入。具体地，用户输入单元307包括触控面板3071以及其他输入设备3072。触控面板3071，也称为触摸屏，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触控面板3071上或在触控面板3071附近的操作)。触控面板3071可包括触摸检测电子设备和触摸控制器两个部分。其中，触摸检测电子设备检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测电子设备上接收触摸信息，并将它转换成触点坐标，再送给处理器310，接收处理器310发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触控面板3071。除了触控面板3071，用户输入单元307还可以包括其他输入设备3072。具体地，其他输入设备3072可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆，在此不再赘述。

进一步的，触控面板3071可覆盖在显示面板3061上，当触控面板3071检测到在其上或附近的触摸操作后，传送给处理器310以确定触摸事件的类型，随后处理器310根据触摸事件的类型在显示面板3061上提供相应的视觉输出。虽然在图3中，触控面板3071与显示面板3061是作为两个独立的部件来实现电子设备的输入和输出功能，但是在某些实施例中，可以将触控面板3071与显示面板3061集成而实现电子设备的输入和输出功能，具体此处不做限定。

接口单元308为外部电子设备与电子设备300连接的接口。例如，外部电子设备可以包括有线或无线头戴式耳机端口、外部电源(或电池充电器)端口、有线或无线数据端口、存储卡端口、用于连接具有识别模块的电子设备的端口、音频输入/输出(I/O)端口、视频I/O端口、耳机端口等等。接口单元308可以用于接收来自外部电子设备的输入(例如，数据信息、电力等等)并且将接收到的输入传输到电子设备300内的一个或多个元件或者可以用于在电子设备300和外部电子设备之间传输数据。

存储器309可用于存储软件程序以及各种数据。存储器309可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据手机的使用所创建的数据(比如音频数据、电话本等)等。此外，存储器309可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

处理器310是电子设备的控制中心，利用各种接口和线路连接整个电子设备的各个部分，通过运行或执行存储在存储器309内的软件程序和/或模块，以及调用存储在存储器309内的数据，执行电子设备的各种功能和处理数据，从而对电子设备进行整体监控。处理器310可包括一个或多个处理单元；优选的，处理器310可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器310中。

电子设备300还可以包括给各个部件供电的电源311(比如电池)，优选的，电源311可以通过电源管理系统与处理器310逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。

另外，电子设备300包括一些未示出的功能模块，在此不再赘述。

本申请还提供一种计算机可读存储介质，所述计算机可读存储介质上存储计算机程序，所述计算机程序在处理器上运行时可以执行实施例1所示前端脚手架处理方法，为避免重复，在此不再赘述。

在本实施例中，计算机可读存储介质可以为只读存储器(Read-Only Memory，简称ROM)、随机存取存储器(Random Access Memory，简称RAM)、磁碟或者光盘等。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者终端中还存在另外的相同要素。

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

上面结合附图对本申请的实施例进行了描述，但是本申请并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本申请的启示下，在不脱离本申请宗旨和权利要求所保护的范围情况下，还可做出很多形式，均属于本申请的保护之内。

Claims (10)

1.一种前端脚手架处理方法，其特征在于，包括：

获取项目创建命令；

根据所述项目创建命令导出预设脚手架的初始配置文件，所述初始配置文件包括预设脚手架工具、预设目录结构以及初始流程设计结构，所述预设目录结构包括templates目录，所述templates目录用于存储包括react和vue两种框架的模板；

获取用户调整命令，并根据所述用户调整命令修改所述初始配置文件，以得到目标配置文件；

根据所述目标配置文件启动本地服务，并对待打包目标进行编译打包，以得到目标项目文件；

在目标服务器发布所述目标项目文件。

2.根据权利要求1所述的前端脚手架处理方法，其特征在于，创建所述预设脚手架的步骤包括：

获取预设脚手架工具，所述预设脚手架工具包括commander命令行工具、inquirer命令行交互界面、chalk和ora输出控制工具；

根据所述预设脚手架工具创建预设目录结构，所述预设目录结构包括bin目录、manual目录、node_modules目录、templates目录、src目录、eslintrc.js目录、package.json目录以及tsconfig.json目录；

根据所述预设目录结构获取初始流程设计结构，所述初始流程设计结构包括项目创建模块、模块打包模块、代码校验模块、服务启动模块、模板生成模块以及文档查看模块；

根据所述脚手架工具、预设目录结构和所述初始流程设计结构生成所述初始配置文件，并在预设包管理平台中发布所述初始配置文件。

3.根据权利要求2所述的前端脚手架处理方法，其特征在于，所述获取项目创建命令的步骤之前，所述方法还包括：

从所述预设包管理平台中获取所述初始配置文件；

在全局目录中安装所述初始配置文件。

4.根据权利要求2所述的前端脚手架处理方法，其特征在于，

所述bin目录用于存储所述初始配置文件；

所述manual目录用于存储用户文档；

所述node_modules目录用于存储依赖包；

所述templates目录用于存储模板，所述模板包括reac和vue两种框架；

所述src目录用于存储脚手架逻辑代码；

所述eslintrc.js目录用于存储eslint规则配置文件；

所述package.json目录用于存储npm配置文件；

所述tsconfig.json目录用于存储typescript配置文件。

5.根据权利要求2所述的前端脚手架处理方法，其特征在于，

所述项目创建模块用于在根据所述项目创建命令新建项目文件；

所述模块打包模块用于根据所述目录结构扫描待打包目标，并基于webpack工具对所述待打包目标进行打包；

所述代码校验模块用于扫描待检查代码，并基于eslint规则对所述待检查代码进行规则校验；

所述服务启动模块用于基于webpack-dev-server工具启动本地服务；

所述模板生成模块用于将所述目录结构中存储的模板文件拷贝到用户目录；

所述文档查看模块用于基于vuepress工具将md格式的用户操作手册转换为html格式的用户操作手册，以供用户查看所述用户操作手册。

6.一种前端脚手架处理装置，其特征在于，包括：

获取模块，用于获取项目创建命令；

配置模块，用于根据所述项目创建命令导出预设脚手架的初始配置文件，所述初始配置文件包括预设脚手架工具、预设目录结构以及初始流程设计结构，所述预设目录结构包括templates目录，所述templates目录用于存储包括react和vue两种框架的模板；

调整模块，用于获取用户调整命令，并根据所述用户调整命令修改所述初始配置文件，以得到目标配置文件；

启动模块，用于根据所述目标配置文件启动本地服务，并对待打包目标进行编译打包，以得到目标项目文件；

发布模块，用于在目标服务器发布所述目标项目文件。

7.根据权利要求6所述的前端脚手架处理装置，其特征在于，创建所述预设脚手架的步骤包括：

获取预设脚手架工具，所述预设脚手架工具包括commander命令行工具、inquirer命令行交互界面、chalk和ora输出控制工具；

根据所述预设脚手架工具创建预设目录结构，所述预设目录结构包括bin目录、manual目录、node_modules目录、templates目录、src目录、eslintrc.js目录、package.json目录以及tsconfig.json目录；

根据所述预设目录结构获取初始流程设计结构，所述初始流程设计结构包括项目创建模块、模块打包模块、代码校验模块、服务启动模块、模板生成模块以及文档查看模块；

根据所述脚手架工具、预设目录结构和所述初始流程设计结构生成所述初始配置文件，并在预设包管理平台中发布所述初始配置文件。

8.根据权利要求7所述的前端脚手架处理装置，其特征在于，所述装置还包括：

安装模块，用于从所述预设包管理平台中获取所述初始配置文件；在全局目录中安装所述初始配置文件。

9.一种电子设备，其特征在于，所述电子设备包括处理器和存储器，所述存储器存储有计算机程序，所述计算机程序在所述处理器上运行时执行权利要求1至5任一项所述的前端脚手架处理方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机程序，所述计算机程序在处理器上运行时执行权利要求1至5中任一项所述的前端脚手架处理方法。

Images