摘要：本篇博客主要介紹了如何使用以及從零開(kāi)始，創(chuàng)建屬于自己的命令行工具。一分鐘體驗(yàn)首先我們先花一分鐘的時(shí)間，體驗(yàn)一下創(chuàng)建自己的命令行工具是什么感覺(jué)?；蛘呤且粋€(gè)環(huán)境下的命令行接口解決方案。代表了這個(gè)工具向用戶暴露的命令行指令。

本篇博客主要介紹了如何使用commander, inquirer以及chalk從零開(kāi)始，創(chuàng)建屬于自己的命令行工具。

首先我們先花一分鐘的時(shí)間，體驗(yàn)一下創(chuàng)建自己的命令行cli工具是什么感覺(jué)。

假如我們的項(xiàng)目名稱(chēng)叫hello-cli，使用如下命令新建項(xiàng)目目錄。

mkdir hello-cli && cd hello-cli

接下里使用npm-init命令來(lái)初始化一個(gè)簡(jiǎn)單的package.json文件。

npm init -y

-y命令表示接受npm的一切默認(rèn)參數(shù)設(shè)置。然后替換package.json為如下代碼。

{
  "name": "hello-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "bin": {
    "hello": "hello"
  },
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "chalk": "^2.4.2",
    "commander": "^2.20.0",
    "inquirer": "^6.3.1",
    "shelljs": "^0.8.3"
  }
}

然后使用npm install安裝依賴(lài)。

在項(xiàng)目根目錄下新建名為hello的文件，不需要任何后綴，值得注意的是此時(shí)的文件名就是你的cli工具第一個(gè)鍵入的命令，例如npm install，那么hello就等價(jià)于npm。并將代碼替換如下。

#! /usr/bin/env node

const program = require("commander");
const inquirer = require("inquirer");
const chalk = require("chalk");

program
  .command("init")
  .alias("i")
  .description("初始化項(xiàng)目")
  .action(option => {
    // 該對(duì)象用于存儲(chǔ)所有與用戶交互的數(shù)據(jù)
    let config = {
      // 假設(shè)我們需要用戶自定義項(xiàng)目名稱(chēng)
      projectName: null
    };
    // 使用chalk打印美化的版本信息
    console.log(chalk.default.bold("hello v1.0.0"));

    // 用于存儲(chǔ)所有的交互步驟，例如讓用戶輸入項(xiàng)目名稱(chēng)就是其中一個(gè)步驟
    let promps = [];
    if (config.projectName === null) {
      promps.push({
        type: "input",
        name: "projectName",
        message: "請(qǐng)輸入項(xiàng)目名稱(chēng)",
        validate: input => {
          if (!input) {
            return "項(xiàng)目名稱(chēng)不能為空";
          }
          // 更新對(duì)象中屬性的數(shù)據(jù)
          config.projectName = input;
          return true;
        }
      });
    }

    // 至此，與用戶的所有交互均已完成，answers是收集到的用戶所填的所有數(shù)據(jù)
    // 同時(shí)，這也是你開(kāi)始操作的地方，這個(gè)cli工具的核心代碼應(yīng)該從這個(gè)地方開(kāi)始
    inquirer.prompt(promps).then(async (answers) => {
      // do something here
      console.log(answers);
    });
  });

program.parse(process.argv);

那么問(wèn)題來(lái)了，
在你的項(xiàng)目根目錄下使用npm link，然后在你本地上就相當(dāng)于安裝了名為hello-cli這樣的一個(gè)全局npm包了。其原理是將你本地的項(xiàng)目在全局的node_modules中做了一個(gè)軟鏈接，拿此項(xiàng)目舉例，全局的hello命令已經(jīng)指向了你的本地目錄。如果你想取消測(cè)試項(xiàng)目在全局中的映射，同樣的進(jìn)入項(xiàng)根目錄，輸入命令npm unlink即可。

然后搭配以下命令食用你的第一個(gè)cli工具吧。如果報(bào)錯(cuò)提示沒(méi)有權(quán)限，在命令前加上sudo即可。

hello init
# 或者
# hello i

commander是一個(gè)Node.js環(huán)境下的命令行接口解決方案。在上面的一分鐘體驗(yàn)例子中，我們用到了command,alias,description,action這四個(gè)API。

command command代表了這個(gè)cli工具向用戶暴露的命令行指令。我們還是拿npm install來(lái)舉例子，command("init")聲明了一個(gè)叫init的命令，在此處，init等價(jià)于install

alias alias是對(duì)于當(dāng)前命令行指令的更短的指令。例如大家都知道，npm install可以簡(jiǎn)寫(xiě)為npm i。i就是定義的alias

description description是對(duì)當(dāng)前命令行指令的描述，commander會(huì)自動(dòng)的生成當(dāng)前cli工具的幫助文檔，而該描述就會(huì)在hello -h中展示，如果你的一分鐘體驗(yàn)項(xiàng)目還在的話，在命令行中輸入hello -h就可以看到自動(dòng)生成的幫助文檔了

action action是我們注冊(cè)我們自己回調(diào)函數(shù)的地方

parse parse命令則是解析命令行

下面是一分鐘體驗(yàn)項(xiàng)目中沒(méi)有使用的命令，option。還是舉一個(gè)例子。如果有用過(guò)hexo的應(yīng)該熟悉這個(gè)命令。

hexo new post $YOUR_POST_NAME

沒(méi)用過(guò)也沒(méi)關(guān)系，這個(gè)命令是用于創(chuàng)建一個(gè)可以自定義名字的Markdown的文檔的。大家可能會(huì)發(fā)現(xiàn)，上面的命令包含了4個(gè)單詞，而我們的例子中只有兩個(gè)。那是因?yàn)橐环昼婍?xiàng)目中沒(méi)有使用commander的optionAPI。

如果你想在hello項(xiàng)目中實(shí)現(xiàn)一樣的命令，那么只需要在program中調(diào)用該API即可。.option("-p, --post", "add post")，然后就可以通過(guò)option參數(shù)獲取到-p后面，用戶輸入的參數(shù)的值。

大家也發(fā)現(xiàn)了，在命令行輸入init命令后，我們需要不停地與命令行進(jìn)行交互拿到數(shù)據(jù)，但是在代碼里并沒(méi)有怎么體現(xiàn)，這是因?yàn)槲覀冇昧薸nquirer來(lái)幫我們做這些事情。

通過(guò)inquirer，我們可以實(shí)現(xiàn)輸入框，獲取用戶的輸入數(shù)據(jù)，還可以實(shí)現(xiàn)選擇框。舉個(gè)例子，用過(guò)antd-design-pro應(yīng)該熟悉創(chuàng)建項(xiàng)目的流程。在命令行中輸入命令yarn create umi，在之后的流程中就會(huì)出現(xiàn)一個(gè)可選擇的list。只需要將步驟中的代碼替換成如下即可。

promps.push({
    type: "list",
    name: "projectName",
    message: "請(qǐng)輸入項(xiàng)目名稱(chēng)",
    choices: [
      {
        name: "ant-design-pro",
        value: "ant-design-pro"
      },
      {
        name: "dva",
        value: "dva"
      }
    ]
});

在項(xiàng)目中，還使用了validate來(lái)對(duì)用戶的輸入數(shù)據(jù)進(jìn)行驗(yàn)證，如果不需要驗(yàn)證的話，直接把validate整個(gè)代碼刪除掉就好。

chalk沒(méi)有什么好介紹的，官網(wǎng)上的文檔已經(jīng)寫(xiě)的很詳細(xì)了。給大家列一下項(xiàng)目中使用的例子就好。

// 使用默認(rèn)的字體顏色，加粗字體
console.log(chalk.default.bold("hello v1.0.0"));
// 打印藍(lán)色的提示信息
console.log(chalk.blue("hello v1.0.0"));
// 字符串模板用法，在同一行中打印不同樣式的信息
console.log(chalk`{white.bold [1/3]}