CN117055858A - 一种前端脚手架的搭建方法 - Google Patents

Abstract

本申请涉及前端开发技术领域，具体涉及一种前端脚手架的搭建方法；该方法包括获取待搭建的目标前端脚手架的框架类型；根据该框架类型，创建各个模板工程；获取目标一键生成脚本，并通过该目标一键生成脚本拉取该各个模板工程，以搭建该目标前端脚手架。上述方案使用自定义的模板工程生成项目，统一所有项目的目录结构、编码风格、引入的第三方软件包版本；在业务需求多元化时代，能支持一键生成多种类型的项目应用，有效提高业务开发人员的项目创建速率；支持一键生成微前端基座和微前端子应用，为企业快速实施微前端架构提供实践基础。

Description

一种前端脚手架的搭建方法

技术领域

本申请涉及前端开发技术领域，具体涉及一种前端脚手架的搭建方法。

背景技术

脚手架用于创建项目基础结构、提供项目规范和约定。因为在前端工程中，可能会存在相同的组织结构、开发范式、模块依赖、工具配置以及基础代码，脚手架就是解决上述问题的工具，通过创建项目骨架自动的执行工作。

对于我们日常开发首要解决的就是创建项目问题，常用的脚手架工具包括create-react-app、vue-cli以及Angular-cli，此类脚手架是根据信息创建对应的项目基础结构，适用于自身所服务的框架所对应的项目，在启动脚手架之后，脚手架会自动地去询问一些预设问题，通过回答的结果结合一些模板文件，生成项目的结构。然而这些脚手架只提供通用的解决方案，它们并不关注上层的设计，比如：统一Ajax封装，公共库的外链，Docker构建，模板工程约束，代码规范约束，公共依赖的统一控制，服务的监控报警、拨测，前端异常的监控上报，强缓存控制，CDN接入，Mock方案等。

因此在上述方案中，如果有多服务创建需求(如庞大应用拆分以及多项目任务)，现有前端脚手架无法根据企业业务的复杂性做更上层的设计，在创建项目、编码、预览测试、代码提交、部署等阶段效率低下。

发明内容

有鉴于此，本申请提供了一种前端脚手架的搭建方法，可以根据企业业务的复杂性做更上层的设计，在创建项目、编码、预览测试、代码提交、部署等阶段效率较高，该技术方案如下。

第一方面，本申请提供了一种前端脚手架的搭建方法，所述方法包括：

获取待搭建的目标前端脚手架的框架类型；

根据所述框架类型，创建与所述框架类型相关的各个模板工程；

获取目标一键生成脚本，并通过所述目标一键生成脚本拉取所述各个模板工程，以搭建所述目标前端脚手架。

根据上述技术手段，使用自定义模板工程生成项目，在业务需求多元化时代，能支持一键生成多种类型的项目应用，有效提高业务开发人员的项目创建速率。

结合第一方面，在一种实施方式中，所述模板工程包括Web应用、文档库、组件库、React本机应用程序、hooks库、微前端基座、微前端子应用、BFF标准工程及微信小程序。

根据上述技术手段，本申请使用自定义模板工程生成项目，在业务需求多元化时代，能支持一键生成多种类型的项目应用。

结合第一方面对应的实施方式，根据所述框架类型，获取所述框架类型对应的依赖库类型；

根据所述框架类型及所述依赖库类型，获取待构建的各个模板工程分别对应的目录结构、编码风格及所引入的第三方软件包版本；

根据所述目录结构、所述编码风格及所引入的第三方软件包版本，创建各个模板工程。

根据上述技术手段，本申请使用自定义的模板工程生成项目，统一所有项目的目录结构、编码风格、引入的第三方软件包版本，有效提高业务开发人员的项目创建速率；支持一键生成微前端基座和微前端子应用，为企业快速实施微前端架构提供实践基础。

结合第一方面对应的实施方式，所述框架类型包括React开发框架、Vue渐进式框架及Angular开发框架中的至少一者；

所述依赖库类型包括UI库、DOM库、路由库、状态管理库及国际化库中的至少一者。

结合第一方面对应的实施方式，获取目标运行环境及目标命令行工具；

根据所述目标运行环境及所述目标命令行工具，获取目标一键生成脚本。

根据上述技术手段，本申请对一键生成脚本进行获取，在业务需求多元化时代，能支持一键生成多种类型的项目应用，有效提高业务开发人员的项目创建速率。

结合第一方面对应的实施方式，初始化命令对象、获取命令名称、所述目标前端脚手架的脚手架版本，并根据所述命令名称及所述脚手架版本，获取用户帮助信息；

获取用户输入的项目类型，并根据所述项目类型，利用所述目标一键生成脚本拉取所述项目类型对应的模板工程，以执行所述项目类型对应的模板工程的安装操作。

根据上述技术手段，本申请对一键生成脚本进行获取，在业务需求多元化时代，能支持一键生成多种类型的项目应用，有效提高业务开发人员的项目创建速率。

结合第一方面对应的实施方式，将当前项目的安装目录下的配置文件拷贝至项目根目录，并基于所述配置文件确定所述当前项目的项目名信息及版本信息；所述配置文件定义了所述当前项目所需要的各种模块及配置信息；

根据所述配置文件的内容，安装所述当前项目所需的依赖项并执行过滤操作，将过滤后的工程目录拷贝至所述项目根目录。

根据上述技术手段，本申请使用自定义的模板工程生成项目，统一所有项目的目录结构、编码风格、引入的第三方软件包版本；在业务需求多元化时代，能支持一键生成多种类型的项目应用，有效提高业务开发人员的项目创建速率；支持一键生成微前端基座和微前端子应用，为企业快速实施微前端架构提供实践基础。

第二方面，本申请提供了一种前端脚手架的搭建装置，所述装置包括：

框架类型获取模块，用于获取待搭建的目标前端脚手架的框架类型；

模板工程创建模块，用于根据所述框架类型，创建与所述框架类型相关的各个模板工程；

目标前端脚手架构建模块，用于获取目标一键生成脚本，并通过所述目标一键生成脚本拉取所述各个模板工程，以构建所述目标前端脚手架。

第三方面，本申请提供了一种计算机设备，所述计算机设备包括处理器和存储器，所述存储器中存储有至少一条指令，所述至少一条指令由所述处理器加载并执行以实现上述的一种前端脚手架的搭建方法。

第四方面，本申请提供了一种计算机可读存储介质，所述存储介质中存储有至少一条指令，所述至少一条指令由处理器加载并执行以实现上述的一种前端脚手架的搭建方法。

附图说明

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

图1是根据一示例性实施例示出的一种前端脚手架的搭建方法的方法流程图。

图2是根据一示例性实施例示出的一种前端脚手架的搭建方法的方法流程图。

图3是根据一示例性实施例示出的一种前端脚手架的搭建方法的方法流程图。

图4是根据一示例性实施例示出的一种前端脚手架的搭建装置的结构方框图。

图5示出了本申请一示例性实施例示出的计算机设备的结构框图。

具体实施方式

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

前端脚手架是前端工程化的发起者，它可以自动创建项目基础结构，提供项目规范和约定；前端脚手架的实现方式是根据开发者提供的信息自动创建对应的项目基础结构、文件，以及一些特定的配置；目前市场上已有的前端框架均也提供了各自对应的脚手架，如React前端框架的create-react-app，Vue前端框架的vue-cli，Angular前端框架的ng-cli，但它们只能生成web应用这一种模板，功能比较单一，代码约束方面未制定统一完善的语法规则，依赖的第三方软件通常也是最新版本，未固定版本号以防范版本不匹配导致的软件不兼容问题。对此，本自研脚手架提供了多种可生成的模板工程。

根据本申请实施例，提供了一种前端脚手架的搭建方法实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

图1是根据一示例性实施例示出的一种前端脚手架的搭建方法的方法流程图。如图1所示，该搭建方法可以包括如下步骤：

步骤S101、获取待搭建的目标前端脚手架的框架类型。

在一种可能的实施方式中，在搭建新项目的时候，项目中会有一些相同的组织结构，相同的开发范式，相同的模块依赖，相同的工具配置，相同的基础代码。使用脚手架工具可以快速搭建一个特定的项目骨架，把这些大量的重复的机械性的复杂的工作自动完成，后期基于这个骨架进行开发。而在搭建的前端脚手架前，需要基于前端脚手架的框架类型，确定模板工程，从而实现前端脚手架的搭建，因此，首先要根据实际应用及需要确认所要搭建的目标前端脚手架的框架类型。

步骤S102、根据该框架类型，创建与该框架类型相关的各个模板工程。

在一种可能的实施方式中，确定好所要搭建的目标前端脚手架的框架类型后，即可根据该框架类型创建与该框架类型相关的各个模板工程，即上述模板工程；该模板工程用以为所要搭建的新项目提供模板，该模板包括如组织结构、开发范式、工具配置以及基础代码等。该模板工程的数量及类型也可以在实际应用中根据需要进行设置。

步骤S103、获取目标一键生成脚本，并通过该目标一键生成脚本拉取该各个模板工程，以搭建该目标前端脚手架。

在一种可能的实施方式中，在创建好各个模板工程后，需要根据用户所要搭建的新项目的项目类型确定模板工程的类型，此时需要编写一个一键生成脚本(即上述目标一键生成脚本)，搭建出前端脚手架。通过该一键生成脚本实现对该新项目的项目类型所对应的模板工程进行拉取，从而安装该新项目的项目类型所对应的模板工程，基于这个安装好的模板工程对所要搭建的新项目进行开发。

综上所述，本申请获取待搭建的目标前端脚手架的框架类型；根据该框架类型，创建各个模板工程；获取目标一键生成脚本，并通过该目标一键生成脚本拉取该各个模板工程，以搭建该目标前端脚手架。上述方案使用自定义的模板工程生成项目，统一所有项目的目录结构、编码风格、引入的第三方软件包版本；在业务需求多元化时代，能支持一键生成多种类型的项目应用，有效提高业务开发人员的项目创建速率；支持一键生成微前端基座和微前端子应用，为企业快速实施微前端架构提供实践基础。

图2是根据一示例性实施例示出的一种前端脚手架的搭建方法的方法流程图。如图2所示，该搭建方法可以包括如下步骤：

步骤S201、获取待搭建的目标前端脚手架的框架类型。

进一步的，本申请的前端框架的一键生成功能主要分为模板工程和一键生成命令两大部分。首先得把需支持的模板工程的项目结构、最小化核心内容准备好，放到公司级npm仓库，一键生成脚本才能获得生成各种项目的模板来源，以便根据用户的选择在文件系统中创建出对应的项目工程代码。

在一种可能的实施方式中，该框架类型包括React开发框架、Vue渐进式框架及Angular开发框架中的至少一者。

步骤S202、根据该框架类型，获取该框架类型对应的依赖库类型。

在一种可能的实施方式中，该依赖库类型包括UI库、DOM库、路由库、状态管理库及国际化库中的至少一者。

示例性的，若前端技术框架选型是React开发框架，则可以选用react@17.0.1为UI库去创建视图界面，react-dom@17.0.1为DOM库去做和浏览器或DOM相关的操作，react-router-dom@5.2.0为路由库实现web应用中的路由功能，react-redux@7.2.4，redux@4.1.1为状态管理库去处理组件间的通信，i18next@21.6.12，react-i18next@11.15.5为国际化库为页面文案的国际化展示做支持，由此构建出一个完整的web应用，亦在此基础上，创建各个React模板工程的目录结构。

步骤S203、根据该框架类型及该依赖库类型，获取待构建的各个模板工程分别对应的目录结构、编码风格及所引入的第三方软件包版本。

在一种可能的实施方式中，请参照图3示出的一种前端脚手架的搭建方法的方法流程图，该模板工程包括Web应用、文档库、组件库、React本机应用程序(即React NativeApp)、hooks库、微前端基座、微前端子应用、BFF标准工程及微信小程序。也就是说，为了解决相关技术只能生成web应用这一种模板工程，功能比较单一，代码约束方面未制定统一完善的语法规则，依赖的第三方软件通常也是最新版本，未固定版本号以防范版本不匹配导致的软件不兼容问题，本申请的脚手架提供了多种可生成的模板工程，它们分别是上述九种类型。

步骤S204、根据该目录结构、该编码风格及所引入的第三方软件包版本，创建各个模板工程。

进一步的，以下对各个模板工程的创建过程进行详细说明：

1、针对Web应用：web应用的模板工程的目录结构包括源码文件、类型定义文件、html入口文件、lint、git、ts配置文件、package.json文件，这些项目文件是通过yarn add命令拉取npm仓库中的对应模板库而生成；

本地开发时可依赖自研脚手架打包工具@gw/gw-scripts的develop命令启动，该develop命令借助webpack工具打包并启动webpack-dev-server这样一个nodejs服务，于是在浏览器可以访问web应用的页面；

打包部署时则依赖@gw/gw-scripts的prod命令，该prod命令依然借助webpack进行打包，与develop命令不同的是，该prod命令使用了mini-css-extract-plugin插件来打包css文件，并对css文件进行了代码压缩，还使用了webpack-manifest-plugin插件，来生成manifest.json文件清单以描述打包前文件对应打包后的文件名等；

另外，develop命令和prod命令这两个命令都能够借助yargs-parser工具接收命令行输入的环境变量，如gw-scripts develop--env＝test，能够启动运行出一个test环境的web应用；gw-scripts prod test，则会打包出一个test环境的包，然后利用项目中内置的Dockerfile，在发布时对其进行容器化部署；

此外，针对上文提到的自研脚手架打包工具@gw/gw-scripts，其基于nodejs运行环境及一些第三方工具库去解析命令行参数，继而拼接参数，执行命令。在执行命令过程中，配置模块打包工具webpack以在处理应用程序时，从一个或多个入口点构建依赖图，将项目中所需的每一个模块组合成一个或多个用于展示内容的静态资源bundles。@gw/gw-scripts提供了develop命令来为本地开发做打包启动、prod命令来为服务器部署做打包、lib-umd命令来为js库做umd模块化打包、lib-esm命令来为js库做esm模块化打包、lib-utils命令来为工具库做打包、lib-components命令来为组件库做打包等。

2、针对文档库、组件库及hooks库模板：文档库、组件库及hooks库模板则采用docusaurus 2.0.0工具生成目录结构，在此基础上，组件库及hooks库模板工程还会再加上packages目录去放置具体组件或hook的源代码，由此构建出完整的目录结构；

本地开发时依赖docusaurus创建工具提供的start命令启动呈现演示网站页面，调试组件的使用文档和演示示例；打包发布时则依赖上述脚手架打包工具@gw/gw-scripts的lib-components命令去做打包，该lib-components命令借助webpack打包工具打出umd模块化方案下的包，借助gulp构建工具打出esm和cjs模块化方案下的包。

3、针对React本机应用程序(即React Native App)：与web应用不同的是，ReactNative App除了依赖react@17.0.2为UI库去创建视图界面，还依赖react-native@0.66.4去构建原生跨平台移动应用；

在构建项目模板时，首先使用React Native内建的命令行工具创建一个新项目作为React Native App的初始项目结构，在此基础上，安装设备信息库react-native-device-info@8.4.8以在必要的时候获取设备信息，并使用上述@gw/eslint-config-gw包来统一js代码风格，该包编写了较完整的规范js代码的配置规则，能够配合Eslint工具对代码做静态分析、检查；

开发运行时，则利用react-native提供的命令run-ios打出iOS平台运行的包，run-android打出Android平台运行的包。

4、针对微前端基座及微前端子应用：微前端基座及微前端子应用都是在web模板工程的基础上，集成了qiankun@2.7.0，不同的是微前端基座在入口文件中增加注册微应用的代码逻辑；微前端子应用则是在入口文件中增加导出相应生命周期钩子的代码逻辑，以供主应用在适当的时机调用；

基座和微前端子应用独立运行时的启动打包同react web应用的打包，与之不同的是，当微前端子应用想要以一个微应用的身份运行时，可以在develop的命令后追加--micro的参数。

5、针对BFF标准工程：BFF标准工程使用typescript语言，依赖Nodejs的express框架，首先使用express-cli命令创建一个新项目作为初始项目结构，在此基础上编写样例接口逻辑，该接口调用多个java后台，将数据整合、处理成前端需要展示的数据，由此组成一个完整的BFF标准工程项目；

与前述模板工程打包方式不同，BFF标准工程的打包，是用tsc编译器直接编译，结合tsc-alias，在编译后用相对路径对代码中的别名路径进行替换；

另外，标准工程中还引入了第三方工具包skywalking-backend-js，来创建skywalking客户端，连接企业内部署好的skywalking服务，以便能在skywalking UI页面端追踪服务的调用链路并查看相关日志。

6、针对微信小程序：其使用typescript语言，基于Taro3开放式跨端跨框架解决方案，首先使用@tarojs/cli命令创建一个新项目作为初始项目结构，在此基础上修改目录结构以更贴近本脚手架创建的web应用的项目结构，保持项目结构的一致性，并引入上述自研的@gw/eslint-config-gw包来统一js代码风格，@gw/stylelint-config-gw包来统一html和css代码风格；

除此之外，配置小程序模板工程以支持使用模块引入别名及注入环境变量ENV和MOCK；ENV环境变量的注入方便开发者在本地开发时联调各环境的后端接口；MOCK环境变量的注入方便在前端先行、后端滞后的场景下为开发者提供模拟数据的方案。

综上，以上各个模板工程，在完善之后即可确定版本号，执行npm publish命令推向npm仓库，以供脚手架一键生成时拉取。

步骤S205、获取目标一键生成脚本，并通过该目标一键生成脚本拉取该各个模板工程，以搭建该目标前端脚手架。

在一种可能的实施方式中，通过以下步骤实现获取目标一键生成脚本：

获取目标运行环境及目标命令行工具；

根据该目标运行环境及该目标命令行工具，获取目标一键生成脚本。

进一步的，本申请实施例提供的一键生成命令，则是基于nodejs(nodejs即上述目标运行环境，其是一个基于Chrome V8引擎的JavaScript运行环境)，结合市场常用的命令行工具，如chalk，commander，figlet，inquirer等，从而编写相应的一键生成脚本。

在一种可能的实施方式中，通过以下步骤实现通过该目标一键生成脚本拉取该各个模板工程：

初始化命令对象、获取命令名称、该目标前端脚手架的脚手架版本，并根据该命令名称及该脚手架版本，获取用户帮助信息；

获取用户输入的项目类型，并根据该项目类型，利用该目标一键生成脚本拉取该项目类型对应的模板工程，以执行该项目类型对应的模板工程的安装操作。

在一种可能的实施方式中，在执行该项目类型对应的模板工程的安装操作之后，将当前项目的安装目录下的配置文件拷贝至项目根目录，并基于该配置文件确定该当前项目的项目名信息及版本信息；该配置文件定义了该当前项目所需要的各种模块及配置信息；

根据该配置文件的内容，安装该当前项目所需的依赖项并执行过滤操作，将过滤后的工程目录拷贝至该项目根目录。

进一步的，创建项目脚本的流程如下：首先检查node版本和脚手架版本，当node版本低于10时会直接退出进程，当脚手架版本不是最新版本时会提示更新。然后初始化一个commander对象(即上述初始化命令对象)，获取命令名称、脚手架版本，生成用户帮助信息。该commander对象，负责将参数解析为选项和命令参数，帮助描述命令行界面，从而实现一个有帮助的系统，辅助用户在输入脚手架命令时，能输出一些可用信息的，比如输入gw-v，会出现脚手架的版本信息，输入gw-h，是输出所支持命令的用户帮助信息，即告知用户哪些命令可用，这些命令搭配哪些参数去用，有什么作用；其中，gw-v就是输出版本号信息，检测用户当前安装的gw-cli的版本号，gw-cli就是脚手架。

此时，读取用户输入，根据用户选中的项目类型，执行相应的模板工程安装，模板工程安装的实质即是利用npm拉取仓库里相应项目类型的最新版本模板工程。

安装完成后，将安装目录下的package.json文件(即上述配置文件)拷贝至项目根目录，并给该package.json文件附加name信息为创建项目时用户输入的项目名(即上述项目名信息)，version信息(即上述版本信息)为一个默认的版本号等。

修改后，根据package.json文件的内容执行npminstall命令(npminstall命令的原理是从npm仓库中下载依赖项并将其安装到项目中)，安装相应的依赖。npm仓库是一个公共的、全球性的存储库，其中包含了数百万个npm包。当用户运行npminstall命令时，npm会首先检查项目中的package.json文件，该文件包含了项目所需的所有依赖项的名称和版本号。npm会根据package.json文件中的依赖项列表，从npm仓库中下载相应的依赖项。最后，过滤出node_modules文件和package.json文件，将工程目录拷贝至根目录下，至此完成一键生成功能。

实际使用时，用户只需在电脑终端(CMD/Powershell/Bash/zsh等)运行该工具，当出现创建项目选项的提示语时，选择符合需求的项目类型，就可以下载对应的模板工程并安装好所有的依赖。本申请得益于模板工程是完全自研创建，用户可以按照自身业务需求去定制化创建新模板工程、升级已有模板工程，在多业务团队中统一使用这种方式创建项目，也可以保证项目约束的一致性。

综上所述，本申请获取待搭建的目标前端脚手架的框架类型；根据该框架类型，创建各个模板工程；获取目标一键生成脚本，并通过该目标一键生成脚本拉取该各个模板工程，以搭建该目标前端脚手架。上述方案使用自定义的模板工程生成项目，统一所有项目的目录结构、编码风格、引入的第三方软件包版本；在业务需求多元化时代，能支持一键生成多种类型的项目应用，有效提高业务开发人员的项目创建速率；支持一键生成微前端基座和微前端子应用，为企业快速实施微前端架构提供实践基础。

图4是根据一示例性实施例示出的一种前端脚手架的搭建装置的结构方框图。该装置包括：

框架类型获取模块401，用于获取待搭建的目标前端脚手架的框架类型；

模板工程创建模块402，用于根据该框架类型，创建与该框架类型相关的各个模板工程；

目标前端脚手架构建模块403，用于获取目标一键生成脚本，并通过该目标一键生成脚本拉取该各个模板工程，以构建该目标前端脚手架。

在一种可能的实施方式中，该模板工程包括Web应用、文档库、组件库、React本机应用程序、hooks库、微前端基座、微前端子应用、BFF标准工程及微信小程序。

在一种可能的实施方式中，该模板工程创建模块402，还用于：

根据该框架类型，获取该框架类型对应的依赖库类型；

根据该框架类型及该依赖库类型，获取待构建的各个模板工程分别对应的目录结构、编码风格及所引入的第三方软件包版本；

根据该目录结构、该编码风格及所引入的第三方软件包版本，创建各个模板工程。

在一种可能的实施方式中，该框架类型包括React开发框架、Vue渐进式框架及Angular开发框架中的至少一者；

该依赖库类型包括UI库、DOM库、路由库、状态管理库及国际化库中的至少一者。

在一种可能的实施方式中，该目标前端脚手架构建模块403，还用于：

获取目标运行环境及目标命令行工具；

根据该目标运行环境及该目标命令行工具，获取目标一键生成脚本。

在一种可能的实施方式中，该目标前端脚手架构建模块403，还用于：

初始化命令对象、获取命令名称、该目标前端脚手架的脚手架版本，并根据该命令名称及该脚手架版本，获取用户帮助信息；

获取用户输入的项目类型，并根据该项目类型，利用该目标一键生成脚本拉取该项目类型对应的模板工程，以执行该项目类型对应的模板工程的安装操作。

在一种可能的实施方式中，该装置还用于：

将当前项目的安装目录下的配置文件拷贝至项目根目录，并基于该配置文件确定该当前项目的项目名信息及版本信息；该配置文件定义了该当前项目所需要的各种模块及配置信息；

根据该配置文件的内容，安装该当前项目所需的依赖项并执行过滤操作，将过滤后的工程目录拷贝至该项目根目录。

综上所述，本申请获取待搭建的目标前端脚手架的框架类型；根据该框架类型，创建各个模板工程；获取目标一键生成脚本，并通过该目标一键生成脚本拉取该各个模板工程，以搭建该目标前端脚手架。上述方案使用自定义的模板工程生成项目，统一所有项目的目录结构、编码风格、引入的第三方软件包版本；在业务需求多元化时代，能支持一键生成多种类型的项目应用，有效提高业务开发人员的项目创建速率；支持一键生成微前端基座和微前端子应用，为企业快速实施微前端架构提供实践基础。

请参阅图5，其是根据本申请一示例性实施例提供的一种计算机设备示意图，所述计算机设备包括存储器和处理器，所述存储器用于存储计算机程序，所述计算机程序被所述处理器执行时，实现上述的一种前端脚手架的搭建方法。

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

存储器作为一种非暂态计算机可读存储介质，可用于存储非暂态软件程序、非暂态计算机可执行程序以及模块，如本申请实施方式中的方法对应的程序指令/模块。处理器通过运行存储在存储器中的非暂态软件程序、指令以及模块，从而执行处理器的各种功能应用以及数据处理，即实现上述方法实施方式中的方法。

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

在一示例性实施例中，还提供了一种计算机可读存储介质，用于存储有至少一条计算机程序，所述至少一条计算机程序由处理器加载并执行以实现上述方法中的全部或部分步骤。例如，该计算机可读存储介质可以是只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、只读光盘(Compact Disc Read-Only Memory，CD-ROM)、磁带、软盘和光数据存储设备等。

本领域技术人员在考虑说明书及实践这里公开的申请后，将容易想到本申请的其它实施方案。本申请旨在涵盖本申请的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本申请的一般性原理并包括本申请未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本申请的真正范围和精神由下面的权利要求指出。

应当理解的是，本申请并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本申请的范围仅由所附的权利要求来限制。

Claims (10)

1.一种前端脚手架的搭建方法，其特征在于，所述方法包括：

获取待搭建的目标前端脚手架的框架类型；

根据所述框架类型，创建与所述框架类型相关的各个模板工程；

获取目标一键生成脚本，并通过所述目标一键生成脚本拉取所述各个模板工程，以搭建所述目标前端脚手架。

2.根据权利要求1所述的方法，其特征在于，所述模板工程包括Web应用、文档库、组件库、React本机应用程序、hooks库、微前端基座、微前端子应用、BFF标准工程及微信小程序。

3.根据权利要求2所述的方法，其特征在于，所述根据所述框架类型，创建与所述框架类型相关的各个模板工程，包括：

根据所述框架类型，获取所述框架类型对应的依赖库类型；

根据所述框架类型及所述依赖库类型，获取待构建的各个模板工程分别对应的目录结构、编码风格及所引入的第三方软件包版本；

根据所述目录结构、所述编码风格及所引入的第三方软件包版本，创建各个模板工程。

4.根据权利要求3所述的方法，其特征在于，所述框架类型包括React开发框架、Vue渐进式框架及Angular开发框架中的至少一者；

所述依赖库类型包括UI库、DOM库、路由库、状态管理库及国际化库中的至少一者。

5.根据权利要求1所述的方法，其特征在于，所述获取目标一键生成脚本，包括：

获取目标运行环境及目标命令行工具；

根据所述目标运行环境及所述目标命令行工具，获取目标一键生成脚本。

6.根据权利要求1至5任一所述的方法，其特征在于，所述通过所述目标一键生成脚本拉取所述各个模板工程，包括：

初始化命令对象、获取命令名称、所述目标前端脚手架的脚手架版本，并根据所述命令名称及所述脚手架版本，获取用户帮助信息；

获取用户输入的项目类型，并根据所述项目类型，利用所述目标一键生成脚本拉取所述项目类型对应的模板工程，以执行所述项目类型对应的模板工程的安装操作。

7.根据权利要求1所述的方法，其特征在于，在所述执行所述项目类型对应的模板工程的安装操作之后，所述方法还包括：

将当前项目的安装目录下的配置文件拷贝至项目根目录，并基于所述配置文件确定所述当前项目的项目名信息及版本信息；所述配置文件定义了所述当前项目所需要的各种模块及配置信息；

根据所述配置文件的内容，安装所述当前项目所需的依赖项并执行过滤操作，将过滤后的工程目录拷贝至所述项目根目录。

8.一种前端脚手架的搭建装置，其特征在于，所述装置包括：

框架类型获取模块，用于获取待搭建的目标前端脚手架的框架类型；

模板工程创建模块，用于根据所述框架类型，创建与所述框架类型相关的各个模板工程；

目标前端脚手架构建模块，用于获取目标一键生成脚本，并通过所述目标一键生成脚本拉取所述各个模板工程，以构建所述目标前端脚手架。

9.一种计算机设备，其特征在于，所述计算机设备包括处理器和存储器，所述存储器中存储有至少一条指令，所述至少一条指令由所述处理器加载并执行以实现如权利要求1至7任一所述的一种前端脚手架的搭建方法。

10.一种计算机可读存储介质，其特征在于，所述存储介质中存储有至少一条指令，所述至少一条指令由处理器加载并执行以实现如权利要求1至7任一所述的一种前端脚手架的搭建方法。