CN110543295A - 可视化Web前端项目构建系统 - Google Patents

Abstract

本发明公开了一种可视化Web前端项目构建系统，包括相互连接的项目创建单元和项目管理单元；项目创建单元用于实现Web前端项目的构建，针对首次进入可视化Web前端项目构建系统或者初始化一个Web前端项目，根据提示按步骤直接完成一个新Web前端项目的创建，进行初始化设置并保存，添加并配置插件；或者直接导入已有Web前端项目，并添加到项目管理单元中进行管理与操作；项目管理单元用于实现Web前端项目的管理，针对用户使用可视化Web前端项目构建系统构建或者导入的Web前端项目，进行删除、修改、导入和新增管理。实施本发明的可视化Web前端项目构建系统，具有以下有益效果：可视化程度较高、易操作、易理解。

Description

可视化Web前端项目构建系统

技术领域

本发明涉及Web前端项目领域，特别涉及一种可视化Web前端项目构建系统。

背景技术

现代Web前端项目一般处理的资源较为复杂，因此大都采用工程化方式构建相关项目。现行构建方法一般是采用配套的构建工具进行构建，能减轻重复劳动，提高效率，有效解决Web前端项目开发中资源加载、模块化、组件化、自动化、性能优化、开发规范、代码部署、开发流程等问题，已经成为了现代Web前端项目标配工具。这种构建方法可视化程度低。另外，当今流行的构建工具基本都是基于命令行的方式进行构建及交互，操作较为繁琐，而且无可视化界面，不够直观，不方便对项目构建过程及项目动态进行管理。

发明内容

本发明要解决的技术问题在于，针对现有技术的上述缺陷，提供一种可视化程度较高、易操作、易理解的可视化Web前端项目构建系统。

本发明解决其技术问题所采用的技术方案是：构造一种可视化Web前端项目构建系统，包括：

项目创建单元：用于实现Web前端项目的构建，针对首次进入所述可视化Web前端项目构建系统或者初始化一个Web前端项目，根据提示按步骤直接完成一个新Web前端项目的创建，进行初始化设置并保存，添加并配置插件；或者直接导入已有Web前端项目，并添加到所述项目管理单元中进行管理与操作；

项目管理单元：用于实现Web前端项目的管理，针对用户使用所述可视化Web前端项目构建系统构建或者导入的Web前端项目，进行删除、修改、导入和新增管理；

所述项目创建单元和项目管理单元相互连接。

在本发明所述的可视化Web前端项目构建系统中，所述项目管理单元进一步包括：

插件管理模块：用于对Web前端项目引入的插件进行增加、删除和更新操作；

配置管理模块：用于对Web前端项目进行基本配置和插件配置；

任务执行模块：用于针对Web前端项目的本地开发与调试、代码检测与修复、工程化测试以及发布进行一键操作，同时提供对Web前端项目构建情况的分析；

所述插件管理模块、配置管理模块和任务执行模块相互连接。

在本发明所述的可视化Web前端项目构建系统中，所述任务执行模块进一步包括：

项目运行子模块：用于进行Web前端项目的本地开发和打包发布，Web前端项目运行中包括开发及发布两个操作，点击开发能直接打开本地开发、调试环境，点击发布能对Web前端项目进行打包；

项目分析子模块：用于对Web前端项目的打包文件进行分析；

所述项目运行子模块和项目分析子模块相互连接。

在本发明所述的可视化Web前端项目构建系统中，所述项目分析子模块使用可视化资源分析工具Webpack-bundle-analyzer，点击分析后会生成打包文件的分布情况。

在本发明所述的可视化Web前端项目构建系统中，所述项目创建单元进行Web前端项目构建的流程包括：

A)创建Web前端项目；

B)判断是否导入Web前端项目，如是，执行步骤C)；否则，执行步骤D)；

C)在项目管理界面中直接导入Web前端项目；

D)在项目管理界面中新建Web前端项目，执行步骤E)；

E)初始化项目，进行基础配置，执行步骤F)或步骤H)；

F)判断是否保存预设的基础配置，如是，执行步骤G)；否则，执行步骤H)；

G)保存预设的基础配置；

H)选择插件并导入，执行步骤I)；

I)对选择的插件进行配置，执行步骤J)；

J)后台进行插件的安装，安装完成后生成一个Web前端项目。

在本发明所述的可视化Web前端项目构建系统中，在所述步骤A)之前还包括：

A01)使用npm安装系统包；

A02)调用init命令启动系统页面，此时会自动打开浏览器进入所述可视化Web前端项目构建系统。

实施本发明的可视化Web前端项目构建系统，具有以下有益效果：由于设有项目创建单元和项目管理单元；项目创建单元用于实现Web前端项目的构建，针对首次进入可视化Web前端项目构建系统或者初始化一个Web前端项目，根据提示按步骤直接完成一个新Web前端项目的创建，进行初始化设置并保存，添加并配置插件；或者直接导入已有Web前端项目，并添加到项目管理单元中进行管理与操作；项目管理单元用于实现Web前端项目的管理，针对用户使用可视化Web前端项目构建系统构建或者导入的Web前端项目，进行删除、修改、导入和新增管理；本发明运用现代web技术，以现代化的可视化界面进行web前端项目的构建及管理，解决传统构建方式可视化程度低、操作繁琐等的缺点，其可视化程度较高、易操作、易理解。

附图说明

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

图1为本发明可视化Web前端项目构建系统一个实施例中的结构示意图；

图2为所述实施例中可视化Web前端项目构建系统的架构图；

图3为所述实施例中Web前端项目构建的流程图；

图4为所述实施例中项目管理单元的结构示意图；

图5为所述实施例中任务执行模块的结构示意图；

图6为所述实施例中任务执行的示意图；

图7为所述实施例中可视化Web前端项目构建系统首页的原型示意图。

具体实施方式

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

在本发明可视化Web前端项目构建系统实施例中，该可视化Web前端项目构建系统的结构示意图如图1所示。图2为本实施例中可视化Web前端项目构建系统的架构图。图1中，该可视化Web前端项目构建系统包括相互连接的项目创建单元1和项目管理单元2；其中，项目创建单元1用于实现Web前端项目的构建，针对首次进入可视化Web前端项目构建系统或者初始化一个Web前端项目，可根据提示按步骤直接完成一个新Web前端项目的创建，进行初始化设置并保存，添加并配置插件；也可直接导入已有Web前端项目，并添加到项目管理单元2中进行管理与操作；项目管理单元2用于实现Web前端项目的管理，针对用户使用可视化Web前端项目构建系统构建或者导入的Web前端项目，进行删除、修改、导入和新增管理。设置项目创建单元1和项目管理单元2，简单明了。本发明运用现代web技术，以现代化的可视化界面进行web前端项目的构建及管理，解决传统构建方式可视化程度低、操作繁琐等的缺点，其可视化程度较高、易操作、易理解。

图3为本实施例中Web前端项目构建的流程图，图3中，Web前端项目构建的流程包括：

步骤S01创建Web前端项目：本步骤中，创建Web前端项目。

步骤S02判断是否导入Web前端项目：本步骤中，判断是否导入Web前端项目，如果判断的结果为是，则执行步骤S03；否则，执行步骤S04。

步骤S03在项目管理界面中直接导入Web前端项目：本步骤中，在项目管理界面中直接导入Web前端项目。

步骤S04在项目管理界面中新建Web前端项目：本步骤中，在项目管理界面中新建Web前端项目。执行完本步骤，执行步骤S05。

步骤S05初始化项目，进行基础配置：本步骤中，初始化项目，进行基础配置，执行完本步骤，执行步骤S06或步骤S08。

步骤S06判断是否保存预设的基础配置：本步骤中，判断是否保存预设的基础配置，如果判断的结果为是，则执行步骤S07；否则，执行步骤S08。

步骤S07保存预设的基础配置：本步骤中，保存预设的基础配置。

步骤S08选择插件并导入：本步骤中，选择插件并导入。

步骤S09对选择的插件进行配置：本步骤中，对选择的插件进行配置。

步骤S10后台进行插件的安装，安装完成后生成一个Web前端项目：本步骤中，后台进行插件的安装，安装完成后生成一个Web前端项目。

本实施例中，在上述步骤S01之前还包括预处理步骤，这些预处理步骤包括：

步骤S001使用npm安装系统包：本步骤中，使用npm安装系统包。

步骤S002调用init命令启动系统页面，此时会自动打开浏览器进入可视化Web前端项目构建系统：本步骤中，调用init命令启动系统页面，此时会自动打开浏览器进入可视化Web前端项目构建系统。

以创建一个Web前端app项目为例，使用react作为前端开发框架。

传统构建方式的难点在于配置复杂，无可视化界面，使用该可视化Web前端项目构建系统能够基于可视化的Web页面，进行项目构建和管理，缩短项目开发周期。

Web前端app项目的具体构建步骤如下：

1)使用npm安装该系统包；

2)调用init命令启动系统页面，此时会自动打开浏览器进入系统；

3)在主页进行导入或新建项目；

4)导入时会自动由电脑文件夹内导入项目；新建项目时会进入新建页面；

5)新建项目第一步先进行基础配置，例如项目名称、使用的包管理器等等，同时可将这些基础配置保存至系统，可在下次构建新项目时使用该配置；

6)第二步选择插件，如选择安装axios请求插件，该插件可以方便进行网络请求并提供例如promise化等功能。可以选择多个插件进行协同工作。同时可以对选择的各插件进行例如版本等配置，为下一步安装做准备；

7)最后确定完成所有配置及插件的初始设定后，后台会进行所需插件的安装，安装完成后会生成一个基于react的Web前端项目。开发人员可基于此进行项目的具体开发。

本实施例中，可在项目管理界面直接进行项目的导入。

图4为本实施例中项目管理单元的结构示意图，图4中，该项目管理单元2进一步包括相互连接的插件管理模块21、配置管理模块22和任务执行模块23，其中，插件管理模块21用于对Web前端项目引入的插件进行增加、删除和更新等操作；配置管理模块22用于对Web前端项目进行基本配置和插件配置，也就是对Web前端项目中的基本配置和插件配置等内容进行配置；任务执行模块23用于针对Web前端项目的本地开发与调试、代码检测与修复、工程化测试以及发布等进行一键操作，同时提供对Web前端项目构建情况的分析，比如：打包文件分析。

图5为本实施例中任务执行模块的结构示意图，图5中，该任务执行模块23进一步包括相互连接的项目运行子模块231和项目分析子模块232，项目运行子模块231用于进行Web前端项目的本地开发和打包发布，代替了以前使用npmdev及npm build的传统命令行方式。Web前端项目运行中包括开发及发布两个操作，点击开发能直接打开本地开发、调试环境，点击发布能对Web前端项目进行打包，以便生产环境使用。项目分析子模块232用于对Web前端项目的打包文件进行分析，从而对项目具体文件情况有清晰直观的把握，主要是使用可视化资源分析工具webpack-bundle-analyzer，点击分析后会生成打包文件的分布情况，如下图所示，可以清楚知道每个文件夹、文件的大小，以便据此进行性能优化等后续操作。

本发明针对传统Web前端项目构建方式较复杂、可视化程度低的缺点，运用现代Web技术，以现代化的可视化界面进行Web前端项目的构建及管理，具有可视化程度高、易操作、易理解等优点。

总之，本实施例中，可视化主要是体现在各构建步骤的图像化界面操作上。在本可视化Web前端项目构建系统中进行Web项目构建，可以在启动该可视化Web前端项目构建系统后，直接在浏览器进行所有后续操作，如图7中可视化Web前端项目构建系统首页的原型示意图，其他的包括新项目的构建、项目的管理和导入，所有的包、插件安装、更新操作、项目运行和打包命令都在后台运行，而不会让用户有较强感知，最大程度地解放用户，能够更加专注在项目及具体业务的开发上。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (6)

1.一种可视化Web前端项目构建系统，其特征在于，包括：

项目创建单元：用于实现Web前端项目的构建，针对首次进入所述可视化Web前端项目构建系统或者初始化一个Web前端项目，根据提示按步骤直接完成一个新Web前端项目的创建，进行初始化设置并保存，添加并配置插件；或者直接导入已有Web前端项目，并添加到所述项目管理单元中进行管理与操作；

项目管理单元：用于实现Web前端项目的管理，针对用户使用所述可视化Web前端项目构建系统构建或者导入的Web前端项目，进行删除、修改、导入和新增管理；

所述项目创建单元和项目管理单元相互连接。

2.根据权利要求1所述的可视化Web前端项目构建系统，其特征在于，所述项目管理单元进一步包括：

插件管理模块：用于对Web前端项目引入的插件进行增加、删除和更新操作；

配置管理模块：用于对Web前端项目进行基本配置和插件配置；

任务执行模块：用于针对Web前端项目的本地开发与调试、代码检测与修复、工程化测试以及发布进行一键操作，同时提供对Web前端项目构建情况的分析；

所述插件管理模块、配置管理模块和任务执行模块相互连接。

3.根据权利要求2所述的可视化Web前端项目构建系统，其特征在于，所述任务执行模块进一步包括：

项目运行子模块：用于进行Web前端项目的本地开发和打包发布，Web前端项目运行中包括开发及发布两个操作，点击开发能直接打开本地开发、调试环境，点击发布能对Web前端项目进行打包；

项目分析子模块：用于对Web前端项目的打包文件进行分析；

所述项目运行子模块和项目分析子模块相互连接。

4.根据权利要求3所述的可视化Web前端项目构建系统，其特征在于，所述项目分析子模块使用可视化资源分析工具Webpack-bundle-analyzer，点击分析后会生成打包文件的分布情况。

5.根据权利要求1至4任意一项所述的可视化Web前端项目构建系统，其特征在于，所述项目创建单元进行Web前端项目构建的流程包括：

A)创建Web前端项目；

B)判断是否导入Web前端项目，如是，执行步骤C)；否则，执行步骤D)；

C)在项目管理界面中直接导入Web前端项目；

D)在项目管理界面中新建Web前端项目，执行步骤E)；

E)初始化项目，进行基础配置，执行步骤F)或步骤H)；

F)判断是否保存预设的基础配置，如是，执行步骤G)；否则，执行步骤H)；

G)保存预设的基础配置；

H)选择插件并导入，执行步骤I)；

I)对选择的插件进行配置，执行步骤J)；

J)后台进行插件的安装，安装完成后生成一个Web前端项目。

6.根据权利要求5所述的可视化Web前端项目构建系统，其特征在于，在所述步骤A)之前还包括：

A01)使用npm安装系统包；

A02)调用init命令启动系统页面，此时会自动打开浏览器进入所述可视化Web前端项目构建系统。