CN117762473A - 项目开发的方法、装置及电子设备 - Google Patents

Abstract

本申请公开了一种项目开发的方法、装置及电子设备。其中，该方法包括：在目标框架下，配置第一配置信息，其中，目标框架用于集成至少一个项目，第一配置信息用于确定待开发的目标项目的项目信息；基于第一配置信息生成目标项目文件夹，其中，目标项目文件夹的文件夹名称与目标项目的项目名称对应；在目标项目文件夹下进行项目开发，得到目标项目。本申请解决了相关技术中前端框架仅支持开发单个项目，对多个项目无法实现统筹管理和维护，维护成本高，开发效率低下，可扩展性差的的技术问题。

Description

项目开发的方法、装置及电子设备

技术领域

本申请涉及计算机技术领域，具体而言，涉及一种项目开发的方法、装置及电子设备。

背景技术

前端开发框架是一套包含了预定义的结构、组件、样式和功能的工具集，可以提供一致的代码结构、易于维护的代码和可重用的组件，用于帮助开发人员快速搭建和开发网页或应用程序的前端部分，使得开发人员可以专注于业务逻辑和用户体验，而不必投入更多精力在构建和管理界面的细节上。

目前，前端开发框架仅支持开发单个项目，图1是现有技术前端开发框架架构示意图，如图1所示，开发一个模块或者一个页面需要建立对应的前端工程，开发多个模块或者多个页面则需要建立对应的多个前端工程。随着项目规模的扩大和需求的增加，需要更多的功能和支持。每个项目都需要单独的配置和搭建环境时，会增加重复性的工作量，开发效率低下。同时对每个项目进行维护和更新会增加工作量和时间成本，维护成本高，多个项目的情况下，无法实现统筹管理和维护，可扩展性差。

针对上述的问题，目前尚未提出有效的解决方案。

发明内容

本申请实施例提供了一种项目开发的方法、装置及电子设备，以解决相关技术中前端框架仅支持开发单个项目，对多个项目无法实现统筹管理和维护，维护成本高，开发效率低下，可扩展性差的的技术问题。

根据本申请实施例的一个方面，提供了一种项目开发的方法，包括：在目标框架下，配置第一配置信息，其中，目标框架用于集成至少一个项目，第一配置信息用于确定待开发的目标项目的项目信息；基于第一配置信息生成目标项目文件夹，其中，目标项目文件夹的文件夹名称与目标项目的项目名称对应；在目标项目文件夹下进行项目开发，得到目标项目。

可选地，目标框架下包括配置文件夹和根目录文件夹，配置文件夹包括脚本文件夹和模板文件夹，第一配置信息包括目标项目的项目名称，基于第一配置信息生成目标项目文件夹包括：基于脚本文件夹中的初始化构建指令和目标项目的项目名称遍历根目录文件夹，确定目标项目文件夹是否存在，得到确定结果；响应于目标项目文件夹存在，将模板文件夹中的模板文件拷贝至目标项目文件夹；或者，响应于目标项目文件夹不存在，在根目录文件夹下创建目标项目文件夹。

可选地，将模板文件夹中的模板文件拷贝至目标项目文件夹包括：获取模板文件的地址，其中，模板文件的地址用于表示模板文件的格式；响应于模板文件为文件格式，将模板文件写入目标项目文件夹；响应于模板文件为文件夹格式，在目标项目文件夹中创建与模板文件对应的模板拷贝文件夹，并将模板文件写入模板拷贝文件夹。

可选地，目标项目文件夹包括应用配置文件夹和语言配置文件夹，在根目录文件夹下创建目标项目文件夹包括：确定模板文件夹中模板文件的源地址、语言配置文件的源地址和目标项目文件夹的地址；基于模板文件的源地址、目标项目文件夹的地址和文件拷贝函数在根目录文件夹下生成目标项目的应用配置文件夹；基于模板文件的源地址、语言配置文件的源地址和文件拷贝函数在根目录文件夹下生成目标项目的语言配置文件夹。

可选地，在目标项目文件夹下进行项目开发，得到目标项目包括：在应用配置文件夹下进行项目开发，得到目标项目。

可选地，基于目标项目的项目名称获取目标项目文件夹下的子文件名称和子文件地址，其中，子文件地址与子文件名称对应；基于对象配置函数将子文件名称、子文件地址和目标编译函数发送至打包器，其中，目标编译函数包括编译子文件名称和子文件地址所需要的至少一个编译函数；基于目标编译函数对子文件名称和子文件地址进行编译，得到编译结果；基于打包器对编译结果进行打包，得到目标项目的打包文件。

可选地，基于目标项目的项目名称获取目标项目文件夹下的子文件名称和子文件地址，其中，子文件地址与子文件名称对应；基于启动函数运行子文件名称和子文件地址，以运行目标项目。

可选地，目标框架下还包括公共文件夹，公共文件夹用于封装至少一个项目共同的应用程序编程接口和函数。

根据本申请实施例的另一方面，还提供了一种项目开发的装置，包括：配置模块，用于在目标框架下，配置第一配置信息，其中，目标框架用于集成至少一个项目，第一配置信息用于确定待开发的目标项目的项目信息；生成模块，用于基于第一配置信息生成目标项目文件夹，其中，目标项目文件夹的文件夹名称与目标项目的项目名称对应；开发模块，用于在目标项目文件夹下进行项目开发，得到目标项目。

可选地，目标框架下包括配置文件夹和根目录文件夹，配置文件夹包括脚本文件夹和模板文件夹，第一配置信息包括目标项目的项目名称，生成模块还用于基于脚本文件夹中的初始化构建指令和目标项目的项目名称遍历根目录文件夹，确定目标项目文件夹是否存在，得到确定结果；响应于目标项目文件夹存在，将模板文件夹中的模板文件拷贝至目标项目文件夹；或者，响应于目标项目文件夹不存在，在根目录文件夹下创建目标项目文件夹。

可选地，生成模块还用于获取模板文件的地址，其中，模板文件的地址用于表示模板文件的格式；响应于模板文件为文件格式，将模板文件写入目标项目文件夹；响应于模板文件为文件夹格式，在目标项目文件夹中创建与模板文件对应的模板拷贝文件夹，并将模板文件写入模板拷贝文件夹。

可选地，目标项目文件夹包括应用配置文件夹和语言配置文件夹，生成模块还用于确定模板文件夹中模板文件的源地址、语言配置文件的源地址和目标项目文件夹的地址；基于模板文件的源地址、目标项目文件夹的地址和文件拷贝函数在根目录文件夹下生成目标项目的应用配置文件夹；基于模板文件的源地址、语言配置文件的源地址和文件拷贝函数在根目录文件夹下生成目标项目的语言配置文件夹。

可选地，开发模块还用于在应用配置文件夹下进行项目开发，得到目标项目。

可选地，该装置还包括：打包模块，用于基于目标项目的项目名称获取目标项目文件夹下的子文件名称和子文件地址，其中，子文件地址与子文件名称对应；基于对象配置函数将子文件名称、子文件地址和目标编译函数发送至打包器，其中，目标编译函数包括编译子文件名称和子文件地址所需要的至少一个编译函数；基于目标编译函数对子文件名称和子文件地址进行编译，得到编译结果；基于打包器对编译结果进行打包，得到目标项目的打包文件。

可选地，该装置还包括：运行模块，用于基于目标项目的项目名称获取目标项目文件夹下的子文件名称和子文件地址，其中，子文件地址与子文件名称对应；基于启动函数运行子文件名称和子文件地址，以运行目标项目。

可选地，目标框架下还包括公共文件夹，公共文件夹用于封装至少一个项目共同的应用程序编程接口和函数。

根据本申请实施例的另一方面，还提供了一种非易失性存储介质，该非易失性存储介质中存储有计算机程序，其中，在非易失性存储介质所在设备通过运行计算机程序执行上述的项目开发的方法。

根据本申请实施例的另一方面，还提供了一种电子设备，包括存储器和处理器，存储器中存储有计算机程序，处理器被设置为通过计算机程序执行上述的项目开发的方法。

在本申请实施例中，通过在目标框架下，配置第一配置信息，其中，目标框架用于集成至少一个项目，第一配置信息用于确定待开发的目标项目的项目信息；基于第一配置信息生成目标项目文件夹，其中，目标项目文件夹的文件夹名称与目标项目的项目名称对应；在目标项目文件夹下进行项目开发，得到目标项目。由此，达到了能够根据集成多个项目的前端框架进行项目开发的目的，扩大前端框架的开发范围，提高了前端框架的可扩展性，从而实现了减少项目之间的重复性工作、提高项目开发效率、降低维护成本的技术效果，进而解决了相关技术中前端框架仅支持开发单个项目，对多个项目无法实现统筹管理和维护，维护成本高，开发效率低下，可扩展性差的技术问题。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是现有技术前端开发框架架构示意图；

图2是根据本申请实施例的一种项目开发方法的流程图；

图3是根据本申请实施例的一种前端开发框架架构示意图；

图4是根据本申请实施例的一种项目开发装置的结构框图。

具体实施方式

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

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

为了更好地理解本申请实施例，以下将本申请实施例中涉及的技术术语解释如下：

Web(网页)前端的前端框架：一种用于构建和组织用户界面的工具集合。该框架提供了一系列的工具、组件和规范，帮助开发者更高效地构建现代化的Web应用程序。

超文本标记语言(HyperText Markup Language，HTML)：一种用于创建网页的标准标记语言。HTML文件是由一系列标签和元素组成的文本文件，用于描述网页的结构和内容，包含了文本、图片、链接、表格等元素，通过浏览器解析和显示，呈现出网页的样式和布局。HTML文件通常以“.html”或“.htm”为扩展名。

package.json：此文件用于描述Node.js项目中所需的模块以及项目的元数据。

Npm：是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块(包)的标准。

实施例1

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

图2是根据本申请实施例的一种项目开发方法的流程示意图，如图2所示，该方法至少包括步骤S201-S203，其中：

步骤S201，在目标框架下，配置第一配置信息，其中，目标框架用于集成至少一个项目，第一配置信息用于确定待开发的目标项目的项目信息；

步骤S202，基于第一配置信息生成目标项目文件夹，其中，目标项目文件夹的文件夹名称与目标项目的项目名称对应；

步骤S203，在目标项目文件夹下进行项目开发，得到目标项目。

其中，目标框架可以为本申请提出的前端框架，图3是根据本申请实施例的一种前端开发框架架构示意图，如图3所示，本申请的前端框架通过对原有的前端框架进行优化，在原有框架基础上进行技术创新，单个前端工程集成多个模块或者页面，使得开发者只需要通过基本的配置，然后执行对应的脚本命令，即可生成对应的开发目录进行前端开发。

目标项目可以理解为待开发的项目，可以为Web应用程序或网站开发项目，此处不予限制。

可以理解的是，在使用前端框架时，需要进行的一些配置，从而来定制化和优化框架的功能和行为，例如基本信息、依赖管理、构建配置、部署配置等内容。本申请中第一配置信息可以理解为待开发的目标项目的项目信息，示例性地，可以包括：项目名称(projectName)、全局项目请求地址的域名(requestUrl)、基础HTML模板文件(template，若不进行特殊说明，则指template下的index.html)以及态资源的打包地址(publicPath)，上述项目信息可以用于开发者进行初始化配置。

示例性地，在本申请提出的目标框架可以集成单个项目或者多个项目，其中，项目数量可以根据实际情况而定，此处不予限制。init.config.js文件是一个配置文件，用于初始化项目或应用程序的一些配置信息，可以帮助开发者在启动项目时设置一些默认的配置，使得项目能够正常运行。开发者通过init.config.js对整个开发框架初始化第一信息配置，确定待开发的目标项目的项目名称、全局项目请求地址的域名等项目信息。第一信息配置完成后，基于第一配置信息生成目标项目的项目文件夹，文件夹的文件夹名称与目标项目的项目名称一一对应。最终在目标文件夹下进行项目的开发，实现开发者待实现的项目目标。

采用上述方法，通过在目标框架下，配置第一配置信息，其中，目标框架用于集成至少一个项目，第一配置信息用于确定待开发的目标项目的项目信息；基于第一配置信息生成目标项目文件夹，其中，目标项目文件夹的文件夹名称与目标项目的项目名称对应；在目标项目文件夹下进行项目开发，得到目标项目。由此，达到了根据能够集成多个项目的前端框架进行项目开发的目的，扩大前端框架的开发范围，提高了前端框架的可扩展性，从而实现了减少项目之间的重复性工作、提高项目开发效率、降低维护成本的技术效果，进而解决了相关技术中前端框架仅支持开发单个项目，对多个项目无法实现统筹管理和维护，维护成本高，开发效率低下，可扩展性差的技术问题。

可选地，在步骤S202中，目标框架下包括配置文件夹和根目录文件夹，配置文件夹包括脚本文件夹和模板文件夹，第一配置信息包括目标项目的项目名称，基于第一配置信息生成目标项目文件夹可以包括以下执行步骤：

步骤S2021、基于脚本文件夹中的初始化构建指令和目标项目的项目名称遍历根目录文件夹，确定目标项目文件夹是否存在，得到确定结果；

步骤S2022、响应于目标项目文件夹存在，将模板文件夹中的模板文件拷贝至项目文件夹；或者，

步骤S2023、响应于目标项目文件夹不存在，在根目录文件夹下创建目标项目文件夹。

本申请实施例中，配置文件夹可以为config文件夹，用于存储项目开发所需的配置文件。示例性地，配置文件夹下主要包括脚本文件夹script和模板文件夹template两个文件夹，以及base.config.js、webpack.dev.config.js、webpack.prod.config.js三个文件。

其中，脚本文件夹为script文件夹，主要包含initial.js文件，用于存储脚本文件。

模板文件夹为template文件夹，主要包含通用的模板文件，用于每个新构建的项目初始化的模板文件夹，其中包含locale文件和model文件夹，并且locale文件夹包含zh_CN.js和en_US.js两个文件，zh_CN.js是一个JavaScript文件，其中包含以中文为主要语言的文本和短语。en_US.js是另一个JavaScript文件，其中包含以英文(美国)为主要语言的文本和短语。这两个文件用于国际化和本地化的项目中，根据用户的语言偏好显示相应的文本。目标国际化文件的源地址可以表示为【localeDir】/config/template/locale。model文件夹下包含App.js、App.less、index.js三个文件。App.js是一个React组件文件，用于定义应用的主要界面结构和逻辑。App.less是一个样式文件，用于定义App.js中所使用的样式。index.js是应用的入口文件，用于将App.js渲染到页面上，并设置应用的一些基本配置。目标的模板文件的源地址可以表示为【templateDir】：/config/template/model。

base.config.js、webpack.dev.config.js、webpack.prod.config.js三个文件是用于配置Webpack构建工具的配置文件。base.config.js文件是Webpack的基本配置文件，其中包含了通用的配置选项。webpack.dev.config.js文件是用于开发环境的Webpack配置文件，其中包含了针对开发环境的特定配置选项。webpack.prod.config.js文件是用于生产环境的Webpack配置文件，其中包含了针对生产环境的特定配置选项。

根目录文件夹为Src文件夹，用于存储目标项目的文件夹，将新构建的项目生成在根目录下。

目标框架还可以包括：template文件夹，包含默认的一个index.html文件，开发者可以自定义index.html文件放在此文件夹中。公共文件夹util(通常用于存放一些通用的工具类或者函数，提供一些常用的功能，例如日期格式化、字符串处理、数学运算等)init.config.js文件以及package.json npm包管理文件，包含所需执行的命令。

示例性地，第一配置信息配置完成后，基于第一配置信息生成目标项目文件夹，首先对整个项目的初始化构建脚本，执行项目中的启动命令，会执行initial.js文件中的脚本。同时引入“fs”模块：“fs”模块提供了一组丰富的API，用于对文件系统进行操作，通过“fs”模块，可以进行文件和目录的操作，例如读取文件内容、写入文件内容、创建目录、删除文件等。脚本根据目标项目的项目名称遍历根目录文件夹，通过获取存在状态函数(例如fs.existsSync，用于检查指定的文件或目录是否存在，返回一个布尔值，如果指定的文件或目录存在，则返回true，如果不存在则返回false，从而进行相应的处理)判断目标项目的项目文件夹是否存在，得到确定结果。若目标项目文件夹存在，即根目录下遍历到了已有项目文件夹的名称与目标项目的项目名称相同，则根目录中已经包含目标项目的项目文件夹，进而直接将模板文件夹中的模板文件拷贝至目标项目文件夹中，同时提醒用户“项目已存在，不需要构建”。若目标项目文件夹不存在，即根目录下没有遍历到已有文件与目标项目的项目名称相同，根目录中未包含目标项目的项目文件夹，则提示开发者在根目录文件夹创建目标文件夹，并通过目录创建函数(例如fs.mkdirSync，在指定路径下创建一个新的目录，如果指定的路径已经存在一个同名的文件或目录，则会抛出一个错误)传入目标项目文件夹进行文件的创建。

可选地，在步骤S2022中，将模板文件夹中的模板文件拷贝目标项目文件夹可以包括以下执行步骤：

步骤S20221、获取模板文件的地址，其中，模板文件的地址用于表示模板文件的格式；

步骤S20222、响应于模板文件为文件格式，将模板文件写入目标项目文件夹；

步骤S20223、响应于模板文件为文件夹格式，在目标项目文件夹中创建与模板文件对应的模板拷贝文件夹，并将模板文件写入模板拷贝文件夹。

文件拷贝的方法包含src,dist，两个参数分别代表拷贝文件的源地址、拷贝文件的目标地址。

示例性地，通过读取函数(例如fs.readdir函数，读取指定目录下的文件和子目录，用于进一步的文件操作或目录遍历等需求)获取源地址下的文件，进一步引入“path”模块：“path”模块用于处理文件路径的操作，包括路径的拼接、解析、规范化等。fs.readdir方法返回err，paths两个参数，如果异常，即无法正确获取源地址下的文件，则抛出err。

如果不存在异常，则循环遍历paths的地址数组，进而通过获取文件信息函数(例如fs.stat函数，用于获取指定文件的信息，返回一个包含文件信息的对象，包括文件大小、创建时间、修改时间等)检测模板文件的格式，即判断模板文件的格式为文件格式或者文件夹格式。若判断模板文件为文件格式，文件则通过读取数据函数(例如fs.createReadStream，用于创建一个可读流，并从指定的文件中读取数据)传入源地址src读取目标地址的文件，然后再通过写入数据函数(例如fs.createWriteStream，用于创建一个可写的流对象，将数据写入文件或其他可写的目标)将模板文件传入目标地址进行文件的写入。若判断模板文件为文件夹格式，则调用exist方法在目标项目文件夹中创建与模板文件对应的模板拷贝文件夹，并将模板文件写入模板拷贝文件夹。exist方法包含src，dist，callback三个参数分表代表拷贝文件的源地址、拷贝文件的目标地址，拷贝的方法，通过获取存在状态信息函数(例如fs.exists，用于检查指定路径下的文件或目录是否存在)判断目标地址是否存在文件夹，如果存在则调用callback方法，如果不存在则先通过fs.mkdir方法进行文件夹的创建，然后在执行callback方法。这里的callback参数就指代本申请中的拷贝方法。

可选地，在步骤S2023中，目标项目文件夹包括应用配置文件夹和语言配置文件夹，在根目录文件夹下创建目标项目文件夹可以包含以下执行步骤：

步骤S20231、确定模板文件夹中模板文件的源地址、语言配置文件夹的文件地址和目标项目文件夹的地址；

步骤S20232、基于模板文件的源地址、目标项目文件夹的地址和文件拷贝函数在根目录文件夹下生成目标项目的应用配置文件夹；

步骤S20233、基于模板文件的源地址、语言配置文件夹的文件地址和文件拷贝函数在根目录文件夹下生成目标项目的语言配置文件夹。

其中，应用配置文件夹为pages文件夹，该文件夹的源地址可以表示为src/pages。在pages文件夹中包含目标项目命名的文件夹里的包含App.js、APP.less和index.js文件。

语言配置文件夹为locale文件夹，该文件夹的源地址可以表示为src/locale。在locale中包含目标项目命名的文件夹里的国际化入口文件。

示例性地，所需语言配置文件夹的文件地址可以表示为【distLocaleDir】src/locale/{init.config.js中配置的文件夹的名称}；所需生成的项目文件夹目标地址可以表示为【projectDir】src/page/{init.config.js中配置的文件夹的名称}。

在根目录文件夹下创建目标项目文件夹，首先确定模板文件夹中模板文件的源地址【templateDir】、语言配置文件夹的文件地址【distlocaleDir】和目标项目文件夹的地址【projectDir】。

在根目录文件夹下生成目标项目的应用配置文件夹，需要确定模板文件的源地址【templateDir】以及目标项目文件夹的目标地址【projectDir】，基于模板文件的源地址、目标项目文件夹的地址和文件拷贝函数(即步骤S3022中的拷贝过程)，将模板文件通过文件拷贝函数写入目标项目文件夹中。

在根目录文件夹下生成目标项目的语言配置文件夹，需要确定模板文件的源地址【templateDir】以及语言配置文件夹的文件地址【distLocaleDir】，基于模板文件的源地址、语言配置文件的源地址和文件拷贝函数，将模板文件通过文件拷贝函数写入语言配置文件夹中。

综上，在根目录文件夹下创建目标项目文件夹结束，目标文件夹中包括locale文件夹和pages文件夹。

可选地，步骤S3024，目标项目文件夹下进行项目开发，得到目标项目包括：在应用配置文件夹下进行项目开发，得到目标项目。

在根目录下创建目标项目文件夹后，生成包括目标项目的应用配置文件夹和语言配置文件夹，进而开发者可以基于配置后的应用配置文件夹pages进行开发，得到目标项目。

可选地，步骤S2025，目标项目文件夹还可以进行打包，打包可以包含以下执行步骤：

步骤S20251、基于目标项目的项目名称获取目标项目文件夹下的子文件名称和子文件地址，其中，子文件地址与子文件名称对应；

步骤S20252、基于对象配置函数将子文件名称、子文件地址和目标编译函数发送至打包器，其中，目标编译函数包括编译子文件名称和子文件地址所需要的至少一个编译函数；

步骤S20253、基于目标编译函数对子文件名称和子文件地址进行编译，得到编译结果；

步骤S20254、基于打包器对编译结果进行打包，得到目标项目的打包文件。

其中，子文件可以理解为目标项目文件夹下包含的所有子文件，例如locale文件和model文件夹。子文件名称是通过init.config.js配置的项目名称定义为【projectName】下的所有文件名称，子文件地址为基础目录项目地址/src/pages/projectName【baseDir】。获取子文件名称和子文件地址可以通过getEntries方法，方法中的参数是所需打包的目录buildPath，定义变量entry＝{}，通过fs.reddirSync传入buildPath，获取到所有的文件地址，遍历所有的文件地址，给entry对象添加key为文件的名称，value是文件地址，并添加babel-polyfill(用于在不支持新特性的浏览器中，提供对这些新特性的支持，使得开发者可以在不同版本的浏览器中使用最新的JavaScript语法和API)，返回形成entry对象。

对象配置函数为entriesConfig，用于将getEntries获取的地址和对应的编译器传给打包器webpack。打包器webpack是JavaScript应用程序的静态模块打包工具，用于打包所需要的参数，module、optimization为webpack基本配置，module用于提供.js、.css、.png等文件后缀对应的编译器进行解析。目标编译函数可以理解为对象配置函数对应的编译函数，包括编译子文件名称和子文件地址所需要的至少一个编译函数，具体编译函数数量可以根据实际情况来定，此处不予限制。

示例性地，引入的HtmlWebpackPlugin插件、init.config.js、fs模块，安装babel-polyfill插件，通过init.config.js配置的名称定义项目名称【projectName】以及基础目录项目地址/src/pages/projectName【baseDir】，接着通过getEntries函数获取【projectName】和【baseDir】，获取到子文件名称和子文件地址后，通过entriesConfig函数将子文件名称和子文件地址以及对应的编译器传给webpack，entry为getEntries中返回的对象，并为plugins添加HtmlWebpackPlugin，其中entryName为项目名称，filename为项目名称/index.html，template为init.config.js配置的模板地址template配置项。形成的项目entriesConfig的配置对象，通过module.exports暴露entriesConfig对象进行打包，得到目标项目的打包文件。

生成打包文件后，webpack.dev.config.js文件通过引打包文件，在配合webpack的基本构建配置和扩展，形成整个项目的开发环境。

示例性地，引入base.config.js，配置基本的webpack的运行配置包括mode、plugins、devServer，然后通过webpack-merge插件的merge方法将base.config.js的配置对象和基本配置项合并，并且通过module.exports暴露出去。

生成打包文件后，webpack.prod.config.js文件同时引入打包文件，在配合webpack的基本构建配置和扩展，形成整个项目生产环境。

示例性地，形成项目生产环境还包括配置output的配置项，该项中的pubilc地址可以是init.config.js的配置静态资源的地址publicPath。

示例性地，在Package.json中执行如下命令：

初始化命令init：“node./config/script/initial.js”初始化构建执行脚本。执行init命令进行项目初始化是在一个项目文件夹中创建一个新的项目配置文件或者初始化项目所需的其他文件和目录结构。

项目启动命令dev："webpack-dev-server--config./config/webpack.dev.config.js--inline"可以理解为项目开发的环境命令。

项目打包命令build"webpack--config./config/webpack.prod.config.js--progress"，用于实现项目的打包。

可选地，本申请能够实现项目单独运行，在步骤S3026中，基于目标项目的项目名称获取目标项目文件夹下的子文件名称和子文件地址，其中，子文件地址与子文件名称对应。基于启动函数运行子文件名称和子文件地址，进而运行目标项目。

启动函数webpack-server是一个基于webpack的开发服务器，可以帮助开发者在本地快速启动一个服务器，并实时监测代码的变化，自动重新编译和刷新浏览器，从而提高开发效率。

获取目标项目文件夹下的子文件名称和子文件地址后，示例性地，项目之间是独立的，项目中项目名称为唯一的变量，开发者通过在配置文件中配置的项目的名称，执行npm run init命令(npm run init命令通常用于初始化项目，其实际执行的内容取决于项目中package.json文件中的scripts字段的配置)，脚本程序会读取项目名称，通过对比当前框架是否已存在，进行是否需要构建项目的判断。如果不存在，则执行项目中的初始化构建脚本，程序会在Src根目录下生成以项目名称命名的文件夹，并且通过拷贝项目中的模板文件(模板文件中包含了应用配置文件和语言配置文件)，将模板文件拷贝到相应的目录下，实现初始化的项目构建。如果存在，则在控制台提醒开发者到指定目录下开发。开发者如果需要进行新项目的开发，则继续相同的操作即可。

项目能够实现单独运行，开发者执行npm run dev(npm run dev命令是指在使用npm管理项目时，运行名为dev的脚本，启动一个开发环境的服务器或者编译前端代码的工具)命令，脚本程序会通过读取用户配置的项目名称，找到项目的对应路径，然后遍历项目路径下的所有文件，然后形成webpack需要的entry对象(目标项目下所有文件的名称和地址)，通过webpack-server启动服务，实现项目的单独运行。

项目之间可以进行单独打包，开发者执行npm run build(npm run build命令是指在项目中运行build脚本，通常用于将项目的源代码编译、打包、优化，生成可部署的生产环境代码，生成一个dist或build目录，里面包含经过优化后的可部署代码)命令，脚本程序会通过读取开发者配置的项目名称，找到项目的对应路径，然后遍历项目路径下的所有文件，然后形成webpack需要的entry对象(项目下所有文件的名称和地址)，并通过webpack进行项目打包构建，实现项目的单独打包。

可选地，目标框架下还包括公共文件夹，公共文件夹用于封装至少一个项目共同的应用程序编程接口和函数。框架下的公共文件夹util可以存放所有项目的公共的API和方法以及其他公共的逻辑，所有需要引入公共逻辑和API的项目，都可以通过引入util实现。当所有的项目因为业务需求对一个公共API或者方法进行修改时，只需要修改此文件夹的封装的API和方法，而不需要再对每个项目单独修改，重新部署，节省了大量项目维护的成本和时间。

综上所述，本申请实施例提出的一种项目开发方法可以实现单个框架管理多个项目，框架包括config文件夹，根目录Src文件夹，template文件夹，util文件夹，init.config.js文件以及package.json npm包管理文件。其中，config文件夹下主要包括script和template两个文件夹以及base.config.js、webpack.dev.config.js、webpack.prod.config.js三个文件。script文件夹主要包含initial.js文件，template文件夹中主要包含其中包含locale文件和model文件夹，其中locale文件夹包含zh_CN.js和en_US.js两个文件，model文件夹下包含App.js、App.less、index.js三个文件。Src文件夹下包括locale文件夹和pages文件夹，template文件夹下包含一个默认的index.html文件。

本申请解决了相关技术单个框架仅支持开发单个项目，对多个项目无法实现统筹管理和维护，维护成本高，开发效率低下，可扩展性差的技术问题。

本申请实施例还对前端框架打包部署增加了独有的逻辑，增加了配置环节，只需要简单配置，同时集成了一些自研的前端开发库，可以进行项目的快速开发和部署，开发者只需关注项目开发，无需过多关注框架配置。

本申请实施例采用单个框架集成多个项目，提供了公共方法或者API的入口，每个项目引用公共入口的方法或者API，在面对需要更改公共API或者方法时只需要更改一次，不需要每个独立项目逐一更改，节约了开发时间，提升了开发效率。

本申请实施例还编写了对应的运行脚本和打包逻辑脚本，实现了单个项目能进行独立的运行和打包。

实施例2

根据本申请实施例，还供了一种用于实现实施例1中的项目开发的装置。图4是根据本申请实施例的一种项目开发装置的结构框图，如图4所示，该项目开发装置中至少包括配置模块401，用于在目标框架下，配置第一配置信息，其中，目标框架用于集成至少一个项目，第一配置信息用于确定待开发的目标项目的项目信息；生成模块402，用于基于第一配置信息生成目标项目文件夹，其中，目标项目文件夹的文件夹名称与目标项目的项目名称对应；开发模块403，用于在目标项目文件夹下进行项目开发，得到目标项目。

可选地，目标框架下包括配置文件夹和根目录文件夹，配置文件夹包括脚本文件夹和模板文件夹，第一配置信息包括目标项目的项目名称，生成模块402还用于基于脚本文件夹中的初始化构建指令和目标项目的项目名称遍历根目录文件夹，确定目标项目文件夹是否存在，得到确定结果；响应于目标项目文件夹存在，将模板文件夹中的模板文件拷贝至目标项目文件夹；或者，响应于目标项目文件夹不存在，在根目录文件夹下创建目标项目文件夹。

可选地，生成模块402还用于获取模板文件的地址，其中，模板文件的地址用于表示模板文件的格式；响应于模板文件为文件格式，将模板文件写入目标项目文件夹；响应于模板文件为文件夹格式，在目标项目文件夹中创建与模板文件对应的模板拷贝文件夹，并将模板文件写入模板拷贝文件夹。

可选地，目标项目文件夹包括应用配置文件夹和语言配置文件夹，生成模块402还用于确定模板文件夹中模板文件的源地址、语言配置文件的源地址和目标项目文件夹的地址；基于模板文件的源地址、目标项目文件夹的地址和文件拷贝函数在根目录文件夹下生成目标项目的应用配置文件夹；基于模板文件的源地址、语言配置文件的源地址和文件拷贝函数在根目录文件夹下生成目标项目的语言配置文件夹。

可选地，开发模块403还用于在应用配置文件夹下进行项目开发，得到目标项目。

可选地，该装置还包括：打包模块，用于基于目标项目的项目名称获取目标项目文件夹下的子文件名称和子文件地址，其中，子文件地址与子文件名称对应；基于对象配置函数将子文件名称、子文件地址和目标编译函数发送至打包器，其中，目标编译函数包括编译子文件名称和子文件地址所需要的至少一个编译函数；基于目标编译函数对子文件名称和子文件地址进行编译，得到编译结果；基于打包器对编译结果进行打包，得到目标项目的打包文件。

可选地，该装置还包括：运行模块，用于基于目标项目的项目名称获取目标项目文件夹下的子文件名称和子文件地址，其中，子文件地址与子文件名称对应；基于启动函数运行子文件名称和子文件地址，以运行目标项目。

可选地，目标框架下还包括公共文件夹，公共文件夹用于封装至少一个项目共同的应用程序编程接口和函数。

需要说明的是，本申请实施例中的数据副本迁移装置中的各模块与实施例1中的数据副本迁移方法的各实施步骤一一对应，由于实施例1中已经进行了详尽的描述，本实施例中部分未体现的细节可以参考实施例1，在此不再过多赘述。

实施例3

根据本申请实施例，还提供了一种非易失性存储介质，该非易失性存储介质包括存储的计算机程序，其中，非易失性存储介质所在设备通过运行该计算机程序执行实施例1中的项目开发方法。

示例性地，非易失性存储介质所在设备通过运行该计算机程序执行实现以下步骤：在目标框架下，配置第一配置信息，其中，目标框架用于集成至少一个项目，第一配置信息用于确定待开发的目标项目的项目信息；基于第一配置信息生成目标项目文件夹，其中，目标项目文件夹的文件夹名称与目标项目的项目名称对应；在目标项目文件夹下进行项目开发，得到目标项目。

根据本申请实施例，还提供了一种处理器，该处理器用于运行计算机程序，其中，计算机程序运行时执行实施例1中的项目开发方法。

示例性地，计算机程序运行时执行实现以下步骤：在目标框架下，配置第一配置信息，其中，目标框架用于集成至少一个项目，第一配置信息用于确定待开发的目标项目的项目信息；基于第一配置信息生成目标项目文件夹，其中，目标项目文件夹的文件夹名称与目标项目的项目名称对应；在目标项目文件夹下进行项目开发，得到目标项目。

根据本申请实施例，还提供了一种电子设备，该电子设备包括：存储器和处理器，其中，存储器中存储有计算机程序，处理器被配置为通过计算机程序执行实施例1中的项目开发方法。

示例性地，处理器被配置为通过计算机程序执行实现以下步骤：在目标框架下，配置第一配置信息，其中，目标框架用于集成至少一个项目，第一配置信息用于确定待开发的目标项目的项目信息；基于第一配置信息生成目标项目文件夹，其中，目标项目文件夹的文件夹名称与目标项目的项目名称对应；在目标项目文件夹下进行项目开发，得到目标项目。

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

在本申请的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对相关技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅是本申请的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。

Claims (10)

1.一种项目开发方法，其特征在于，包括：

在目标框架下，配置第一配置信息，其中，所述目标框架用于集成至少一个项目，所述第一配置信息用于确定待开发的目标项目的项目信息；

基于所述第一配置信息生成目标项目文件夹，其中，所述目标项目文件夹的文件夹名称与所述目标项目的项目名称对应；

在所述目标项目文件夹下进行项目开发，得到所述目标项目。

2.根据权利要求1所述的方法，其特征在于，所述目标框架下包括配置文件夹和根目录文件夹，所述配置文件夹包括脚本文件夹和模板文件夹，所述第一配置信息包括所述目标项目的项目名称，所述基于所述第一配置信息生成目标项目文件夹包括：

基于所述脚本文件夹中的初始化构建指令和所述目标项目的项目名称遍历所述根目录文件夹，确定所述目标项目文件夹是否存在，得到确定结果；

响应于所述目标项目文件夹存在，将所述模板文件夹中的模板文件拷贝至所述目标项目文件夹；或者，

响应于所述目标项目文件夹不存在，在所述根目录文件夹下创建所述目标项目文件夹。

3.根据权利要求2所述的方法，其特征在于，所述将所述模板文件夹中的模板文件拷贝至所述目标项目文件夹包括：

获取所述模板文件的地址，其中，所述模板文件的地址用于表示所述模板文件的格式；

响应于所述模板文件为文件格式，将所述模板文件写入所述目标项目文件夹；

响应于所述模板文件为文件夹格式，在所述目标项目文件夹中创建与所述模板文件对应的模板拷贝文件夹，并将所述模板文件写入所述模板拷贝文件夹。

4.根据权利要求2所述的方法，其特征在于，所述目标项目文件夹包括应用配置文件夹和语言配置文件夹，所述在所述根目录文件夹下创建所述目标项目文件夹包括：

确定所述模板文件夹中模板文件的源地址、语言配置文件夹的文件地址和所述目标项目文件夹的地址；

基于所述模板文件的源地址、所述目标项目文件夹的地址和文件拷贝函数在所述根目录文件夹下生成所述目标项目的所述应用配置文件夹；

基于所述模板文件的源地址、所述语言配置文件夹的文件地址和所述文件拷贝函数在所述根目录文件夹下生成所述目标项目的所述语言配置文件夹。

5.根据权利要求4所述的方法，其特征在于，所述在所述目标项目文件夹下进行项目开发，得到所述目标项目包括：

在所述应用配置文件夹下进行项目开发，得到所述目标项目。

6.根据权利要求1-5中任一项所述的方法，其特征在于，还包括：

基于所述目标项目的项目名称获取所述目标项目文件夹下的子文件名称和子文件地址，其中，所述子文件地址与所述子文件名称对应；

基于对象配置函数将所述子文件名称、所述子文件地址和目标编译函数发送至打包器，其中，所述目标编译函数包括编译所述子文件名称和所述子文件地址所需要的至少一个编译函数；

基于所述目标编译函数对所述子文件名称和所述子文件地址进行编译，得到编译结果；

基于所述打包器对所述编译结果进行打包，得到所述目标项目的打包文件。

7.根据权利要求1-5中任一项所述的方法，其特征在于，还包括：

基于所述目标项目的项目名称获取所述目标项目文件夹下的子文件名称和子文件地址，其中，所述子文件地址与所述子文件名称对应；

基于启动函数运行所述子文件名称和所述子文件地址，以运行所述目标项目。

8.根据权利要求1-5中任一项所述的方法，其特征在于，所述目标框架下还包括公共文件夹，所述公共文件夹用于封装所述至少一个项目共同的应用程序编程接口和函数。

9.一种项目开发装置，其特征在于，包括：

配置模块，用于在目标框架下，配置第一配置信息，其中，所述目标框架用于集成至少一个项目，所述第一配置信息用于确定待开发的目标项目的项目信息；

生成模块，用于基于所述第一配置信息生成目标项目文件夹，其中，所述目标项目文件夹的文件夹名称与所述目标项目的项目名称对应；

开发模块，用于在所述目标项目文件夹下进行项目开发，得到所述目标项目。

10.一种电子设备，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行上述权利要求1至8任一项中所述的项目开发方法。