如何打造自动化前端项目CLI 工具

前言

在开发过程当中，尤为是新开项目的时候，每每须要从新进行各类配置、甚至复制以往的代码，为了解决这种场景，就有了 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

感谢观看。