命令行工具，即 Cli(command-line interface)。是在圖形用戶界面得到普及之前使用最為廣泛的用戶界面，它通常不支持鼠標(biāo)，用戶通過(guò)鍵盤輸入指令，計(jì)算機(jī)接收到指令后，予以執(zhí)行。

在學(xué)習(xí)這篇教程之前，你需要先了解NodeJs,NPM和一些常用的shell命令！

對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)，用NodeJs開(kāi)發(fā)命令行工具是最方便和快速的，借助于 npm，可以方便的進(jìn)行調(diào)試和發(fā)布。

NodeJs的命令行使用如下圖所示：

cli截圖.png

那么怎么從零開(kāi)始寫一個(gè)命令行工具呢？

一、創(chuàng)建一個(gè)新項(xiàng)目

首先，我們創(chuàng)建一個(gè)npm項(xiàng)目。

$ mkdir cli-demo
$ cd cli-demo
$ npm init

通過(guò)以上步驟，我們新建了一個(gè)cli-demo文件夾，并且在cli-demo文件夾中初始化了一個(gè)package.json文件。package.json的內(nèi)容大概是這樣:

{
  "name": "cli-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT"
}

二、新建一個(gè)可執(zhí)行文件

我們?cè)?code>cli-demo文件夾中，新建一個(gè)js文件，這里我們新建一個(gè)名為cli.js的文件。

我們?cè)趯懨钚泄ぞ叩臅r(shí)候，需要指定一個(gè)可執(zhí)行文件。在package.json中，bin字段用來(lái)映射命令名和可執(zhí)行文件。在通過(guò)npm install -g全局安裝的時(shí)候，npm會(huì)symlink可執(zhí)行文件到prefix/bin文件夾。
如果通過(guò)npm install本地安裝的時(shí)候, npm會(huì)symlink可執(zhí)行文件到./node_modules/.bin/文件夾。

(完整的字段說(shuō)明在這里：https://docs.npmjs.com/files/package.json)

如何讓一個(gè)js文件變成可執(zhí)行文件？只需要在js文件的頭部加上一行代碼:

#!/usr/bin/env node

稍微完善一下cli.js, 如下：

#!/usr/bin/env node

console.log('Hello world!');

三、指定cli.js為執(zhí)行文件

我們需要在package.json中，指定bin字段將cli.js作為我們的執(zhí)行文件。

{
  "bin": "cli.js"
}

或者：

{
  "bin": {
    "cli-demo": "cli.js"
  }
}

四、調(diào)試

我們?nèi)职惭b一個(gè)cli包后，可以全局調(diào)用這個(gè)命令行工具。那我們?cè)陂_(kāi)發(fā)調(diào)試的時(shí)候, 就要用到npm link這個(gè)命令了。

在npm包文件夾下執(zhí)行npm link命令，會(huì)創(chuàng)建一個(gè)符號(hào)鏈接，鏈接全局文件夾{prefix}/lib/node_modules/<package>和你執(zhí)行npm link的包文件夾。

注意：package-name是package.json中的name, 而不是文件夾名。

詳細(xì)的解釋在這兒: https://docs.npmjs.com/cli/link

我們?cè)?code>cli-demo文件夾下執(zhí)行npm link命令后，就可以全局使用cli-demo命令了。

$ cli-demo

Hello world!

五、使用命令行輔助工具

在我們寫命令行工具的時(shí)候，使用一些輔助工具會(huì)讓我們開(kāi)發(fā)更高效。以下是一些我用過(guò)的一些輔助工具：

• Commander.js - 幫助參數(shù)解析，我最常用
• optionator - 幫助參數(shù)解析，Eslint 使用
• Inquirer.js - 常見(jiàn)交互式命令行
• chalk - 命令行輸出自定義顏色

修改我們的cli.js，使用Commander.js做一些更復(fù)雜的操作。

首先，安裝commander.js:

npm i commander

cli.js代碼：

#!/usr/bin/env node

const program = require('commander');

program
  .version('0.1.0')
  .option('-n, --yourname [yourname]', 'Your name')
  .option('-g, --glad', 'Tell us you are happy')
  .parse(process.argv);

if (program.yourname) {
  console.log(`Hello, ${program.yourname}! ${program.glad ? 'I am very happy to see you!' : ''}`);
}

在命令行中使用：

$ cli-demo -h

  Usage: cli-demo [options]

  Options:

    -V, --version              output the version number
    -n, --yourname [yourname]  Your name
    -g, --glad                 Tell us you are happy
    -h, --help                 output usage information

$ cli-demo -n Jay

  Hello, Jay!

$ cli-demo -n Jay -g

  Hello, Jay! I am very happy to see you!

六、發(fā)布

單純的發(fā)布包到npm非常簡(jiǎn)單，只需要一條命令：

npm publish

但是一個(gè)完善規(guī)范的發(fā)布流程不僅如此，還需要考慮版本號(hào)的規(guī)范(Semver)，commit message的規(guī)范，tag等一系列因素。如果手動(dòng)來(lái)搞的話，是挺麻煩的。

這里推薦使用relix, 一步搞定！

npm i relix -g

進(jìn)入cli-demo文件夾，然后：

relix --patch

會(huì)自動(dòng)幫你生成新版本號(hào)，生成提交信息，打tag，推送提交和tag到github，發(fā)布npm包！relix的詳細(xì)用法請(qǐng)看relix文檔。

我的Github: https://github.com/PengJiyuan