從零開發一個node命令行工具

什麼是命令行工具？

命令行工具（Cmmand Line Interface）簡稱cli，顧名思義就是在命令行終端中使用的工具。咱們經常使用的 git 、npm、vim 等都是 cli 工具，好比咱們能夠經過 git clone 等命令簡單把遠程代碼複製到本地。

爲何要用cli工具？

和 cli 相對的是圖形用戶界面（gui），windows 環境中幾乎都是 gui 工具，而 linux 環境中則幾乎都是 cli 工具，由於二者用戶不一樣，gui 側重於易用，cli 則側重於效率。對於熟悉 gui 和集成開發環境（IDE）的程序員，這彷佛很難理解。畢竟用鼠標點點拽拽，不是更方便麼?

很遺憾，答案是否認的。gui對於某些簡單操做，可能更快、更方便。好比移動文件、閱讀郵件或寫word文檔。但若是你依賴 gui 完成所有工做，你將會錯過環境的某些能力，好比使常見任務自動化，或是利用各類工具的所有功能。而且，你也沒法將工具組合，建立出定制的宏工具。gui 的好處是所見即所得(what you see is what you get)。缺點是所見即所有所得(what you see is all you get)。

做爲注重實效的程序員，你不斷的想要執行特別的操做（gui 可能不支持的操做）。當你想要快速地組合一些命令，以完成一次查詢或某種其餘的任務時，cli 要更爲合適。好比：查看上週哪些js文件沒有改動過：

# cli：
find . -name '*.js' -mtime +7 -print
# gui：
1.點擊並轉到"查找文件",點擊"文件名"字段，敲入"*.js",選擇"修改日期"選項卡；
2.而後選擇"介於".點擊"開始日期"，敲入項目開始的日期。
3.點擊"結束日期",敲入1周之前的日期(確保手邊有日曆)，點擊"開始查找"；

如何開發一個 cli 工具？

基本上，使用任何成熟的語言均可以開發 cli 工具，做爲一個前端小白，仍是 JavaScript 比較順手，所以咱們選用 node 做爲開發語言。

建立一個項目

# 1.建立一個目錄：
mkdir kid-cli && cd kid-cli
# 2.由於最終咱們要把cli發佈到npm上，因此須要初始化一個程序包: 
npm init
# 3.建立一個index.js文件
touch index.js
# 4.打開編輯器(vscode)
code  .

安裝 code 命令，運行 VS code 並打開命令面板（ ⇧⌘P ），而後輸入 shell command 找到: Install 'code' command in PATH 就好了。

打開index.js文件，添加一段測試代碼：

#!/usr/bin/env node

console.log('hello world!’)

終端運行 node 程序，須要先輸入 node 命令，好比

node index.js

能夠正確輸出 hello world!，代碼頂部的 #!/usr/bin/env node是告訴終端，這個文件要使用 node 去執行。

建立一個命令

通常 cli都有一個特定的命令，好比 git，剛纔使用的 code 等，咱們也須要設置一個命令，就叫 kid 吧！如何讓終端識別這個命令呢？很簡單，打開 package.json 文件，添加一個字段 bin，而且聲明一個命令關鍵字和對應執行的文件：

# package.json
......
  "bin": {
    "kid": "index.js"
  },
......

若是想聲明多個命令，修改這個字段就行了。

而後咱們測試一下,在終端中輸入 kid，會提示:

zsh: command not found: kid

爲何會這樣呢？回想一下，一般咱們在使用一個 cli 工具時，都須要先安裝它，好比 vue-cli，使用前須要全局安裝:

npm i vue-cli -g

而咱們的 kid-cli 並無發佈到 npm 上，固然也沒有安裝過了，因此終端如今還不認識這個命令。一般咱們想本地測試一個 npm 包，可使用：npm link 這個命令，本地安裝這個包，咱們執行一下：

npm link

而後再執行

kid

命令，看正確輸出 hello world! 了。

到此，一個簡單的命令行工具就完成了，可是這個工具並無任何卵用，彆着急，咱們來一點一點加強它的功能。

查看版本信息

首先是查看 cli 的版本信息，但願經過以下命令來查看版本信息：

kid -v

這裏有兩個問題

1. 如何獲取 -v 這參數？
2. 如何獲取版本信息？

在 node 程序中，經過 process.argv 可獲取到命令的參數，以數組返回，修改 index.js，輸出這個數組：

console.log(process.argv)

而後輸入任意命令，好比：

kid -v -h -lalala

控制檯會輸出

[ '/Users/shaolong/.nvm/versions/node/v8.9.0/bin/node',
  '/Users/shaolong/.nvm/versions/node/v8.9.0/bin/kid',
  '-v',
  '-h',
  '-lalala' ]

這個數組的第三個參數就是咱們想要的 -v。

第二個問題，版本信息通常是放在package.json 文件的 version 字段中, require 進來就行了，改造後的 index.js 代碼以下：

#!/usr/bin/env node
const pkg = require('./package.json')
const command = process.argv[2]

switch (command) {
    case '-v':
    console.log(pkg.version)
    break
    default:
    break
}

而後咱們再執行kid -v，就能夠輸出版本號了。

初始化一個項目

接下來咱們來實現一個最多見的功能，利用 cli 初始化一個項目。

整個流程大概是這樣的：

1. cd 到一個你想新建項目的目錄；
2. 執行 kid init 命令，根據提示輸入項目名稱；
3. cli 經過 git 拉取模版項目代碼，並拷貝到項目名稱所在目錄中；

爲了實現這個流程，咱們須要解決下面幾個問題：

執行復雜的命令

上面的例子中，咱們經過 process.argv 獲取到了命令的參數，可是當一個命令有多個參數，或者像新建項目這種須要用戶輸入項目名稱（咱們稱做「問答」）的命令時，一個簡單的swith case 就顯得捉襟見肘了。這裏咱們引用一個專門處理命令行交互的包：commander。

npm i commander --save

而後改造index.js

#!/usr/bin/env node

const program = require('commander')

program.version(require('./package.json').version)
program.parse(process.argv)

運行

kid -h

會輸出

Usage: kid [options] [command]

Options:

  -V, --version  output the version number
  -h, --help     output usage information

commander已經爲咱們建立好了幫助信息，以及兩個參數 -V 和 -h，上面代碼中的program.version 就是返回版本號，和以前的功能一致，program.parse 是將命令參數傳入commander 管道中，通常放在最後執行。

添加問答操做

接下來咱們添加 kid init 的問答操做，這裏有須要引入一個新的包：inquirer, 這個包能夠經過簡單配置讓 cli 支持問答交互。

npm i inquirer --save

index.js：

#!/usr/bin/env node

const program = require('commander')
var inquirer = require('inquirer')

const initAction = () => {
    inquirer.prompt([{
        type: 'input',
        message: '請輸入項目名稱:',
        name: 'name'
    }]).then(answers => {
        console.log('項目名爲：', answers.name)
        console.log('正在拷貝項目，請稍等')
    })
}

program.version(require('./package.json').version)

program
    .command('init')
    .description('建立項目')
    .action(initAction)

program.parse(process.argv)

program.command 能夠定義一個命令，description 添加一個描述，在 --help 中展現，action 指定一個回調函數執行命令。inquirer.prompt 能夠接收一組問答對象，type字段表示問答類型，name 指定答案的key，能夠在 answers 裏經過 name 拿到用戶的輸入，問答的類型有不少種，這裏咱們使用 input，讓用戶輸入項目名稱。

運行 kid init，而後會提示輸入項目名稱，輸入後會打印出來。

運行 shell 腳本

熟悉 git 和 linux 的同窗幾句話即可以初始化一個項目：

git clone xxxxx.git --depth=1
mv xxxxx my-project
rm -rf ./my-project/.git
cd my-project
npm i

那麼如何在 node 中執行 shell 腳本呢？只須要安裝 shelljs 這個包就能夠輕鬆搞定。

npm i shelljs --save

假定咱們想克隆 github 上 vue-admin-template 這個項目的代碼，並自動安裝依賴，改造index.js，在 initAction 函數中加上執行shell腳本的邏輯：

#!/usr/bin/env node

const program = require('commander')
const inquirer = require('inquirer')
const shell = require('shelljs')

const initAction = () => {
    inquirer.prompt([{
        type: 'input',
        message: '請輸入項目名稱:',
        name: 'name'
    }]).then(answers => {
        console.log('項目名爲：', answers.name)
        console.log('正在拷貝項目，請稍等')
        
        const remote = 'https://github.com/PanJiaChen/vue-admin-template.git'
        const curName = 'vue-admin-template'
        const tarName = answers.name

        shell.exec(`
                git clone ${remote} --depth=1
                mv ${curName} ${tarName}
                rm -rf ./${tarName}/.git
                cd ${tarName}
                npm i
              `, (error, stdout, stderr) => {
            if (error) {
                console.error(`exec error: ${error}`)
                return
            }
            console.log(`${stdout}`)
            console.log(`${stderr}`)
        });
    })
}

program.version(require('./package.json').version)

program
    .command('init')
    .description('建立項目')
    .action(initAction)

program.parse(process.argv)

shell.exec 能夠幫助咱們執行一段腳本，在回調函數中能夠輸出腳本執行的結果。

測試一下咱們初始化功能：

cd ..
kid init
# 輸入一個項目名稱

能夠看到，cli已經自動從github上拉取vue-admin-template的代碼，放在指定目錄，並幫咱們自動安裝了依賴。

尾聲

最後別忘了將你的 cli 工具發佈到 npm 上，給更多的同窗使用。

npm publish

怎麼樣，是否是感受看似神祕的命令行開發其實也沒有什麼技術含量，上文列舉的只是 cli 開發的冰山一角，想要開發出強大的 cli 工具，除了須要熟悉 node 和經常使用工具包，更重要的是瞭解 linux 經常使用命令和文件系統，但願各位同窗能夠受到啓發，開發出屬於本身的 cli 工具。

安利時間

前端的技術點衆多，其中不乏抽象且晦澀的知識點，它們用文字沒法很直觀的表述出來，因此衆多開發者對這些知識點的理解都是是而非，若是咱們經過圖畫來展現，就會很容易理解。所以Diagram項目但願開發者能經過這種方式吃透前端技術領域的知識點。
咱們每週會定時更新，每期更新5張技術圖解或者思惟導圖。
每週對着這些圖解來溫習，相信用不了多久，你也能成爲前端大神！
項目github地址: https://github.com/Tnfe/TNFE-Diagram