前言
在开发过程中,尤其是新开项目的时候,往往需要重新进行各种配置、甚至复制以往的代码,为了解决这种场景,就有了 CLI,想必大家平时都经常使用,比如 Vue 的vue-cli
,React 的 create-react-app
,这类工具存在的主要目的是:释放双手、加快项目开发进度。
我的场景
本文就将介绍我如何根据我们团队内部的繁琐场景编写 CLI,从而加快项目开发速度。
开发项目中最常见的非后台管理系统莫属了,如果你仔细观察,就会发现大多数的后台管理大同小异。
就我们团队内部的后台管理系统而言,每次新开项目时,我们都需要进行以下操作:
- 搭建项目:拷贝之前的项目来改,或者重新创建一个项目,再根据需求拷贝文件
- 新增页面的时候,需要创建很多文件(视图、路由、Vuex)
而每个页面其实也是大同小异:
- 数据表格(搜索、分页、其他操作等)
- 表单
实现思路
基于以上场景,我想到的解决方法就是编写一个 CLI 工具,可以一行命令实现以下功能:
- 初始化项目
- 增删页面
只有 CLI 自然是不够的,还要搭配项目模板(template)使用。
但要注意脚手架工具要与项目模板解耦,下面细讲。
项目模板
创建一个 GitHub 组织存放项目模板,一个模板应该包含以下:
-
meta.json
根据项目自定义一些问题,比如:
- 项目名称
- 项目描述
-
template 文件夹
存放项目模板,初始化时根据用户回答的问题,生成项目。
-
generator 文件夹
执行 CLI 命令时,由 CLI 调用,主要用来自定义一些问题、模板文件信息等。
CLI
主要命令:
-
init:
初始化项目,这时候会查询项目模板列表,然后根据用户所选的模板进行初始化(把项目模板下载到本地),并且生成一个
template.json
记录当前项目模板的名字,供后续使用 -
add、delete:
此命令需在生成后的项目中使用,会根据
template.json
中的模板信息找到对应的generator
目录下的方法,执行对应的方法。
写在最后
每个团队面临的场景不一样,如果你也想编写一个自己的 CLI 工具,希望本文能给你提供一些思路。
如果有兴趣可以参考一下我的 CLI 实现:fa-cli,项目模板:fa-web-template
感谢观看。