开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第6天,点击查看活动详情。
前言
用惯了 vue-cli/vite/nest ... 这些工具,难免会生出想了解一下他们是如何做到通过命令行去初始化一个项目的。
最近恰好接触了团队已经构建成功的一个 cli 项目,而且在接触之前也自己搭建了一个 purple-cli,恰好借着活动有点动力整理一篇关于脚手架的文章。
思路
首先定位一下脚手架的使用人群服务对象,要满足哪些功能。
服务对象当然就是开发人员了,可以是前端、后台。
满足功能:通过命令行的方式生成项目模板。
具体思路:
- 开发全局node命令,并安装到电脑上,可以通过命令控制系统做出一些操作。
- 命令命中,执行脚本,通过逻辑判断关键参数,生成最终配置文件。
- 通过配置文件,生成项目模板。
- 根据项目模板中的初始化命令,初始化项目。
- 打印成功,并输出友好提示:模板使用说明。
完整功能:
- 通过命令行生成项目。
- 支持public.json的方式配置项目。
- 可以指定一个现有项目提取成项目模板。
实施
本次基于 node 去开发。只记录一下具体操作的关键点和关键点的分支。
一、开发命令
说到开发命令行是基于 package.json 中的 bin 字段。
在 bin 中声明一个命令,然后使用 npm link 将命令安装到全局,可以被识别。如下所示,既可以通过 purpleCli 命令执行 index.js。
"bin": {
"purpleCli": "index.js"
},
二、分析命令
分析命令需要用到三个工具包:
- commander:创建一个进程用来解析,命令行的参数。
- inquirer:可以在 CMD 中和 index.js 进行交互,支持 index/select 等方法。
- process_child/shelljs:可以在 js 中执行 cmd 命令。
三、创建项目
核心其实就是创建项目这一步。这一步我见或者使用了两个方案:
1. 使用本地项目进行创建
这个方案是我写 purple-cli 的第一版的时候采用的。
流程:
- 本地创建 public 项目文件夹,在文件夹中创建模板项目,并预留替换位置。(供 replace 配置使用)
- 命令行命中以后,复制模板项目
- 使用 全局替换的方式 将配置写进新项目去
优势:定制化程度高,可以在本地安装脚手架工具以后,通过修改源码的方式修改模板项目 劣势:模板项目与脚手架耦合度太高,更新频率将会很高
2. 通过 git 拉取项目
流程:
- 创建仓库,保存模板项目
- 命令行命中,clone仓库,删除 .git 文件夹
- 解析配置,进行关键点替换
优势:灵活多变,后期可以通过解析命令行的方式修改 git 地址 劣势:每次创建项目都需要重新 clone 项目,要维护多个 git 仓库,维护成本高
四、初始化项目
这个就是执行 npm i 就好了。
五、友好提示
通过解读 README.md 或者其他 模板项目 中的配置,控制台输出相关内容。
后记
大晚上赶的活动文章,没有具体细节。后面有机会分析一下我的另一个项目 purple-cli。