手把手教你创建一个cli（1）

实习生小黄
318 阅读4分钟

「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」

前言

今天来带大家从零到在本地运行一个小项目，有兴趣的同学后面也还可以自己去了解一下怎么把自己的模块发布出去。

初始化项目

本次为了建立一个合适的简单小例子，我创建了一个名为wordAtr-line的模块，顾名思义，把命令行的输入转化为艺术字输出。

首先我们新建一个wordAtr-line的文件夹，在其中执行以下命令：

npm init

执行以上命令之后，就会让我们配置一些 package.json 的基础信息，帮我们根据我们的输入初始化一个package.json

PS D:\wordAtr-line> npm init
...
package name: (wordatr-line)  //自定义名字的话注意不能包含大写
version: (1.0.0)
description: line word to word art
entry point: (index.js)
test command:
git repository:
keywords:
author: xiaohuang
license: (ISC)
About to write to D:\Users\HP\Desktop\zxl\qrcpde\wordAtr-line\package.json:

{
  "name": "wordatr-line",
  "version": "1.0.0",
  "description": "line word to word art",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "xiaohuang",
  "license": "ISC"
}
Is this OK? (yes)

关于其中的配置这里说明一部分，其他有兴趣可以去查阅相关文档：

  1. name ：项目名，同时也是发包的时候别人引入时的默认名称
  2. version ：版本号，项目每一次的升级都需要修改对应的版本号
  3. main ：项目入口文件的位置
  4. scripts ：脚本指令，在这里可以自定义一些指令
  5. bin ：我们的项目所提供的自定义指令，以及对应的可执行文件的映射地址

接下去我们就要来配置其中的bin配置。

"bin":{
 "wordatr-line" :"./bin/wordart-line.js"
},

#! /usr/bin/env node  
//在wordart-line.js中声明运行环境
require('../src/main.js');

并且后面的映射地址就是我们的入口文档，我们这里在这个入口文档中将会声明运行的一个环境，并且连接到整个src项目的入口去。

并且在项目中先打下第一句话：

//mian.js
console.log("hello world")

现在整个的目录结构是这样的：

image.png

接下来我们先通过npm link来将我们的包连接到本地的全局来调试一下，在命令行输入：

PS D:\wordArt-line> npm link

added 1 package in 1s

成功的将包连接到全局，接下来我们就可以在本地通过命令的方式去调用我们的包了。

PS D:\Users\HP\Desktop\zxl\qrcpde\wordAtr-line> wordart-line
hello world

成功在命令行调用了main里面的代码，接下来我们只需要将我们想要运行的代码写到src当中去执行就好了。

利用commander提供的命令与参数

配置基本帮助和版本号flag

安装commander模块：

npm i commander

然后我们先利用commander内置的一些方法来定义一下我们模块的版本号，具体原理可以见commander的npm

// main.js
const program = require("commander")
// node提供了 process.argv 就是用户在命令行输入的参数
const {version} = require("./constants")
program.version(version).parse(process.argv)

定义一个配置文件用于动态获取pack.json里面定义的版本号并且暴露出去

// constants.js
const{
    version
} = require('../package.json')

module.exports = {
    version
}

这样子我们的工具就已经拥有了查看版本号和帮助的的功能，输入wordart-line -h可以查看帮助，就也可以看到查看版本号需要的对应flag，这里要注意flag使用的大小写。

PS D:\wordArt-line> wordart-line -h
Usage: wordart-line [options]

Options:
  -V, --version  output the version number
  -h, --help     display help for command

配置指令

接下去我们需要用一个对象来存储我们的指令，因为我们的方法只有简单的一个创建字体，所以我们只需要两个指令，一个旧时create，简写为c 指令创建字体，还需要一个 '*' 用于判断输入错误时候给出提示。

这里的指令配置包含了这个指令叫什么，它的简写是什么，它的简单介绍

//配置指令
const actions = {
  create: {
    alias: "c",
    description: "create a wordart",
  },
  "*": {
    alias: "",
    description: "command not found",
  },
};

定义好指令对象之后，就下去我们就可以通过动态的遍历这个对象来配置commander提供给我们的参数。

// 循环创建命令
Reflect.ownKeys(actions).forEach((action) => {
  program
    .command(action) // 配置命令的名字
    .alias(actions[action].alias) // 命令的别名
    .description(actions[action].description) // 命令对应的描述
    .action(() => {
      // 访问不到对应的命令 就打印找不到命令
      if (action === "*") {
        console.log(mapActions[action].description);
        //输出找不到指令
      } else {
        console.log(action);
        //指令存在时的判断，暂时输出指令名称
      }
    });
});

成功在控制台中判断输入的参数是否正确给出对应的输出。

PS D:\wordArt-line> wordart-line asd
command not found
PS D:\wordArt-line> wordart-line c  
create

总结

本次先暂时描写到这里，下一篇文章将讲述在指令正确之后，如何去获取用户的输入并且将它转化为好看的字体并且输出，这里字体转化我用的是第三方的开源库--figlet

avatar
文章
阅读
粉丝