命令列工具，即 Cli(command-line interface)。是在圖形使用者介面得到普及之前使用最為廣泛的使用者介面，它通常不支援滑鼠，使用者通過鍵盤輸入指令，計算機接收到指令後，予以執行。

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

對於前端開發者來說，用NodeJs開發命令列工具是最方便和快速的，藉助於 npm，可以方便的進行除錯和釋出。

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


那麼怎麼從零開始寫一個命令列工具呢？

一、建立一個新專案

首先，我們建立一個npm專案。

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

通過以上步驟，我們新建了一個cli-demo資料夾，並且在cli-demo資料夾中初始化了一個package.json檔案。package.json的內容大概是這樣:

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

二、新建一個可執行檔案

我們在cli-demo資料夾中，新建一個js檔案，這裡我們新建一個名為cli.js的檔案。

我們在寫命令列工具的時候，需要指定一個可執行檔案。在 package.json中， bin欄位用來對映命令名和可執行檔案。在通過 npm install -g全域性安裝的時候，npm會 symlink可執行檔案到 prefix/bin資料夾。
如果通過 npm install本地安裝的時候, npm會 symlink可執行檔案到 ./node_modules/.bin/資料夾。

(完整的欄位說明在這裡：https://docs.npmjs.com/files/...

如何讓一個js檔案變成可執行檔案？只需要在js檔案的頭部加上一行程式碼:

#!/usr/bin/env node

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

#!/usr/bin/env node

console.log('Hello world!');

三、指定cli.js為執行檔案

我們需要在package.json中，指定bin欄位將cli.js作為我們的執行檔案。

{
  "bin": "cli.js"
}

或者：

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

四、除錯

我們全域性安裝一個cli包後，可以全域性呼叫這個命令列工具。那我們在開發除錯的時候, 就要用到npm link這個命令了。

在npm包資料夾下執行 npm link命令，會建立一個符號連結，連結全域性資料夾 {prefix}/lib/node_modules/<package>和你執行 npm link的包資料夾。

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

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

我們在cli-demo資料夾下執行npm link命令後，就可以全域性使用cli-demo命令了。

```$ cli-demo

Hello world!

<h3>五、使用命令列輔助工具</h3>
<p>在我們寫命令列工具的時候，使用一些輔助工具會讓我們開發更高效。以下是一些我用過的一些輔助工具：</p>
<ul>
<li>
<a href="https://github.com/tj/commander.js" rel="nofollow noreferrer">Commander.js</a> - 幫助引數解析，我最常用</li>
<li>
<a href="https://github.com/gkz/optionator" rel="nofollow noreferrer">optionator</a> - 幫助引數解析，<a href="https://github.com/eslint/eslint" rel="nofollow noreferrer">Eslint</a> 使用</li>
<li>
<a href="https://github.com/SBoudrias/Inquirer.js" rel="nofollow noreferrer">Inquirer.js</a> - 常見互動式命令列</li>
<li>
<a href="https://github.com/chalk/chalk" rel="nofollow noreferrer">chalk</a> - 命令列輸出自定義顏色</li>
</ul>
<p>修改我們的<code>cli.js</code>，使用<a href="https://github.com/tj/commander.js" rel="nofollow noreferrer">Commander.js</a>做一些更復雜的操作。</p>
<p>首先，安裝<code>commander.js</code>:</p>
```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!

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

六、釋出

單純的釋出包到npm非常簡單，只需要一條命令：

```npm publish ```

但是一個完善規範的釋出流程不僅如此，還需要考慮版本號的規範(Semver)，commit message的規範，tag等一系列因素。如果手動來搞的話，是挺麻煩的。

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

```npm i relix -g ```

進入cli-demo資料夾，然後：

```relix --patch ```

會自動幫你生成新版本號，生成提交資訊，打tag，推送提交和tag到github，釋出npm包！relix的詳細用法請看relix文件。

本章完。

進階閱讀： 怎麼樣寫一個能告訴你npm包名字是否被佔用的工具

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

來源：