在日常的前端开发工作中，咱们常常依靠各种指令行东西来进步功率和代码质量。例如，create-react-app 和 eslint 等东西不只简化了项目的初始化进程，还能主动履行代码检查和格式化使命。当咱们运用这些东西时，它们一般会经过一系列互动式的问答来搜集必要的信息，然后依据咱们的挑选进行相应的装备和装置。

以 eslint 东西为例（如下图所示），当你初次运转 eslint --init 指令时，它会引导你完结一系列挑选题，包含你运用的结构（如 React、Vue.js 或其他），以及其他装备选项。经过这种办法，eslint 能够为你生成一个最适合项目需求的装备文件。

本篇文章将介绍在开发指令行东西进程中常用的第三方库。这些库首要分为三类：

• 脚手架结构：用于解析指令行参数，例如 eslint --init 中的 --init。常用的脚手架结构有 yargs 和 command。

• 指令行输出美化库：依据 ANSI Escape 规范，用于对指令行输出进行色彩和款式美化。常用的美化库有 chalk 和 ora。

• 交互式指令行库：用于创立交互式的指令行界面，例如 eslint 初始化进程中会提出的问答，如 "Which framework does your project use?"。常用的交互式指令行库有 inquirer。

脚手架结构

首要，让咱们简略回忆一下 Node.js 脚手架的开发流程：

• 创立 npm 项目：运用 npm init 指令创立一个新的 npm 项目，并填写相关项目信息。
• 创立脚手架进口文件：在项目根目录下创立一个进口文件，例如 index.js，并在文件顶部增加 #!/usr/bin/env node 以便将其识别为可履行文件。
• 装备 package.json：在 package.json 文件中增加 bin 特点，指定脚手架的进口文件途径。
• 增加 npm link：运用 npm link 指令将项目链接到大局环境中，这样就能够在本地经过短指令拜访脚手架。

具体的创立及完成功用逻辑能够参阅文章《Node.js 构建指令行东西：完成 ls 指令的 -a 和 -l 选项》

例如，假定咱们创立了一个名为 ice-cli 的项目，并在其间增加了 --init 指令的履行逻辑。那么，咱们怎么知道用户输入了这项指令呢？这就需求咱们在项目中解析指令行参数。

自行解析参数

在 Node.js 中，咱们能够运用内置的 process 目标来解析指令行参数。具体来说，能够在进口文件 index.js 中履行以下代码：

const argv = require("process").argv;
console.log("argv", argv);

当用户在指令行中输入 ice-cli create project --help 这一长串指令后，经过 process.argv 获取到的是一个数组。数组的榜首个元素代表 Node.js 的履行途径，第二个元素代表当时指令文件的途径，从第三个元素开端则是用户输入的内容。

例如，关于指令 ice-cli create project --help，process.argv 的输出或许如下所示：

[
    '/usr/local/bin/node', // Node.js 履行途径
    '/usr/local/lib/node_modules/ice-cli/index.js', // 当时指令文件途径
    'create', // 用户输入的榜首个参数
    'project', // 用户输入的第二个参数
    '--help' // 用户输入的第三个参数
]

拿到用户输入的内容后，咱们需求对其进行进一步的拆分和处理。用户输入的内容一般包含 指令（command） 和 选项（options）。例如，在指令 webpack config ./webpack.config.js 中，config 是指令，./webpack.config.js 是指令后边的参数；而在指令 webpack --help 中，--help 是选项。

经过解析 process.argv 数组，咱们能够提取出指令和选项，并依据它们履行相应的逻辑。例如：

const command = argv[2];  // 获取指令
const args = argv.slice(3);  // 获取指令后边的参数

if (command === 'create') {
  if (args.includes('--help')) {
    console.log('Usage: ice-cli create <project-name>');
  } else {
    const projectName = args[0];
    console.log(`Creating project ${projectName}...`);
  }
}

在日常开发中，咱们一般不会自己去解析指令行参数，由于这涉及到很多的鸿沟状况和过错处理。运用社区广泛认可的第三方库能够愈加高效和谨慎。其间，yargs 和 commander 是两个十分优异的引荐库。

yargs

yargs 是一个功用强壮且易于运用的指令行参数解析库。它供给了丰厚的 API，能够协助你轻松地解析指令和选项，并生成具体的协助信息。

装置 yargs

首要，经过 npm 装置 yargs：

npm install yargs

完成 --help 和 --version 功用

经过简略的代码就能够完成 --help 和 --version 功用：

const yargs = require("yargs/yargs");
const { hideBin } = require("yargs/helpers");
const arg = hideBin(process.argv);
yargs(arg).argv;

运转 ice-cli --help ，成果如下图所示：

常用特点

yargs 选用链式调用的办法为指令设置特点。以下是一些常用的特点：

• usage() ：在输入 --help 时会显现的提示信息。
• demandCommand() ：最少要输入的指令数量，以及当没有输入指令时的提示。
• recommendCommands() ：假如输入的指令不完整，会给出最近似指令的提示，例如：“Did you mean xx?”
• strict() ：严厉办法，输入过错指令时会给出提示。
• alias() ：为指令取别号。
• options() ：界说多个大局选项，在任何场景都能够拜访到。
• option() ：界说单个大局选项，在任何场景都能够拜访到。
• group() ：将一些指令聚合到一个分类中。
• command() ：界说指令。
• epilogue() ：界说完毕信息。

示例代码

将上述指令组合起来，示例如下：

const yargs = require("yargs/yargs");
const { hideBin } = require("yargs/helpers");
const arg = hideBin(process.argv);
const cli = yargs(arg);
cli
  .usage("Usage: ice-ls [command] <options>")
  .demandCommand(
    1,
    "A command is required. Pass --help to see all avaiable commands and options."
  )
  .recommendCommands()
  .strict()
  .alias("h", "help")
  .options({
    debug: {
      type: "boolean",
      describe: "Bootstarap debug mode",
      alias: "d",
    },
  })
  .group(["debug"], "Dev options:")
  .command({
    command: "list",
    aliases: ["ls", "la", "ll"],
    describe: "List total packages",
    builder: (argv) => {
      console.log("builder", argv);
    },
    handler: (argv) => {
      console.log("handler", argv);
    },
  })
  .epilogue("You own footer description").argv;

当履行 ice-ls 指令时，输出如下：

• 榜首行呈现 usage 函数装备的提示：Usage: ice-ls [command] 。
• 接着是 command 函数装备的指令 list，以及它的别号 ls, la, ll。
• 然后是经过 group 函数分组的 Dev options。
• 下面是 yargs 默许供给的选项 --version 和 --help。
• 接着是 epilogue 函数装备的尾部描绘。
• 终究一行是 demandCommand 提示： A command is required. Pass --help to see all avaiable commands and options。由于履行指令 ice-ls 的时分没有供给具体指令。

履行 ice-cli list 和 ice-ls list --debug，此刻程序进入 command 函数中，履行 builder 函数 和 handler 函数，能够在这里编写实践的功用逻辑。

commander

commander 也是一个功用强壮的指令行参数解析库，但它在运用办法和 API 规划上和 yargs 有一些差异。

装置 commander

首要，经过 npm 装置 commander：

npm install commander

完成 --help 和 --version 功用

commander 经过简略的装备就能够生成 usage 提示以及 --help 和 --version 功用。

const commander = require("commander");
const pkg = require("../package.json");
const program = new commander.Command();
program
  .name(Object.keys(pkg.bin)[0])
  .usage("<command> [options]")
  .version(pkg.version);

program.parse(process.argv);

履行上述代码后，运转 ice-cli --help 的输出如下所示：

Usage: ice-cli <command> [options]

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

注册指令

commander 和 yargs 在注册指令的语法上有一些差异。yargs 运用链式调用，而 commander 注册指令后返回值并不是本身，因而不能经过链式调用来注册多个指令。

// 注册 clone 指令
program
  .command("clone <source> [destination]")
  .description("clone a repository")
  .option("-f --force", "是否强制克隆")
  .usage("[options]")
  .action((source, destination, cmdObj) => {
    console.log("do clone", source, destination);
  });
  
// 绑架一切未界说的指令
program
  .arguments("<cmd> [options]")
  .description("test command", {
    cmd: "command to run",
    options: "options for command",
  })
  .action((cmd, options) => {
    console.log(cmd, options);
  });  

当履行 ice-cli clone a b 时，输出为 "do clone a b"。当履行 ice-cli create c 时，输出为 "create c"。

注册子指令

commander 注册子指令的办法也十分简略。以下是一个示例：

const service = new commander.Command("service");
service
  .command("start [port]")
  .description("start service at some port")
  .action((port) => {
    console.log('>>>service start', port)
  });
service
  .command("stop")
  .description("stop service")
  .action(() => {
    console.log('>>>service stop')
  });

当履行 ice-cli service start 8000 时，会输出 ">>>service start 8000"。当履行 ice-cli service stop 时，会输出 ">>>service stop"。

yargs 和 commander 解析指令行参数，生成协助信息，并注册指令。它们供给了强壮的指令行接口构建才能，使得指令行东西愈加灵敏和易用。

指令行输出美化库

在进行指令行交互时，常常需求对某些内容加粗、加字体色彩，以区别用户选中的内容和需求要点重视的问题。为了完成这些作用，存在一个指令行烘托规范，称为 ANSI escape code。此外，还有一些老练的第三方库，如 chalk 和 ora，能够协助咱们更方便地完成这些功用。

ANSI escape code

ANSI escape code 是一种用于操控终端输出的规范。经过特定的编码序列，能够在指令行中完成色彩、加粗等作用。

示例

在 bin 文件夹下创立 ansi.js 文件，文件中界说如下代码：

console.log("\x1B[31mThis text is red\x1B[0m");

经过 node 履行该 JS 文件，显现的是赤色文本，内容为 "This text is red"。如图所示：

编码解析

即便咱们没有凭借任何第三方库，仅经过一行文本就能完成指令行中的色彩和款式改变。这一行看似“乱码”的文本实践上是由 ANSI Escape Codes 组成的。下面是对这些字符的具体拆解：

• \x1B：这是转义字符，表明 ASCII 值为 27 的字符，也常表明为 ESC。它是一切 ANSI Escape Codes 的前缀。
• [：这是一个分隔符，表明接下来是一个操控序列。
• 31：这是一个数字代码，表明设置前景色为赤色。
• m：这是一个终止符，表明操控序列的完毕。
• \x1B[0m：重置一切文本特点，包含色彩和款式。

查找期望的款式

要找到期望的款式，能够在 ansi escape code 官网 查找。例如，31 代表赤色前景色，41 代表赤色背景色。

尽管能够直接运用 ANSI Escape Codes 来完成色彩和款式改变，但在实践开发中这样做会十分繁琐。你需求手动界说转义字符、分隔符，还要查找每个色彩对应的编码。走运的是，已经有老练的第三方库能够协助咱们处理这些问题，例如 chalk 和 ora。

chalk

chalk 是一个用于色彩烘托的库，其语法十分简略，经过办法名就能知道其用处。常见的办法包含：

• rgb(r, g, b)：界说自界说色彩。
• blue：设置蓝色字体。
• bold：设置字体加粗。
• green：设置绿色字体。
• underline：设置下划线。

这些办法名与 CSS 中的款式称号类似，使得运用起来十分直观。chalk 支撑多种运用办法，包含直接运用、拼接、链式调用、传入多个参数和嵌套调用。

装置

首要经过 npm 装置 chalk

npm install chalk

根本运用

chalk 是以 ES module 办法完成的，需求经过 import 办法引进。假如期望在 Node.js 环境中运转，能够将文件后缀名界说为 .mjs。

例如以下代码：

import chalk from "chalk";

// 直接运用
console.log("hello chalk");
// 界说自界说色彩
console.log(chalk.rgb(255, 0, 0)("hello nodejs"));
// 拼接不同款式
console.log(chalk.blue.bold("hello ") + chalk.green("world"));
// 运用十六进制色彩
console.log(chalk.hex("#ff0000")("it is a nice day"));
// 链式调用和嵌套调用
console.log(
  chalk.green(
    "I am a green line " +
    chalk.blue.underline.bold("with a blue substring") +
    " that becomes green again!"
  )
);

履行上述代码后，指令行中的输出作用如下所示：

ora

ora 是一个用于显现加载动画的库，十分适合在指令行运用中显现进展和状况。它以 ES module 办法导出，需求界说 .mjs 文件。

装置

首要经过 npm 装置 ora：

npm install ora

根本运用

ora 在运用时需求手动调用开端和完毕办法。以下是一个简略的示例，显现一个加载动画：

import ora from "ora";
const spinner = ora({
  text: "loading",
  spinner: "dots",
}).start();

履行上述代码后，指令行中会显现一个继续的加载动画，如下图所示：

自界说特点

ora 还支撑界说其他特点，如加载动画作用、色彩、前缀文本等。

特点阐明：

• text：初始加载文本。
• spinner：加载动画作用，能够是一个预界说的字符串（如 dots、line 等）或自界说目标。
• color：加载动画的色彩。
• prefixText：加载文本的前缀。
• start()：发动加载动画。
• stop()：中止加载动画。
• succeed(message)：中止加载动画并显现成功音讯。
• fail(message)：中止加载动画并显现失利音讯。
• warn(message)：中止加载动画并显现正告音讯。
• info(message)：中止加载动画并显现信息音讯。

以下是一个更杂乱的示例，展现了怎么动态更新加载文本并终究中止加载动画：

import ora from "ora";
const spinner = ora({
  text: "loading",
  spinner: "dots",
}).start();

// 设置加载色彩和前缀文本
spinner.color = "red";
spinner.prefixText = "download ora:";

let percent = 0;
let task = setInterval(() => {
  percent += 10;
  spinner.text = "Loading..." + percent + "%";
  if (percent === 100) {
    spinner.stop();
    spinner.succeed("download success");
    clearInterval(task);
  }
}, 1000);

按以上逻辑，履行进程的中心态如下所示：

交互式指令行

在指令行运用中，常常会涉及到一些交互逻辑，例如在 eslint 初始化进程中会问询用户当时运用的结构是 React、Vue 仍是其他结构。用户能够经过键盘的上下左右键和回车进行挑选。inquirer 便是这样一个用于指令行交互的第三方库。

inquirer

装置

inquirer 是一个强壮的指令行交互库，能够轻松地创立用户友爱的指令行界面。

npm install inquirer

根本运用

以下是一个简略的示例，展现了怎么运用 inquirer 创立一个列表挑选：

import inquirer from "inquirer";

inquirer
  .prompt([
    {
      type: "list",
      name: "language",
      message: "language",
      choices: [
        {
          value: 1,
          name: "react",
        },
        {
          value: 2,
          name: "vue",
        },
        {
          value: 3,
          name: "angular",
        },
      ],

    },
  ])
  .then((res) => {
    console.log("anwser", res);
  });

履行上述代码后，指令行中会呈现一个挑选列表，如下图所示：

多种交互类型

inquirer 支撑多种交互类型，不只限于列表挑选，还能够输入文本、暗码、多选等。
以下是一个示例，展现了多种类型的交互问题：

import inquirer from "inquirer";
inquirer
  .prompt([
    {
      type: "input",
      name: "yourName",
      message: "Your name",
    },
    {
      type: "list",
      name: "language",
      message: "language",
      choices: [
        {
          value: 1,
          name: "react",
        },
        {
          value: 2,
          name: "vue",
        },
        {
          value: 3,
          name: "angular",
        },
      ],
    },
    {
      type: "expand",
      name: "color",
      message: "color",
      choices: [
        {
          key: "R",
          value: "red",
        },
        {
          key: "G",
          value: "green",
        },
        {
          key: "B",
          value: "blue",
        },
      ],
    },
    {
      type: "checkbox",
      name: "fruits",
      message: "fruits",
      choices: [
        {
          value: 1,
          name: "apple",
        },
        {
          value: 2,
          name: "banana",
        },
        {
          value: 3,
          name: "orange",
        },
      ],
    },
    {
      type: "password",
      name: "password",
      message: "password",
    },
  ])
  .then((res) => {
    console.log("anwser", res);
  });

履行上述代码后，指令行中会顺次显现多个交互问题，终究，一切的用户输入都会在 then 办法中统一获取，如下图所示：

经过 inquirer，你能够轻松地在指令行运用中完成各种交互逻辑。其丰厚的交互类型和灵敏的校验机制使得 inquirer 成为一个十分有用的指令行交互库。

经过结合这些东西和库，能够轻松地构建出功用强壮、用户体会杰出的指令行运用。

假如你对前端工程化有爱好，或许想了解更多相关的内容，欢迎检查我的其他文章，这些内容将继续更新，期望能给你带来更多的创意和技能共享~