手写个简单cli工具

港控/mmm° 2022-12-03 09:23 177阅读 0赞

在做 iOS 期间，做了一个 CLI 工具替代一些列繁琐的工作，当时使用了 Python 实现。直到今天，我发现使用 Node 实现 CLI 工具是非常不错的选择，非常高效，很多现成的库，打造一个体验一流的 CLI 工具非常简单。通过本文来学习一下如何实现一个 CLI  工具。

本文没有实现 CLI 工具的具体功能，主要目的是希望你能够根据自己的需求创建一个 CLI 工具。

![format_png][]

**1、创建项目**

创建一个项目，起名为 suyan-cli，在 shell 中输入：

mkdir suyan-cli
    cd suyan-cli
    npm init -y

然后输入 code . 通过 VSCode 打开这个项目进行编辑。

安装依赖，这个工具主要用到了下面几个第三方库：

1》chalk，让你的 CLI 工具五颜六色；

2》figlet，让你的 CLI 显示一个漂亮的 logo；

3》commander，解析命令参数；

4》clear，清空控制台；

5》inquirer，交互式输入；

执行 npm install chalk figlet commander clear inquirer 安装这些库。

此时整个文件目录结果如下，lib 中主要放代码的具体实现逻辑代码，inquirer 主要是为了演示用户输入：

![format_png 1][]

**2、修改 package.json **

主要添加一个 bin 属性，设置 suyan-cli 的执行文件为 index.js，这时如果在根目录下执行 npm install -g，这时既可以使用 suyan-cli 了。

{
      "name": "suyan-cli",
      "version": "1.0.0",
      "description": "创建一个 CLI 工具，来源于公众号素燕",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [
        "Suyan",
        "CLI"
      ],
      "bin": {
        "suyan-cli": "./index.js"
      },
      "author": "公众号素燕",
      "license": "ISC",
      "dependencies": {
        "chalk": "^4.1.0",
        "clear": "^0.1.0",
        "commander": "^6.0.0",
        "figlet": "^1.5.0",
        "inquirer": "^7.3.3"
      }
    }

**3、index.js 具体实现**

首先我们要显示一个漂亮的 logo，使用 figlet 和 chalk 这两个库来实现，具体代码如下：

console.log(chalk.yellow(figlet.textSync('Suyan', {
        horizontalLayout: 'full'
    })));

commander 主要用来解析命令行参数，具体使用看代码注释：

**4、发布 package 到 npm**

到此 suyan-cli 这个工具就完成了，我们需要把这个工具发布到 npm 上，供其它同学使用。

发布之前需要注册一个账号，点击下面这个链接进行注册：

https://www.npmjs.com/

注册完后，回到根目录执行 npm login，输入用户名、密码和邮箱：

➜  suyan-cli npm login  
    Username: suyan_scyd
    Password: 
    Email: (this IS public) suyan_scyd@163.com
    Logged in as suyan_scyd on https://registry.npmjs.org/.

执行 npm publish，此时如果出现 403 错误，需要登录你的邮箱进行确认。

npm ERR! code E403
    npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/suyan-cli - you must verify your email before publishing a new package: https://www.npmjs.com/email-edit
    npm ERR! 403 In most cases, you or one of your dependencies are requesting
    npm ERR! 403 a package version that is forbidden by your security policy.

登录邮箱，验证完后再执行 npm publish，如果成功的话，显示如下：

➜  suyan-cli npm publish
    npm notice 
    npm notice ????  suyan-cli@1.0.0
    npm notice === Tarball Contents === 
    npm notice 327B  lib/file.js    
    npm notice 1.7kB index.js       
    npm notice 646B  lib/inquirer.js
    npm notice 633B  package.json   
    npm notice === Tarball Details === 
    npm notice name:          suyan-cli                               
    npm notice version:       1.0.0                                   
    npm notice package size:  1.6 kB                                  
    npm notice unpacked size: 3.3 kB                                  
    npm notice shasum:        8b5cf500747ff03af5595cc46d3a2afb023f288d
    npm notice integrity:     sha512-eC85jsdBE4mJk[...]RPQHA0jzh8gJA==
    npm notice total files:   4                                       
    npm notice 
    + suyan-cli@1.0.0

你可以在这里看到我发布的 suyan-cli 工具：

https://www.npmjs.com/settings/suyan\_scyd/packages

**5、安装使用**

这时，所有的小伙伴都可以使用这个工具了，我特意换了一台电脑执行

npm install suyan-cli -g

安装完成后，输入：suyan-cli --help

![format_png][]

到此一个完整的 CLI 工具就算完成了。代码地址：

https://github.com/lefex/FE/tree/master/webpack/vue-webpack

大家加油！

[format_png]: /images/20221123/ea94e77ad2cc46389f113d2edee31acb.png
[format_png 1]: /images/20221123/5a144dd5b2aa486b8ba0b98b32324e53.png