一个cli工具

九日耳火
291 阅读5分钟

写在前头：

最近要做一套可供后端同事简易开发前端管理系统的工具链。

这其中需要做的工作不少，第一步，我打算先写一个小的cli工具。

这个cli工具提供的功能很简单，一行命令下载代码模版。

之前有不少项目使用了vite，或者也使用过vue-cli之类的脚手架，它们都可以通过命令行来简单创建项目模版，我们要做的与此类似。

需要预先考虑些什么：

1、需要一个仓库，这个仓库可能会放入多个npm包，支持发布，这里参考的vite仓库目录结构，使用pnpm
2、需要知道怎么实现一个cli工具
3、需要提前准备好代码模版
4、需要想好如何测试

好了，到这里，要开始创建目录了，目录如下

image.png

很简洁。

  • 代码开发完成，肯定需要一个文档系统来供其他开发同事使用，所以在外层加入了docs目录，用来放置文档文件。
    这里用的是vitepress。
  • packages中放置不同的npm包
  • scripts中放一些外层可以执行的一些脚本文件

目录创建好之后，首先在packages中创建了我们的cli工具包的目录，create-template。

这个目录必不可少的文件是package.json，不然无法上传npm服务器。

重点一

这里需要有一些注意的东西。

1、package.json中各字段的作用

2、如何来通过命令执行对应npm包文件的上传

- 对于package.json中的字段，注意以下几个
1、name：npm包上传之后的名称，比如vite，vue等等
2、version：版本，必不可少
3、keywords：可以通过其中设置的值方便地搜索到咱们的npm包，如同SEO
4、main：入口文件
5、bin：命令行可执行的字段

至于其余的，可以去简单了解一下，比如bugs， repository， engines， license， private， homepage等等

- 对于第二条

   因为在这个仓库下有多个npm包，互相可能有所依赖，但也可能同时发布。
   
   如果我们能在外部文件目录下可以执行每一个包的发布，会便捷很多
   
   这里在后面详细记录。

重点二
目录结构完成，接下来我先写了npm发布的操作。

在最外层package.json中的scripts自定义一个命令，npm-push。

我希望在执行npm run npm-push create-template的时候，可以顺利发布create-template。

于是，我先在外层的文件目录scripts中创建了一个ts文件，publish.ts。

这里我们需要用到几个小工具。

- minimist 一个命令行参数解析器，用来解析我们命令行里添加的各种参数
- picocolors 一个命令行美化工具，可以让咱们的命令行颜色多姿多彩
- ts-node 直接编译执行ts文件
- execa 一个通过编码运行cli的工具
- @types/node 
- typescript

首先，我们将npm-push命令的执行过程改成 node scripts/publish.ts

在publish.ts中，我们首先通过require('minimist')(process.argv.slice(2))获取到所有的参数。

当我们执行npm run npm-push create-template的时候，拿到的参数的第一项便是create-template。

在这里，我们加一些校验判断 。。。

拿到名称，我们可以通过path.resolve(__dirname, '../packages/', 这是是获取到的名称)拼接出我们想要发布的目录。

之后，可以通过execa来执行npm pubilsh，发布咱们的npm包。

至于npm发布到npm服务器还是自己的私服，自定义设置即可。

重点三

做完发布的工作，下来便是最主要的核心功能，下载模版。

在这里，我们依旧需要几个小工具。

 - minimist
 - picocolors
 - prompts 一个命令行step工具，用来一步步实现咱们想要的所有数据，用户交互工具
 - node / fs

最终我们希望能够通过 npm run create-template 在命令行出现模版选择，package name填写，项目名称填写等等一系列的操作，最后在用户选择的目录下生成他选择的模版代码。

1、首先，我们同样通过minimist获取参数，如果用户在命令中写了项目名称，则直接获取到
2、将我们所有的模版保存在一个数组中，方便遍历选择
3、通过prompts开启交互， 下面是对prompts字段的解释:
- type: 当前交互的类型，text：输入 confirm 确认 select 选择
- name: 字段名称
- message: 错误提示，必填
- initial： 初始值 - onState：数据改变的回调
- validate：校验函数
- choices：选择项
4、用户交互完成之后，我们可以拿到模版的名称，package的名称等数据
5、接下来就是fs的用武之地： - 得到项目名称之后，我们可以通过fs.mkdirSync创建一个对应的目录 - 得到模版名称之后，我们可以通过拼接的方式将模板路径拿到 - 然后可以通过遍历加递归的方式将模版目录的文件copy或writeFileSync写入新的文件夹 - 这中间，我们也可以修改模版中的任意文件，将其中的数据修改成用户希望的样子 6、结束

到此，除去上传之外的工作变基本完成了。

后续只需要增加模版文件即可。

写在后面：

此文章只记录了实现的大概步骤，具体工具的使用细节可以去查看对应文档

avatar
文章
阅读
粉丝