從零開發(fā)一個(gè)node命令行工具
什么是命令行工具？
命令行工具（Cmmand Line Interface）簡稱cli，顧名思義就是在命令行終端中使用的工具。我們常用的 git 、npm、vim 等都是 cli 工具，比如我們可以通過 git clone 等命令簡單把遠(yuǎn)程代碼復(fù)制到本地。
為什么要用cli工具？
和 cli 相對(duì)的是圖形用戶界面（gui），windows 環(huán)境中幾乎都是 gui 工具，而 linux 環(huán)境中則幾乎都是 cli 工具，因?yàn)閮烧哂脩舨煌琯ui 側(cè)重于易用，cli 則側(cè)重于效率。對(duì)于熟悉 gui 和集成開發(fā)環(huán)境（IDE）的程序員，這似乎很難理解。畢竟用鼠標(biāo)點(diǎn)點(diǎn)拽拽，不是更方便么?
很遺憾，答案是否定的。gui對(duì)于某些簡單操作，可能更快、更方便。比如移動(dòng)文件、閱讀郵件或?qū)憌ord文檔。但如果你依賴 gui 完成全部工作，你將會(huì)錯(cuò)過環(huán)境的某些能力，比如使常見任務(wù)自動(dòng)化，或是利用各種工具的全部功能。并且，你也無法將工具組合，創(chuàng)建出定制的宏工具。gui 的好處是所見即所得(what you see is what you get)。缺點(diǎn)是所見即全部所得(what you see is all you get)。
作為注重實(shí)效的程序員，你不斷的想要執(zhí)行特別的操作（gui 可能不支持的操作）。當(dāng)你想要快速地組合一些命令，以完成一次查詢或某種其他的任務(wù)時(shí)，cli 要更為合適。比如：查看上周哪些js文件沒有改動(dòng)過：
- # cli：
- find . -name '*.js' -mtime +7 -print
- # gui：
- 1.點(diǎn)擊并轉(zhuǎn)到"查找文件",點(diǎn)擊"文件名"字段，敲入"*.js",選擇"修改日期"選項(xiàng)卡；
- 2.然后選擇"介于".點(diǎn)擊"開始日期"，敲入項(xiàng)目開始的日期。
- 3.點(diǎn)擊"結(jié)束日期",敲入1周以前的日期(確保手邊有日歷)，點(diǎn)擊"開始查找"；
如何開發(fā)一個(gè) cli 工具？
基本上，使用任何成熟的語言都可以開發(fā) cli 工具，作為一個(gè)前端小白，還是 JavaScript 比較順手，因此我們選用 node 作為開發(fā)語言。
創(chuàng)建一個(gè)項(xiàng)目
- # 1.創(chuàng)建一個(gè)目錄：
- mkdir kid-cli && cd kid-cli
- # 2.因?yàn)樽罱K我們要把cli發(fā)布到npm上，所以需要初始化一個(gè)程序包:
- npm init
- # 3.創(chuàng)建一個(gè)index.js文件
- touch index.js
- # 4.打開編輯器(vscode)
- code .
安裝 code 命令，運(yùn)行 VS code 并打開命令面板（ ⇧⌘P ），然后輸入 shell command 找到: Install 'code' command in PATH 就行了。
打開index.js文件，添加一段測(cè)試代碼：
- #!/usr/bin/env node
- console.log('hello world!’)
終端運(yùn)行 node 程序，需要先輸入 node 命令，比如
- node index.js
可以正確輸出 hello world!，代碼頂部的 #!/usr/bin/env node是告訴終端，這個(gè)文件要使用 node 去執(zhí)行。
創(chuàng)建一個(gè)命令
一般 cli都有一個(gè)特定的命令，比如 git，剛才使用的 code 等，我們也需要設(shè)置一個(gè)命令，就叫 kid 吧！如何讓終端識(shí)別這個(gè)命令呢？很簡單，打開 package.json 文件，添加一個(gè)字段 bin，并且聲明一個(gè)命令關(guān)鍵字和對(duì)應(yīng)執(zhí)行的文件：
- # package.json
- ......
- "bin": {
- "kid": "index.js"
- },
- ......
如果想聲明多個(gè)命令，修改這個(gè)字段就好了。
然后我們測(cè)試一下,在終端中輸入 kid，會(huì)提示:
- zsh: command not found: kid
為什么會(huì)這樣呢？回想一下，通常我們?cè)谑褂靡粋€(gè) cli 工具時(shí)，都需要先安裝它，比如 vue-cli，使用前需要全局安裝:
- npm i vue-cli -g
而我們的 kid-cli 并沒有發(fā)布到 npm 上，當(dāng)然也沒有安裝過了，所以終端現(xiàn)在還不認(rèn)識(shí)這個(gè)命令。通常我們想本地測(cè)試一個(gè) npm 包，可以使用：npm link 這個(gè)命令，本地安裝這個(gè)包，我們執(zhí)行一下：
- npm link
然后再執(zhí)行
- kid
命令，看正確輸出 hello world! 了。
到此，一個(gè)簡單的命令行工具就完成了，但是這個(gè)工具并沒有任何卵用，別著急，我們來一點(diǎn)一點(diǎn)增強(qiáng)它的功能。
查看版本信息
首先是查看 cli 的版本信息，希望通過如下命令來查看版本信息：
- kid -v
這里有兩個(gè)問題
- 如何獲取 -v 這參數(shù)？
- 如何獲取版本信息？
在 node 程序中，通過 process.argv 可獲取到命令的參數(shù)，以數(shù)組返回，修改 index.js，輸出這個(gè)數(shù)組：
- console.log(process.argv)
然后輸入任意命令，比如：
- kid -v -h -lalala
控制臺(tái)會(huì)輸出
- [ '/Users/shaolong/.nvm/versions/node/v8.9.0/bin/node',
- '/Users/shaolong/.nvm/versions/node/v8.9.0/bin/kid',
- '-v',
- '-h',
- '-lalala' ]
這個(gè)數(shù)組的第三個(gè)參數(shù)就是我們想要的 -v。
第二個(gè)問題，版本信息一般是放在package.json 文件的 version 字段中, require 進(jìn)來就好了，改造后的 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
- }
然后我們?cè)賵?zhí)行kid -v，就可以輸出版本號(hào)了。
初始化一個(gè)項(xiàng)目
接下來我們來實(shí)現(xiàn)一個(gè)最常見的功能，利用 cli 初始化一個(gè)項(xiàng)目。
整個(gè)流程大概是這樣的：
- cd 到一個(gè)你想新建項(xiàng)目的目錄；
- 執(zhí)行 kid init 命令，根據(jù)提示輸入項(xiàng)目名稱；
- cli 通過 git 拉取模版項(xiàng)目代碼，并拷貝到項(xiàng)目名稱所在目錄中；
為了實(shí)現(xiàn)這個(gè)流程，我們需要解決下面幾個(gè)問題：
執(zhí)行復(fù)雜的命令
上面的例子中，我們通過 process.argv 獲取到了命令的參數(shù)，但是當(dāng)一個(gè)命令有多個(gè)參數(shù)，或者像新建項(xiàng)目這種需要用戶輸入項(xiàng)目名稱（我們稱作“問答”）的命令時(shí)，一個(gè)簡單的swith case 就顯得捉襟見肘了。這里我們引用一個(gè)專門處理命令行交互的包：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)
運(yùn)行
- kid -h
會(huì)輸出
- Usage: kid [options] [command]
- Options:
- -V, --version output the version number
- -h, --help output usage information
commander已經(jīng)為我們創(chuàng)建好了幫助信息，以及兩個(gè)參數(shù) -V 和 -h，上面代碼中的program.version 就是返回版本號(hào)，和之前的功能一致，program.parse 是將命令參數(shù)傳入commander 管道中，一般放在***執(zhí)行。
添加問答操作
接下來我們添加 kid init 的問答操作，這里有需要引入一個(gè)新的包：inquirer, 這個(gè)包可以通過簡單配置讓 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: '請(qǐng)輸入項(xiàng)目名稱:',
- name: 'name'
- }]).then(answers => {
- console.log('項(xiàng)目名為：', answers.name)
- console.log('正在拷貝項(xiàng)目，請(qǐng)稍等')
- })
- }
- program.version(require('./package.json').version)
- program
- .command('init')
- .description('創(chuàng)建項(xiàng)目')
- .action(initAction)
- program.parse(process.argv)
program.command 可以定義一個(gè)命令，description 添加一個(gè)描述，在 --help 中展示，action 指定一個(gè)回調(diào)函數(shù)執(zhí)行命令。inquirer.prompt 可以接收一組問答對(duì)象，type字段表示問答類型，name 指定答案的key，可以在 answers 里通過 name 拿到用戶的輸入，問答的類型有很多種，這里我們使用 input，讓用戶輸入項(xiàng)目名稱。
運(yùn)行 kid init，然后會(huì)提示輸入項(xiàng)目名稱，輸入后會(huì)打印出來。
運(yùn)行 shell 腳本
熟悉 git 和 linux 的同學(xué)幾句話便可以初始化一個(gè)項(xiàng)目：
- git clone xxxxx.git --depth=1
- mv xxxxx my-project
- rm -rf ./my-project/.git
- cd my-project
- npm i
那么如何在 node 中執(zhí)行 shell 腳本呢？只需要安裝 shelljs 這個(gè)包就可以輕松搞定。
- npm i shelljs --save
假定我們想克隆 github 上 vue-admin-template 這個(gè)項(xiàng)目的代碼，并自動(dòng)安裝依賴，改造index.js，在 initAction 函數(shù)中加上執(zhí)行shell腳本的邏輯：
- #!/usr/bin/env node
- const program = require('commander')
- const inquirer = require('inquirer')
- const shell = require('shelljs')
- const initAction = () => {
- inquirer.prompt([{
- type: 'input',
- message: '請(qǐng)輸入項(xiàng)目名稱:',
- name: 'name'
- }]).then(answers => {
- console.log('項(xiàng)目名為：', answers.name)
- console.log('正在拷貝項(xiàng)目，請(qǐng)稍等')
- 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('創(chuàng)建項(xiàng)目')
- .action(initAction)
- program.parse(process.argv)
shell.exec 可以幫助我們執(zhí)行一段腳本，在回調(diào)函數(shù)中可以輸出腳本執(zhí)行的結(jié)果。
測(cè)試一下我們初始化功能：
- cd ..
- kid init
- # 輸入一個(gè)項(xiàng)目名稱
可以看到，cli已經(jīng)自動(dòng)從github上拉取vue-admin-template的代碼，放在指定目錄，并幫我們自動(dòng)安裝了依賴。
尾聲
***別忘了將你的 cli 工具發(fā)布到 npm 上，給更多的同學(xué)使用。
- npm publish
怎么樣，是不是感覺看似神秘的命令行開發(fā)其實(shí)也沒有什么技術(shù)含量，上文列舉的只是 cli 開發(fā)的冰山一角，想要開發(fā)出強(qiáng)大的 cli 工具，除了需要熟悉 node 和常用工具包，更重要的是了解 linux 常用命令和文件系統(tǒng)，希望各位同學(xué)可以受到啟發(fā)，開發(fā)出屬于自己的 cli 工具。
安利時(shí)間
前端的技術(shù)點(diǎn)眾多，其中不乏抽象且晦澀的知識(shí)點(diǎn)，它們用文字無法很直觀的表述出來，所以眾多開發(fā)者對(duì)這些知識(shí)點(diǎn)的理解都是是而非，如果我們通過圖畫來展示，就會(huì)很容易理解。因此Diagram項(xiàng)目希望開發(fā)者能通過這種方式吃透前端技術(shù)領(lǐng)域的知識(shí)點(diǎn)。
