[发明专利]web前端代码自动化构建方法、系统及存储介质

说明书

本发明实施例公开了一种web前端代码自动化构建方法、系统及存储介质，方法包括：接收用户输入的配置项，创建项目目录、生成目录约定及生成模板文件；根据模板文件及配置项自动安装需要的依赖程序；根据项目目录、目录约定和模板文件进行模块打包及代码编译，得到处理结果；将处理结果进行代码发布。实施本发明实施例，优点如下：(1)简化流程，不需要频繁配置与修改，完全按照约定自动读取文件生成配置；(2)自动构建，减少工作量的同时，降低了出错率；(3)在组件化和模块化的指导思想下，对前端资源进行构建，有利于项目的开发与维护；(4)支持多页面项目，可以配合后端模板引擎使用；(5)优化了前端资源，提升了性能。

技术领域

本发明涉及计算机软件技术领域，具体涉及一种web前端代码自动化构建方法、系统及存储介质。

背景技术

随着互联网技术的发展及web应用的不断成熟，越来越多的软件系统开始使用B/S架构。在这种架构下，用户界面及操作完全通过前端(Browser)实现，各种交互效果越来越复杂，功能不断增加，造成前端开发人员在项目开发中的工作量占比越来越大，前端代码变得庞大与复杂。在这种情况下，前端开发开始从组件化、模块化的角度去思考和组织代码，前端开发需要将大量的组件与模块按照一定依赖关系与规则构建成符合生成环境部署的前端资源，同时需要在减少页面加载时的http请求数量与请求资源的大小之间做一个平衡。因此需要一个前端代码自动化构建的方法及系统来帮助前端开发人员解放手动创建与配置、减少错误率、自动梳理流程、构建代码和提高效率，提升前端代码的可维护性、代码复用性，优化前端性能。

在现有方法中，有单独使用gulp或grunt方式进行构建的方法，这种方法插件单一，流程控制繁琐，且当项目文件越来越多，代码量越来越大时，构建速度变得很慢，导致开发效率低下，同时生成的文件过大，仅仅依靠代码压缩解决不了问题，也无法实现资源按需加载；有同时使用gulp和webpack进行构建的方法，这种方法配置复杂，基于单页面的构建，无法对多页面应用程序进行构建，且无法配合后端模板引擎使用，单页面应用开发也不适用于规模较大的项目开发；还有不使用任何构建方法的开发方式，这种方式无法进行组件化、模块化开发，无法自动插入或合并代码，无法复用代码，会产生大量的重复劳动力，对某些页面进行修改时，也往往需要重复修改，不利于代码维护，无法优化前端资源。

发明内容

针对现有技术中的技术缺陷，本发明实施例的目的在于提供一种B/S架构下的web前端代码自动化构建方法、系统及存储介质。

为实现上述目的，第一方面，本发明实施例提供了一种B/S架构下的web前端代码自动化构建方法，包括：

目录创建及模板生成步骤：接收用户输入的配置项，并根据所述配置项创建项目目录、生成目录约定及生成模板文件；

自动安装步骤：根据所述模板文件及所述配置项自动安装需要的依赖程序；

模块打包及代码编译步骤：根据所述项目目录、目录约定和模板文件进行模块打包及代码编译，得到处理结果；

代码发布步骤：将所述处理结果进行代码发布。

其中，模块打包及代码编译过程包括开发模式和生产模式；

开发模式下，根据所述目录约定生成入口文件；

对所述前端资源进行识别，得到待加载页面；

根据所述入口文件，将处理结果自动插入所述待加载页面上。

进一步地，所述入口文件包括单页面的路由配置和多页面的路由配置，根据所述目录约定生成入口文件具体包括：

若开发页面为单页面，则按照单页面的目录约定进行开发，生成单页面的路由配置；

若开发页面为多页面，则按照多页面的目录约定进行开发，生成多页面的路由配置。