CN113641351A - 一种一键式脚手架完成前端基础功能搭建方法 - Google Patents

Abstract

本发明提供的一种一键式脚手架完成前端基础功能搭建方法，所述搭建方法包括：创建一个脚手架项目BYKJ_CLI，用于编写指令逻辑，识别用户在终端键入指令；在所述脚手架项目BYKJ_CLI文件夹下创建一个入口文件index.js，所述入口文件index.js为整个脚手架项目的入口文件；创建配置文件，用于管理配置、依赖、版本号、作者、仓库、启动文件；在终端执行命令，将当前项目与所述命令对应的模块建立连接；启动文件内编写指令参数；拉取模板工程；创建一个vue的工程项目作为模板工程，根据团队项目的特点，封装基础工程，所述基础工程包括路由配置、babel、webpack、gulb配置、数据存储封装、网络、通信、加密解和原生通信；创建项目指令；动态添加页面指令、组件指令。

Description

一种一键式脚手架完成前端基础功能搭建方法

技术领域

本发明涉及路由配置领域，尤其涉及一种一键式脚手架完成前端基础功能搭建方法。

背景技术

现代的前端项目已经越来越复杂了，公司业务飞速发展，开发人员需要快速响应新需求；基础功能重复建设费时费力加重开发负担；风格不一不利于团队维护，出问题概率加大线上风险高，维护成本高。

现有技术中的方法是，先通过npm安装了一个包，这个包里有一个可执行文件，可以在全局执行对应的命令，执行命令，会将用户输入的信息捕获，并与用户交互。命令最终会将一个配置好的模板，拷贝到用户本地目录下，可以直接用它来开发项目。

现有技术中的方法前端项目配置越来越繁琐、耗时，重复无意义的工作项目结构不统一、不规范，前端项目类型繁多，不同项目不同配置，管理成本高，脚手架也可以是一套命令集，不只用来创建项目，开发一套项目脚手架对于中型以上规模团队，可控性高，能满足团队特定需求的研发。技术栈不统一。在公司做项目，使用的技术栈都是经过选型之后的，不是单一技术而是多种技术的融合。每加入一个新技术，都需要进行相关的配置，有时可能还要二次封装，没有沉淀。每个项目团队基于自身产品线，往往都会沉淀一些公用的方法、类。项目目录不规范，很难维护别人的代码。打包、部署每次都要修改脚本。

发明内容

鉴于上述问题，提出了本发明以便提供克服上述问题或者至少部分地解决上述问题的一种一键式脚手架完成前端基础功能搭建方法。

根据本发明的一个方面，提供了一种一键式脚手架完成前端基础功能搭建方法，所述搭建方法包括：

创建一个脚手架项目BYKJ_CLI，用于编写指令逻辑，识别用户在终端键入指令；

在所述脚手架项目BYKJ_CLI文件夹下创建一个入口文件index.js，所述入口文件index.js为整个脚手架项目的入口文件；

创建配置文件，用于管理配置、依赖、版本号、作者、仓库、启动文件；

在终端执行命令，将当前项目与所述命令对应的模块建立连接；

启动文件内编写指令参数；拉取模板工程；

创建一个vue的工程项目作为模板工程，根据团队项目的特点，封装基础工程，所述基础工程包括路由配置、babel、webpack、gulb配置、数据存储封装、网络、通信、加密解和原生通信；

创建项目指令；动态添加页面指令、组件指令。

可选的，所述搭建方法还包括：

发布项目到npmjs，修改package.json项目配置详细，执行npm publish发布脚手架到npm；

项目成员在终端执行。

可选的，所述项目开发具体包括：

引入ejs工具包，根据项目特点利用ejs封装好页面、路由、组件等模板代码包；

封装编译ejs模板的函数，根据用户在终端键入的不同指令调用不同的模板，利用complile函数，编译对应的ejs文件生成文件流；

将所述文件流封装写入文件函数，将编译后的内容写入文件，根据用户传入的dist和文件name，将编译后的ejs文件写入到新创建的文件内，完成模块创建。

本发明提供的一种一键式脚手架完成前端基础功能搭建方法，所述搭建方法包括：创建一个脚手架项目BYKJ_CLI，用于编写指令逻辑，识别用户在终端键入指令；在所述脚手架项目BYKJ_CLI文件夹下创建一个入口文件index.js，所述入口文件index.js为整个脚手架项目的入口文件；创建配置文件，用于管理配置、依赖、版本号、作者、仓库、启动文件；在终端执行命令，将当前项目与所述命令对应的模块建立连接；启动文件内编写指令参数；拉取模板工程；创建一个vue的工程项目作为模板工程，根据团队项目的特点，封装基础工程，所述基础工程包括路由配置、babel、webpack、gulb配置、数据存储封装、网络、通信、加密解和原生通信；创建项目指令；动态添加页面指令、组件指令。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

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

图1为本发明实施例提供的创建项目，模板工程拉取流程图；

图2为本发明实施例提供的添加页流程图；

图3为本发明实施例提供的addcpn流程图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

本发明的说明书实施例和权利要求书及附图中的术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元。

下面结合附图和实施例，对本发明的技术方案做进一步的详细描述。

如图1所示，一种一键式脚手架完成前端基础功能搭建方法，所述搭建方法包括：

创建一个脚手架项目BYKJ_CLI，用于编写指令逻辑，识别用户在终端键入指令；创建一个脚手架项目BYKJ_CLI，用于编写指令逻辑，识别用户在终端键入指令，根据用户指令执行模板工程拉取、指令式创建页面、路由、组件等操作，完成脚手架交互功能。创建过程：在Desktop或者其他文件下创建一个文件命名为BYKJ_CLI，并使用IDE打开。

在所述脚手架项目BYKJ_CLI文件夹下创建一个入口文件index.js，所述入口文件index.js为整个脚手架项目的入口文件；每一个项目都需要一个入口文件，用于整个工程的开端，启动运行，脚手架工程也同样。在BYKJ_CLI项目文件夹下创建一个入口文件index.js作为整个脚手架项目的入口文件。除入口文件，项目还需要一个配置文件，用于管理配置、依赖、版本号、作者、仓库、启动文件。创建方式：执行命令npminit-y，创建package.json文件，并修改启动文件为已创建的index.js文件、指定bin对应的命令为："bykj_cli”:"index.js",“bin”对应的是我们创建的终端指令，bykj_cli是指令名称，终端键入bykj_cli指令后执行的就是index.js文件。借助于node，入口文件添加：

/usr/bin/env node，引入node环境。

在终端执行npm link命令，将当前项目与npm模块建立连接，将上面创建的bykj_cli指令注册到当前环境变量，在终端执行bykj_cli命令，就被识别，并执行index.js文件。

创建配置文件，用于管理配置、依赖、版本号、作者、仓库、启动文件；在终端执行命令，将当前项目与所述命令对应的模块建立连接；启动文件内编写指令参数；拉取模板工程。

创建一个vue的工程项目作为模板工程，根据团队项目的特点，封装基础工程：基础工程包含路由配置、babel、webpack、gulp配置、数据存储封装、网络、通信、加解密、与原生通信等工具类，基础工程师对现有项目特点的抽取和整理，作为项目的基座，避免基础库重复建设和拷贝，做到开箱即用。将封装好的模板托管在github代码管理仓库。

创建一个vue的工程项目作为模板工程，根据团队项目的特点，封装基础工程，所述基础工程包括路由配置、babel、webpack、gulb配置、数据存储封装、网络、通信、加密解和原生通信；

创建项目指令；动态添加页面指令、组件指令。

如图1所示，创建解析create指令

收到create指令，执行到仓库拉取上面创建的模板工程，这里需要借助一个下载库：download-git-repo，终端执行npm install download-git-repo，安装download-git-repo库到脚手架工程，download-git-repo+仓库地址，从git代码库中下载已经封装好的模板工程到本地。进入项目目录，依次自动执行“npm install”命令安装项目依赖->执行“npmrun server”命令运行项目->open项目本地地址在默认浏览器打开项目。

发布项目到npmjs，修改package.json项目配置详细，执行npmpublish(已有npm账号和项目)发布脚手架到npm.脚手架托管到npm的目的是团队其他开发人员通过npm仓库即可安装脚手架命令到本地，进而可以使用脚手架内提供的拉取模板工程、动态创建页面、组件等操作。

项目成员在终端执行npm install bykj-cli可将脚手架安装到个人开发电脑，创建新项目和在日常开发中既可执行脚手架定义的快速模板转发命令，快速的创建适合项目的模板，专注于业务功能开发，无需从零创建页面、组件，进行繁琐的路由配置等，一条脚手架命令完成基础搭建和快速创建、配置。

所述搭建方法还包括：

发布项目到npmjs，修改package.json项目配置详细，执行npm publish发布脚手架到npm；

项目成员在终端执行。

所述项目开发具体包括：开发步骤如图2和图3所示，引入ejs工具包，根据项目特点利用ejs封装好页面、路由、组件等模板代码包；

封装编译ejs模板的函数，根据用户在终端键入的不同指令调用不同的模板，利用complile函数，编译对应的ejs文件生成文件流；

将所述文件流封装写入文件函数，将编译后的内容写入文件，根据用户传入的dist和文件name，将编译后的ejs文件写入到新创建的文件内，完成模块创建。

有益效果：根据项目特点，将路由、加解密、webpack配置，其他工具类等封装成一个团队成熟的vue模板工程，包含团队项目的基础功能，直接运行打包，团队在创建新项目时只需拉取本模板工程即可完成工程初始建设，直接进入业务逻辑开发，无需进行基础功能。

借助commander、download-git-repo等工具创建npm包，终端执行npm init-y，生成package.json并编写，创建指令byjkcli create工程名称，commander解析指令，download-git-repo执行下载模板工程，自动执行“npm install”命令安装项目依赖->执行“npm run server”命令运行项目->open项目本地地址在默认浏览器打开，完成基础功能搭建。

动态添加addpage页面指令、addcpn组件指令、addstore指令等，开发人员无需手动创建页面，配置路由，创建组件，添加store功能等繁琐的工作，也无需要拷贝已有的工程项目代码，只需执行一条终端add命令即可完成页面创建、路由自动配置，组件创建，store的创建等功能。根据项目特点利用ejs封装好页面、路由、组件模板代码包。封装编译ejs模板的函数：根据用户在终端键入的不同指令调用不同的模板action，利用complile函数，编译对应的ejs文件，生成文件流。封装写入文件函数，将编译后的内容写入文件，根据用户传入的dist和文件name，将编译后的ejs文件写入到新创建的文件内，完成模块创建。

将npm包publish到npm仓库，团队成员install安装到本地，执行包内命令即可快速搭建项目，添加页面和组件等功能。

以上的具体实施方式，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上仅为本发明的具体实施方式而已，并不用于限定本发明的保护范围，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (3)

1.一种一键式脚手架完成前端基础功能搭建方法，其特征在于，所述搭建方法包括：

创建一个脚手架项目BYKJ_CLI，用于编写指令逻辑，识别用户在终端键入指令；

在所述脚手架项目BYKJ_CLI文件夹下创建一个入口文件index.js，所述入口文件index.js为整个脚手架项目的入口文件；

创建配置文件，用于管理配置、依赖、版本号、作者、仓库、启动文件；

在终端执行命令，将当前项目与所述命令对应的模块建立连接；

启动文件内编写指令参数；拉取模板工程；

创建一个vue的工程项目作为模板工程，根据团队项目的特点，封装基础工程，所述基础工程包括路由配置、babel、webpack、gulb配置、数据存储封装、网络、通信、加密解和原生通信；

创建项目指令；动态添加页面指令、组件指令。

2.根据权利要求1所述的一种一键式脚手架完成前端基础功能搭建方法，其特征在于，所述搭建方法还包括：

发布项目到npmjs，修改package.json项目配置详细，执行npm publish发布脚手架到npm；

项目成员在终端执行。

3.根据权利要求1所述的一种一键式脚手架完成前端基础功能搭建方法，其特征在于，所述项目开发具体包括：

引入ejs工具包，根据项目特点利用ejs封装好页面、路由、组件等模板代码包；

封装编译ejs模板的函数，根据用户在终端键入的不同指令调用不同的模板，利用complile函数，编译对应的ejs文件生成文件流；

将所述文件流封装写入文件函数，将编译后的内容写入文件，根据用户传入的dist和文件name，将编译后的ejs文件写入到新创建的文件内，完成模块创建。

Images