前言

在开发过程中，尤其是新开项目的时候，往往需要重新进行各种配置、甚至复制以往的代码，为了解决这种场景，就有了 CLI，想必大家平时都经常使用，比如 Vue 的vue-cli，React 的 create-react-app，这类工具存在的主要目的是：释放双手、加快项目开发进度。

我的场景

本文就将介绍我如何根据我们团队内部的繁琐场景编写 CLI，从而加快项目开发速度。

开发项目中最常见的非后台管理系统莫属了，如果你仔细观察，就会发现大多数的后台管理大同小异。

就我们团队内部的后台管理系统而言，每次新开项目时，我们都需要进行以下操作：

• 搭建项目：拷贝之前的项目来改，或者重新创建一个项目，再根据需求拷贝文件
• 新增页面的时候，需要创建很多文件（视图、路由、Vuex）

而每个页面其实也是大同小异：

• 数据表格（搜索、分页、其他操作等）
• 表单

实现思路

基于以上场景，我想到的解决方法就是编写一个 CLI 工具，可以一行命令实现以下功能：

• 初始化项目
• 增删页面

只有 CLI 自然是不够的，还要搭配项目模板（template）使用。

但要注意脚手架工具要与项目模板解耦，下面细讲。

项目模板

创建一个 GitHub 组织存放项目模板，一个模板应该包含以下：

1. meta.json

   根据项目自定义一些问题，比如：

   • 项目名称
   • 项目描述

2. template 文件夹

   存放项目模板，初始化时根据用户回答的问题，生成项目。

3. generator 文件夹

   执行 CLI 命令时，由 CLI 调用，主要用来自定义一些问题、模板文件信息等。

CLI

主要命令：

1. init：

   初始化项目，这时候会查询项目模板列表，然后根据用户所选的模板进行初始化（把项目模板下载到本地），并且生成一个template.json记录当前项目模板的名字，供后续使用

2. add、delete：

   此命令需在生成后的项目中使用，会根据template.json中的模板信息找到对应的 generator 目录下的方法，执行对应的方法。

写在最后

每个团队面临的场景不一样，如果你也想编写一个自己的 CLI 工具，希望本文能给你提供一些思路。

如果有兴趣可以参考一下我的 CLI 实现：fa-cli，项目模板：fa-web-template

感谢观看。