CN116069325B

CN116069325B - 前端项目构建方法、装置、设备及计算机可读存储介质

Info

Publication number: CN116069325B
Application number: CN202310042348.6A
Authority: CN
Inventors: 王港
Original assignee: Shenzhen Mingyuanyun Procurement Technology Co ltd
Current assignee: Shenzhen Mingyuanyun Procurement Technology Co ltd
Priority date: 2023-01-28
Filing date: 2023-01-28
Publication date: 2023-08-04
Anticipated expiration: 2043-01-28
Also published as: CN116069325A

Abstract

本申请公开了一种前端项目构建方法、装置、设备及计算机可读存储介质，所述前端项目构建方法包括：接收用户在命令行界面输入的可执行指令，并确定所述可执行指令的指令类型；在所述指令类型为构建指令之后，确定所述可执行指令包括的构建工具；从预设的项目脚手架中选择一个目标配置方式，根据所述目标配置方式配置所述构建工具；从所述项目脚手架中选择与配置后所述构建工具匹配的配置文件，根据所述配置文件构建目标项目。本申请提高了前端项目的开发效率。

Description

前端项目构建方法、装置、设备及计算机可读存储介质

技术领域

本申请涉及计算机技术领域，尤其涉及一种前端项目构建方法、装置、设备及计算机可读存储介质。

背景技术

在前端工程化项目中，构建部署是至关重要的一环，一般通过webpack这一类构建工具构建本地项目，生成浏览器可识别的HTML（HyperText Markup Language，超文本笔记语言）、JS（JavaScript）和CSS（Cascading Style Sheets，层叠样式表）。

目前，前端发展迅速，技术更替很快，前端开发项目代码分为构建代码和业务代码，项目开发每次都需要手动创建项目，编写构建代码与业务代码，然后由构建代码生成的配置文件配置各种编译环境，开发期间又需要多种服务配合完成开发，整个周期基本上都需要依赖前端项目中的配置文件，每次开发前端项目时需要编写相应的配置文件，开发效率非常低下。

发明内容

本申请的主要目的在于提供一种前端项目方法、装置、设备及计算机可读存储介质，旨在解决如何提高前端项目的开发效率的技术问题。

为实现上述目的，本申请提供一种前端项目构建方法，所述前端项目构建方法包括以下步骤：

接收用户在命令行界面输入的可执行指令，并确定所述可执行指令的指令类型；

在所述指令类型为构建指令之后，确定所述可执行指令包括的构建工具；

从预设的项目脚手架中选择一个目标配置方式，根据所述目标配置方式配置所述构建工具；

从所述项目脚手架中选择与配置后所述构建工具匹配的配置文件，根据所述配置文件构建目标项目。

可选地，所述根据所述配置文件构建目标项目的步骤，包括：

从预设的代码目录下获取业务代码，并从所述项目脚手架中获取标准代码规范；

检查所述业务代码是否符合所述标准代码规范；

在所述业务代码符合所述标准代码规范之后，根据所述配置文件生成代码依赖；

在所述业务代码中安装所述代码依赖得到目标项目。

可选地，所述根据所述配置文件生成代码依赖得步骤之前，包括：

从所述项目脚手架中获取标准代码类型，检查所述业务代码是否符合所述标准代码类型；

在所述业务代码符合所述标准代码类型之后，则执行根据所述配置文件生成代码依赖的步骤。

可选地，所述并确定所述可执行指令的指令类型的步骤之后，包括：

在所述指令类型为代码规范检查之后，从预设的代码目录下获取业务代码，并从预设的项目脚手架中获取标准代码规范；

检查所述业务代码是否符合所述标准代码规范，并输出检查结果。

在所述指令类型为配置更新之后，从预设的项目脚手架中获取配置文件；

基于所述可执行指令对应的更新文件更新所述配置文件，并将更新后的所述配置文件写入所述项目脚手架中。

在所述指令类型为创建项目之后，确定所述可执行指令包括的项目类型；

从预设的项目脚手架中选择与所述项目类型匹配的项目模板；

从预设的代码目录下获取业务代码，将所述业务代码写入所述项目模板中。

在所述指令类型为新建文件之后，确定所述可执行指令包括的文件类型；

从预设的项目脚手架中选择与所述文件类型匹配的文件模板；

从预设的代码目录下获取业务代码，将所述业务代码写入所述文件模板中。

此外，为实现上述目的，本申请还提供一种前端项目构建装置，所述前端项目构建装装置包括：

接收模块，用于接收用户在命令行界面输入的可执行指令，并确定所述可执行指令的指令类型；

确定模块，用于在所述指令类型为构建指令之后，确定所述可执行指令包括的构建工具；

配置模块，用于从预设的项目脚手架中选择一个目标配置方式，根据所述目标配置方式配置所述构建工具；

构建模块，用于从所述项目脚手架中选择与配置后所述构建工具匹配的配置文件，根据所述配置文件构建目标项目。

此外，为实现上述目的本申请，还提供一种前端项目构建设备，所述前端项目构建设备包括：存储器、处理器及存储在所述存储器上的前端项目构建程序；所述处理器用于执行所述前端项目构建程序，以实现上述前端项目构建方法的步骤。

此外，为实现上述目的，本申请还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有一个或者一个以上程序，所述一个或者一个以上程序还可被一个或者一个以上的处理器执行以用于实现上述前端项目构建方法的步骤。

本申请通过接收用户在命令行界面输入的可执行指令，并确定所述可执行指令的指令类型；在所述指令类型为构建指令之后，确定所述可执行指令包括的构建工具；从预设的项目脚手架中选择一个目标配置方式，根据所述目标配置方式配置所述构建工具；从所述项目脚手架中选择与配置后所述构建工具匹配的配置文件，根据所述配置文件构建目标项目，实现了根据用户输入的可执行指令选择构建工具，从预设的项目脚手架中选择目标配置方式，然后根据目标配置完成构建工具的配置，再从预设的项目脚手架中选择与配置后构建工具匹配的配置文件，根据预设的项目脚手架中的配置文件完成整个前端项目的构建流程得到目标项目，配置文件在预设的项目脚手架中而不是在开发代码中,不需要每次构建前端项目时编写一次配置文件，避免了构建前端项目时需要从开发代码中获取配置文件，根据开发代码中的配置文件构建前端项目，导致配置文件与业务代码耦合在开发代码中，每次开发前端项目时，均要编写相应的配置文件，开发效率低下的现象发生。所以，本申请构建前端项目时直接从预设的项目脚手架中获取配置文件，因此开发前端项目时只需要编写业务代码，不需要编写配置文件，提高了前端项目的开发效率。

附图说明

本申请目的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

图1是本申请实施例方案涉及的硬件运行环境的终端\装置结构示意图；

图2是本申请前端项目构建方法的第一实施例的流程示意图；

图3是本申请前端项目方法中脚手架工具的示意图；

图4是本申请前端项目构建方法的另一流程示意图；

图5是本申请前端项目构建方法中初始化项目流程示意图；

图6是本申请前端项目构建装置的装置模块示意图。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

参照图1，图1为本申请实施例方案涉及的硬件运行环境的应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

参照图1，图1为本申请实施例方案涉及的硬件运行环境的前端项目构建设备结构示意图。

如图1所示，该前端项目构建设备可以包括：处理器1001，例如中央处理器（Central Processing Unit，CPU），通信总线1002、用户接口1003，网络接口1004，存储器1005。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏（Display）、输入单元比如键盘（Keyboard），可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口（如无线保真（WIreless-FId身份标识elity，WI-FI）接口）。存储器1005可以是高速的随机存取存储器（Random Access Memory，RAM）存储器，也可以是稳定的非易失性存储器（Non-VolatileMemory，NVM），例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。

本领域技术人员可以理解，图1中示出的结构并不构成对前端项目构建设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

如图1所示，作为一种存储介质的存储器1005中可以包括操作系统、数据存储模块、网络通信模块、用户接口模块以及前端项目构建程序。在图1所示的前端项目构建设备中，网络接口1004主要用于与其他设备进行前端项目构建；用户接口1003主要用于与用户进行数据交互；本申请前端项目构建设备中的处理器1001、存储器1005可以设置在前端项目构建设备中，所述前端项目构建设备通过处理器1001调用存储器1005中存储的前端项目构建程序，并执行本申请实施例提供的前端项目构建方法。

本申请提出一种前端项目构建方法，在本申请前端项目构建方法的第一实施例中，参照图2，前端项目构建方法包括：

步骤S10，接收用户在命令行界面输入的可执行指令，并确定所述可执行指令的指令类型；

目前前端开发项目代码分为构建代码和业务代码。整个项目中除去业务代码后，构建代码的文件较多，构建代码会生成配置文件，因此配置文件比较分散，较难集中管理，无法做到开箱即用，通用性较低。

此外，在团队开发中，各个项目使用的技术栈不统一，依赖版本各不相同，构建配置也无法统一管理。团队技术栈、规范不统一，难以沉淀团队自己的开发规范，导致各个开发人员编码规范无法统一。开发人员的流动由于没有统一的构建工具来限制构建配置、项目开发规范。导致各个项目技术债务不同，难以维护。

因此，在本实施例中为了避免上述缺陷，本实施例提供一种包括配置文件的脚手架工具（即预设的项目脚手架），参照图3，脚手架工具提供初始化项目、代码规范配置、构建配置、新建文件与更新提醒的功能，其中初始化项目包括使用Vue或者React进行项目初始化，代码规范配置以内置Eslint的方式实现，构建配置包括webpack和vite两中构建工具以及每种构建工具包括的默认配置与自定义配置，其中webpack的默认配置可以是less（Leaner Style Sheets）/sass（Syntactically Awesome Stylesheets）、Typescript、babel等，新建文件提供组建开发模板和单元测试模板，更新提醒包括对构建工具版本的升级，基于此预设的项目脚手架完成前端项目构建以及与前端项目构建衍生或者相关的流程。

在预设的脚手架中定义配置文件，开发前端项目时只需要编写业务代码，生成配置文件与业务代码分散管理，在构建前端项目时可以从预设的项目脚手架中选择配置文件构建前端项目，并且配置文件的升级与更改均可以在预设的项目脚手架中一次性完成，而不是配置文件与业务代码耦合在开发代码中时，配置文件的升级或指更改需要进入到具体的某个前端项目中升级或者更改构建代码才能完成配置文件的升级或者更改，且配置文件在预设的项目脚手架中统一进行管理，可以统一项目使用的技术栈，依赖的配置文件版本等等，从而很容易对配置文件进行维护。

在本实施例中，终端设备接收对用户在命令行界面输入的可执行指令，由于用户在命令行界面可选择输入的可执行指令有多种类型，用户输入的可执行指令的类型就具有一定的随机性，因此会确定用户输入的可执行指令的指令类型，根据不同的指令类型执行不同的操作。

步骤S20，在所述指令类型为构建指令之后，确定所述可执行指令包括的构建工具；

在本实施中，确定了可执行指令的指令类型后，如果此指令类型为构建指令，其中构建指令是指用户选择一个构建工具用于构建前端项目的指令，构建工具指能自动对代码执行检验、转换、压缩等功能的工具，用户编写的代码往往是不能被浏览器直接识别的，所以此时需要通过构建工具来对代码进行转换，编译，可以是webpack、vite等。例如，用户在命令行界面输入“-webpack”的指令，即是选择webpack作为构建工具的一个构建指令，用户选择使用webpack这个构建工具构建前端项目。

webpack是一个javaScript应用的静态模块化打包工具，且wepack的正常运行依赖于node环境，是一种前端资源构建工具，一个静态模块打包器。Webpack会把前端的所有资源文件（js、css、img（image，图片）、less…）作为模块处理，根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）。比如在html代码中，引入一段less样式，然后在浏览器中这样的样式并不会生效。这是因为，浏览器并无法直接识别less文件，所以，此时我们必须借助工具将less文件编译成css代码，浏览器才能识别。

Vite是一种新型的前端构建工具，基于浏览器原生ESM（ECMAScript

Modules，ECMAScript模型）的构建工具，它省略了开发环境的打包过程，利用浏览器去解析imports，在服务端按需编译返回。同时，在开发环境拥有非常快速地模块热更新，且热更新的速度不会随着模块增多而变慢。Vite 的快，主要体现在两个方面: 快速的冷启动和快速的热更新。 Vite 借助了浏览器对ESM 规范的支持，采取了与 Webpack 完全不同的 unbundle（非静态资源）机制。快速冷启动：Vite只启动一台静态页面的服务器，不会打包全部项目文件代码，服务器根据客户端的请求加载不同的模块处理，实现按需加载。热模块更新：当某个模块内容改变时，Vite会让浏览器去重新请求该模块即可，不需要重新将该模块的所有依赖重新编译。

此外，在另一场景中，如果一个前端项目的开发代码中有配置文件，且在开发代码的配置文件中定义了相应的构建工具，也可以使用开发代码中配置文件定义的构建工具构建前端项目。

步骤S30，从预设的项目脚手架中选择一个目标配置方式，根据所述目标配置方式配置所述构建工具；

确定了构建前端项目使用的构建工具之后，可以对构建工具进行相应的配置，使用不同的配置方式配置构建工具，可以为不同的环境定制项目的构建过程。在本实例中，如图3所示，预设的项目脚手架中设置了至少包括webpack和vite两种构建工具，且预设的项目脚手架可以在webpack和vite分别设置默认的配置方式，例如webpack的默认配置方式可以设置为less/saas或者Typescript或者babel，此外，用户也可以在预设的项目脚手架中自定义配置构建工具其他的配置方式。

less语言与sass语言均是CSS预处理器语言中的一种，为CSS赋予了动态语言的特征，它扩展了CSS语言，增加了变量、混合、嵌套、函数、和运算等特性，使CSS更易维护和扩展。并且less语言可以用类似JS的语法去写CSS，less语言既可以在web（网页）浏览器中运行也可以在web服务器中运行。TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或babel转译为JavaScript代码，可运行在任何浏览器与任何操作系统中。JavaScript在不断的发展，各种新的标准和提案层出不穷，但是由于浏览器的多样性，导致可能几年之内都无法广泛普及，babel可以让提前使用这些语言特性，是一种用途很多的JavaScript编译器，他把最新版的JavaScript编译成当下可以执行的版本，简言之，就是把各种JavaScript的语言转化为浏览器可以识别的语言。

在本实施例中，用户同样可以用从命令行界面输入相应的可执行指令从预设的项目脚手架中构建工具对应的所有配置方式中选择一个配置方式（即目标配置方式），以目标配置方式完成构建工具的配置。

此外，在另一场景中，如果一个前端项目的开发代码中有配置文件，且在开发代码的配置文件中定义了相应的配置方式，也可以使用开发代码中配置文件定义的配置方式配置构建工具。

步骤S40，从所述项目脚手架中选择与配置后所述构建工具匹配的配置文件，根据所述配置文件构建目标项目。

在本实施例中，配置文件内嵌在预设的项目脚手架中，开发前端项目时可以不编写配置文件，只编写业务代码，从预设的项目脚手架中选择配置文件构建前端项目。示例性的，根据目标配置方式完成构建工具的配置之后，从预设的项目脚手架中选择与构建工具以及配置方式均匹配的配置文件，然后以此配置文件构建目标项目，由配置文件构建目标项目的具体过程与现有的根据配置文件构建一个前端项目的过程相同，这里不在详述。

脚手架原是一种用在建筑领域的辅助工具，或者说是为了保证各施工过程顺利进行而搭设的工作平台。对应到软件工程领域，脚手架可以解释为帮助开发人员在开发过程中使用的开发工具、开发框架，使用脚手架就无须从头开始搭建或者编写底层软件。总之脚手架是一种元编程的方法，程序员编写一份规格说明书，用来描述怎样去使用数据库，然后由编译器脚手架根据这份规格说明书生成相应的代码，进行增、删、改、查等数据库的操作，在脚手架上更高效地建造出强大的应用。在实际的软件工程场景中，脚手架的使用正是为了避免重新造轮子，提升开发效率。

因此，在本实施例中，将配置文件内嵌到项目脚手架中，就可以避免每次开发前端项目时重复编写配置文件这一重新造轮子的动作，配置文件与业务代码高内聚、低耦合，且在开始构建之前进行代码语法检查与配置检查等步骤。

此外，在另一场景中，如果一个前端项目的开发代码中有配置文件，也可以使用开发代码中配置文件构建前端项目。

此外，为辅助理解本实施例中的前端项目方法流程的理解，下面进行举例说明。参照图4，构建前端项目时先选择构建工具，可以选择webpack构建工具或者vite构建工具，然后选择配置构建工具的配置文件（即配置方式），可以选择默认配置或者自定义配置，然后再进行Eslint代码语法检查，语法检查通过后，在进行TypeScript配置检查，检查通过后以预设的项目脚手架中的配置文件开始构建目标项目。

需要说明的是，本实施例以命令行的方式从预设的项目脚手架中获取到配置文件，但是也可以其他方式获取预设脚手架中的配置文件，或者将配置文件抽离出嵌入其他工具中，这些均在本申请的保护范围之内，本申请不做限制。

本实例中通过接收用户在命令行界面输入的可执行指令，并确定所述可执行指令的指令类型；在所述指令类型为构建指令之后，确定所述可执行指令包括的构建工具；从预设的项目脚手架中选择一个目标配置方式，根据所述目标配置方式配置所述构建工具；从所述项目脚手架中选择与配置后所述构建工具匹配的配置文件，根据所述配置文件构建目标项目，实现了根据用户输入的可执行指令选择构建工具，从预设的项目脚手架中选择目标配置方式，然后根据目标配置完成构建工具的配置，再从预设的项目脚手架中选择与配置后构建工具匹配的配置文件，根据预设的项目脚手架中的配置文件完成整个前端项目的构建流程得到目标项目，配置文件在预设的项目脚手架中而不是在开发代码中,不需要每次构建前端项目时编写一次配置文件，避免了构建前端项目时需要从开发代码中获取配置文件，根据开发代码中的配置文件构建前端项目，导致配置文件与业务代码耦合在开发代码中，每次开发前端项目时，均要编写相应的配置文件，开发效率低下的现象发生。所以，本申请构建前端项目时直接从预设的项目脚手架中获取配置文件，因此开发前端项目时只需要编写业务代码，不需要编写配置文件，提高了前端项目的开发效率。

进一步地，基于上述本申请的第一实施例，提出本申请前端项目构建方法的第二实施例，上述实施例步骤S40，从所述项目脚手架中选择与配置后所述构建工具匹配的配置文件，根据所述配置文件构建目标项目步骤的细化，包括：

步骤a，从预设的代码目录下获取业务代码，并从所述项目脚手架中获取标准代码规范；

业务代码是指直接用于实现用户需求的代码，一般开发一个前端项目时，需要编写相应的构建代码与业务代码，构建代码用于生成配置文件，业务代码用于实现用户需求，在本实例中，开发一个前端项目时，可以仅编写业务代码，从预设的项目脚手架中获取配置文件构建前端项目。

业务代码是构建前端项目的基础，用户希望最终展示在网页上各种效果均由用户编写的业务代码实现，故要先从预设的代码目录下获取到业务代码，其中预设的代码目录是可以是由用户指定的业务代码所在目录，且业务代码是由用户编写，故不一定符合规定的代码语法或者代码语义等代码规范要求，语法就是不考虑句子的含义，是一些规定语法结构，例如，每个语句后面加分号，循环语句怎么写，变量怎么定义，等等都算是语法。代码语法没有问题之后，可能还会存在语义问题，还需要按照代码规范进行语义检查，语义一般是指用户对于那些用来描述现实世界的计算机表示（即符号）的解释，也就是用户用来联系计算机表示和现实世界的途径，语义是对数据符号的解释，例如，一段代码中本来想引用变量i却误写错为另一个变量j，这在语法上没问题，但功能上有问题，这就算是语义错误了。

在本实施例中，参照图3，预设的项目脚手架中内置代码规范配置（即标准代码规范），可选地，标准代码规范选择内置Eslint对业务代码进行代码语法与代码语义等代码规范的检查。

步骤b，检查所述业务代码是否符合所述标准代码规范；

步骤c，在所述业务代码符合所述标准代码规范之后，根据所述配置文件生成代码依赖；

在本实施例中，从预设的项目脚手架中获取到标准代码规范之后，会检查业务是否符合标准代码规范，如果业务代码不符合标准代码规范，则会输出代码错误等类似提示，并不再继续构建目标项目，由用户进行相应处理。如果检查后业务代码符合标准代码规范，则根据才从预设的项目脚手架中的配置文件生成业务代码能被正常运行需要的代码依赖。

此外，如果一个前端项目的开发代码中有配置文件，且在开发代码的配置文件中定义了相应的代码规范，也可以使用开发代码中配置文件定义的代码规范作为标准代码规范对业务代码进行代码规范检查。

步骤d，在所述业务代码中安装所述代码依赖得到目标项目。

在本实施例中，从预设的代码目录下获取到业务代码，用户直接编写的业务代码并不能直接浏览器中运行，要依赖与相应的代码依赖才能被浏览器准确识别并运行，因此如果业务代码符合标准代码规范，会根据预设的项目脚手架中配置文件生成运行业务代码所需的代码依赖，生成代码依赖后，即在有业务代码中安装代码依赖得到目标项目。

在本实施例中，将Eslint代码规范（即标准代码规范）抽离统一由预设的项目脚手架提供规范配置，统一每个项目的开发风格，在开始构建前端项目前先检查业务代码是否符合标准代码规范，从而保证了后续的构建构程能够准确有效的运行。

在一实例中，所述根据所述配置文件生成代码依赖得步骤之前，包括：

步骤e，从所述项目脚手架中获取标准代码类型，检查所述业务代码是否符合所述标准代码类型；

步骤f，在所述业务代码符合所述标准代码类型之后，则执行根据所述配置文件生成代码依赖的步骤。

在本实施例中，在业务代码符合标准代码规范之后，还可以对业务代码的代码类型进行检查，比如选择Typescript配置的webpack构建工具，则业务代码的代码类型则应该是能被Typescript识别且进行编译的代码类型。同样的，可以在预设的项目脚手架中设置配置规范（即标准代码类型），业务代码代码规范检查通过后，对业务代码的代码类型进行检查，从预设的项目脚手架中获取标准代码类型，检查业务代码是否符合标准代码类型，如果不符合标准代码类型，则不再根据从预设的项目脚手架中获取配置文件构建前端项目，如果符合标准代码类型，才执行执行根据所述配置文件生成代码依赖的步骤。

此外，如果一个前端项目的开发代码中有配置文件，且在开发代码的配置文件中定义了相应的配置规范，也可以使用开发代码中配置文件定义的配置规范作为标准代码类型对业务代码进行代码类型检查。

在本实例中，配置规范抽离统一由预设的项目脚手架提供规范配置，业务代码符合标准标准代码规范之后，从预设的项目脚手架中获取配置规范，检查业务代码是否符合配置规范，只有在业务代码符合配置规范后，从根据配置文件完成目标项目的构建，保证了目标项目能被有效且准确的构建。

在一实施例中，所述从预设的项目脚手架中选择一个目标配置方式的步骤，包括：

在一实施例中，所述并确定所述可执行指令的指令类型的步骤之后，包括：

步骤g，在所述指令类型为代码规范检查之后，从预设的代码目录下获取业务代码，并从预设的项目脚手架中获取标准代码规范；

步骤h，检查所述业务代码是否符合所述标准代码规范，并输出检查结果。

在本实施例中，如果用户在命令行界面输入的可执行指令的指令类型是代码规范检查，例如，用户在命令行界面输入的可执行指令是“-Eslint”（这里可执行指令英文不区分大小写），即是要求进行代码规范检查。从用户指定的目录获取相应的业务代码，然后从预设的项目脚手架中获取标准代码规范，并检查业务代码是否符合标准代码规范，如果符合表标准代码规范，则输出代码检查成功等类似结果，如果不符合标准代码规范则输出代码错误等类似结果。

步骤i，在所述指令类型为配置更新之后，从预设的项目脚手架中获取配置文件；

步骤j，更新所述配置文件，并将更新后的所述配置文件写入所述项目脚手架中。

在本实例中，如果用户在命令行界面输入的可执行指令的指令类型是配置更新，则会对预设的项目脚手架中的配置文件进行更新，例如，当前预设的项目脚手架中配置文件使用的构建工具为webpack2.0版本，但是现在有了webpack3.0版本，则可以通过相应的配置更新命令将配置文件中构建工具webpack2.0版本更新为webpack3.0版本，并且在更新完成后，将更新后的配置文件重新嵌入到预设的项目脚手架中，后续的前端项目就可以根据最新的配置文件进行构建。参照图3，预设的项目脚手架提供更新提醒的功能，通过对构建工具版本的升级完成配置文件的更新。

在本实施例中，在预设的项目脚手架中完成配置文件统一升级，内置的构建工具升级后，项目配置则无需额外改动，只需升级构建工具即可享受最新构建工具带来的新特性，配置文件升级完成后，可以根据最新的配置文件构建前端项目，开发代码无需重写编写最新的配置文件，从而提高了前端项目的开发效率。

步骤k，在所述指令类型为创建项目之后，确定所述可执行指令包括的项目类型；

在本实例中，如果用户在命令行界面输入的可执行指令的指令类型是创建项目，创建项目的指令本身是包括有用户希望创建项目的项目类型，项目类型可以是Vue、React等用户在命令行界面输入的可执行指令是“-create Vue”，则可执行指令“-create Vue”包括的项目类型为Vue。参照图3，预设的项目脚手架提供项目的初始化，支持React、Vue两种框架项目，统一项目的技术栈和第三方依赖版本。

步骤l，从预设的项目脚手架中选择与所述项目类型匹配的项目模板；

步骤m，从预设的代码目录下获取业务代码，将所述业务代码写入所述项目模板中。

在本实例中，确定了可执行指令包括的项目类型之后，从预设的项目脚手架中获取与此项目类型匹配的项目模板，预设的项目脚手架中定义可选择的项目模板，这些项目模板用于初始化项目。在确定了初始化项目使用的项目模板之后，从预设的代码目录下获取到业务代码，将业务代码按照预设的项目脚手架中定义的规则将业务代码写入项目模板中，并且还可以安装相关的项目依赖，完成项目初始化。为辅助理解初始化项目的流程，参照图5，在可执行指令的指令类型为创建项目之后，根据可执行指令选择的Vue或者React项目模板，从预设的项目脚手中获取到项目模板，然后将业务代码写入项目模板并安装依赖完成项目初始化进入项目。

在本实施例中，在用户输入的可执行指令的指令类型为创建项目之后，从预设的项目脚手架中获取到与可执行指令包括的项目类型匹配的项目模板，然后将业务代码写入项目模板中，从而完成项目的初始化，预设的项目脚手架提供创建项目的模板，开发前端项目时只需专注于业务代码，前高了前端项目的开发效率。

在一实例中，所述并确定所述可执行指令的指令类型的步骤之后，包括：

步骤n，在所述指令类型为新建文件之后，确定所述可执行指令包括的文件类型；

在本实例中，如果用户在命令行界面输入的可执行指令的指令类型是新建文件，新建文件的指令本身是包括有用户希望新建文件的文件类型，文件类型可以是组建开发、单元测试等。参照图3，预设的项目脚手架提供新建文件的功能，提供新建文件模板与单元测试模板。

步骤o，从预设的项目脚手架中选择与所述文件类型匹配的文件模板；

步骤p，从预设的代码目录下获取业务代码，将所述业务代码写入所述文件模板中。

在本实例中，确定了可执行指令包括的文件类型之后，从预设的项目脚手架中获取与此文件类型匹配的文件模板，预设的项目脚手架中定义可选择的文模板，这些文件模板用于新建文件。如图3所示，预设的项目脚手架提供新建文件的功能，提供组建开发模版与单元测试模板，可以根据不同的可执行指令选择不同的模板，也可以是其他方式调用脚手架提供的功能，这里不做限制。在确定了新建文件使用的文件模板之后，从预设的代码目录下获取到业务代码，将业务代码按照预设的项目脚手架中定义的规则将业务代码写入文件模板中。

在本实施例中，在用户输入的可执行指令的指令类型为新建文件之后，从预设的项目脚手架中获取到与可执行指令包括的文件类型匹配的文件模板，然后将业务代码写入文件模板中，从而完成组建开发或者单元测试，预设的项目脚手架提供单新建文件的模板，开发前端项目时只需专注于业务代码，前高了前端项目的开发效率。

此外，本申请还提供一种前端项目构建模块，参照图6，所述前端项目构建模块包括：

接收模块A10，用于接收用户在命令行界面输入的可执行指令，并确定所述可执行指令的指令类型；

确定模块A20，用于在所述指令类型为构建指令之后，确定所述可执行指令包括的构建工具；

配置模块A30，用于从预设的项目脚手架中选择一个目标配置方式，根据所述目标配置方式配置所述构建工具；

构建模块A40，用于从所述项目脚手架中选择与配置后所述构建工具匹配的配置文件，根据所述配置文件构建目标项目。

此外，本申请还提供一种前端项目构建设备，所述前端项目构建设备包括：存储器、处理器及存储在所述存储器上的前端项目构建程序；所述处理器用于执行所述前端项目构建程序，以实现上述前端项目构建方法各实施例的步骤。

本申请还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有一个或者一个以上程序，所述一个或者一个以上程序还可被一个或者一个以上的处理器执行以用于实现上述前端项目构建方法各实施例的步骤。

本申请存储介质具体实施方式与上述前端项目构建方法各实施例基本相同，在此不再赘述。

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

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

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

以上仅为本申请的优选实施例，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围内。

Claims

1.一种前端项目构建方法，其特征在于，所述前端项目构建方法包括：

从所述项目脚手架中选择与配置后所述构建工具匹配的配置文件，根据所述配置文件构建目标项目；

其中，所述根据所述配置文件构建目标项目的步骤，包括：

检查所述业务代码是否符合所述标准代码规范；

在所述业务代码中安装所述代码依赖得到目标项目。

2.如权利要求1所述的前端项目构建方法，其特征在于，所述根据所述配置文件生成代码依赖得步骤之前，包括：

3.如权利要求1所述的前端项目构建方法，其特征在于，所述并确定所述可执行指令的指令类型的步骤之后，包括：

4.如权利要求1所述的前端项目构建方法，其特征在于，所述并确定所述可执行指令的指令类型的步骤之后，包括：

5.如权利要求1所述的前端项目构建方法，其特征在于，所述并确定所述可执行指令的指令类型的步骤之后，包括：

6.如权利要求1所述的前端项目构建方法，其特征在于，所述并确定所述可执行指令的指令类型的步骤之后，包括：

7.一种前端项目构建装置，其特征在于，包括：

构建模块，用于从所述项目脚手架中选择与配置后所述构建工具匹配的配置文件，根据所述配置文件构建目标项目；

所述构建模块，还用于：

检查所述业务代码是否符合所述标准代码规范；

在所述业务代码中安装所述代码依赖得到目标项目。

8.一种前端项目构建设备，其特征在于，所述前端项目构建设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的前端项目构建程序，所述前端项目构建程序被所述处理器执行时实现如权利要求1至6中任一项所述的前端项目构建方法的步骤。

9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有前端项目构建程序，所述前端项目构建程序被处理器执行时实现如权利要求1至6中任一项所述的前端项目构建方法的步骤。