如何搭建一个自己cli

朴灿烈づ我的快乐病毒、 2022-09-07 12:10 250阅读 0赞

**为什么要搭建cli  
在前端开发中，在搭建好一套自己满意的代码架子后，希望以后可以在别的开发中也一直沿用。之前或许把这份代码的结构再手动码一份，但这样的重复劳动其实搭建好自己的cli后，就可以通过几个命令来完成了**

搭建cli准备  
首先新建自己cli项目完成初始化配置之后。然后完成以下步骤

npm init

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MTU5NjM1_size_16_color_FFFFFF_t_70]  
这个对象中存放着之后需要执行的命令。

新建bin目录，添加执行的js文件，注意这里的js文件需要以\#!/usr/bin/env node这个开头，表明用node执行  
安装搭建cli的包

"dependencies": { 
     "inquirer": "^4.0.0",
     "ora": "^1.3.0",
     "rimraf": "^2.6.2",
     "chalk": "^2.3.0",
     "commander": "^2.11.0",
     "download-git-repo": "^1.0.1"
    }

简单介绍下面几个包的作用  
commander：设置一些node命令，如包的help、usage、version、parse输入的参数，  
download-git-repo：下载git上的模板，并存到本地,  
chalk:可以修改输出console颜色,  
inquirer:用户判断，是否执行  
ora：下载包时，产生loading的图标  
rimraf：删除文件

编写cli代码  
创建目录文件chrys.js

![在这里插入图片描述][0cedc530d88c4fae9c5baac7284bc4c7.png]

定义版本号，及子命令和一些说明简介

**创建子命令文件 chrys-init.js**  
1.  
![在这里插入图片描述][6c3487d7c170451aac5422a228e8f759.png]  
**定义用法，及转化参数。**  
2 .  
![在这里插入图片描述][1885c7df76b74ccfbd1ba348db7f71e5.png]  
**描述帮助。**  
3 .  
![在这里插入图片描述][bce08e65422e4f1dbbfa1dda4d67dbb1.png]  
**获取参数及存放位置。**  
4 .  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MTU5NjM1_size_16_color_FFFFFF_t_70 1]

下载模板到对应文件夹

到此一个简单的cli就搭建完成，那么我们如何使用它呢

使用  
1 .本地调试或使用

node bin/chrys.js template-name project-name

，或者

npm install -g
    
    chrys init template-name project-name

2 .发布到npm  
首先需要注册npm账号，然后执行如下命令

npm login 
    npm publish

每次发布版本号要更新，其次就是包的名字要唯一，假如被人使用只能换个名字了。  
github地址：https://github.com/Chryseis/chryseis-cli

[转载地址][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MTU5NjM1_size_16_color_FFFFFF_t_70]: /images/20220829/114fc14f16004eeb81031e49d9de626f.png
[0cedc530d88c4fae9c5baac7284bc4c7.png]: /images/20220829/b2da8158e7b14365a431b111e1627faf.png
[6c3487d7c170451aac5422a228e8f759.png]: /images/20220829/ad11d60b4adf4d21a0bca73251f6f965.png
[1885c7df76b74ccfbd1ba348db7f71e5.png]: /images/20220829/28a069cb9cf14261bd970c3fc90060d4.png
[bce08e65422e4f1dbbfa1dda4d67dbb1.png]: /images/20220829/7cf8b8390ac0450aa5a34fe0adecbf2e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MTU5NjM1_size_16_color_FFFFFF_t_70 1]: /images/20220829/04ef09aaff7a428e8fe9090bad0680c5.png
[Link 1]: https://www.jianshu.com/p/9d7efa19ffe9