如何打造自动化前端项目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

感谢观看。


作者 : 4Ark
来源 : https://4ark.me
著作权归作者所有,转载请联系作者获得授权。

🥳 加载 Disqus 评论