一統(tǒng)江湖的大前端（6）commander.js + inquirer.js——懶，才是第一生產(chǎn)力

《一統(tǒng)江湖的大前端》系列是自己的前端學(xué)習(xí)筆記，旨在介紹javascript在非網(wǎng)頁(yè)開(kāi)發(fā)領(lǐng)域的應(yīng)用案例和發(fā)現(xiàn)各類好玩的js庫(kù)，不定期更新。如果你對(duì)前端的理解還是寫(xiě)寫(xiě)頁(yè)面綁綁事件，那你真的是有點(diǎn)OUT了，前端能做的事情已經(jīng)太多了, 手機(jī)app開(kāi)發(fā) , 桌面應(yīng)用開(kāi)發(fā) , 用于神經(jīng)網(wǎng)絡(luò)人工智能的庫(kù) , 頁(yè)面游戲 , 數(shù)據(jù)可視化 , 甚至 嵌入式開(kāi)發(fā) ，什么火就搞什么,活脫脫一個(gè)蹭熱點(diǎn)小能手。如果你也覺(jué)得前端的日常開(kāi)發(fā)有些枯燥，不妨一起來(lái)看看前端的另一番模樣。//華為云社區(qū)首發(fā)

一.[懶]——才是第一生產(chǎn)力

你沒(méi)有看錯(cuò)，懶絕壁是第一生產(chǎn)力，技術(shù)的進(jìn)步，很多時(shí)候都是因?yàn)橐恍┓浅Ｂ斆鞯娜穗y以忍受一些（在他們眼里）枯燥重復(fù)且低效的東西，從而發(fā)明出的東西，無(wú)論這些新發(fā)明在經(jīng)歷了迭代和打磨之后看起來(lái)多么牛逼耀眼，但其本質(zhì)基本都可以歸納為：

是聰明的懶人搞出的可以讓自己更省事的東西。

• jQuery的流行，是因?yàn)殚_(kāi)發(fā)者懶得為DOM編寫(xiě)跨瀏覽器兼容性代碼
• Angular.js的流行, 是因?yàn)殚_(kāi)發(fā)者連DOM都懶得操作
• Bootstrap的流行, 是因?yàn)殚_(kāi)發(fā)者懶得編寫(xiě)自適應(yīng)樣式
• Webpack的流行, 是因?yàn)殚_(kāi)發(fā)者懶得做一系列上線前的準(zhǔn)備工作
  ......

有的人越懶越牛逼，有的人越懶越逗逼，看來(lái)懶也是個(gè)技術(shù)活，懶出高度，懶出藝術(shù)，那才是真的高端懶。

二.從GUI到CLI

GUI(Grapic User Interface,即圖形化用戶界面)和CLI(Command Line Interface,即命令行交互界面)都有其擁護(hù)者。
大家都懶,只是對(duì)懶的認(rèn)知不同，用GUI的人懶得去記命令,用CLI的人懶得去挪鼠標(biāo)。

很多前端童鞋都通過(guò)可視化工具小烏龜來(lái)管理git代碼倉(cāng)庫(kù)，可視化工具的好處在于可以讓初學(xué)者可以更直觀更容易地去管理代碼。

但是筆者發(fā)現(xiàn)很多熟練的開(kāi)發(fā)者都更喜歡使用命令行工具(以下簡(jiǎn)稱Cli工具)，不僅因?yàn)镃li工具可以滿足裝X需求，更是因?yàn)樗梢詭湍闶〉艉芏喾爆嵉囊苿?dòng)鼠標(biāo)和點(diǎn)擊的動(dòng)作。
有時(shí)候你并不需要去記憶很多指令和參數(shù)(當(dāng)然用的次數(shù)多了，你不想記也記住了),幾乎所有的命令行工具只要簡(jiǎn)單滴使用-h或--help參數(shù)就可以打印出幫助文件，你完全可以邊學(xué)邊用，逐步熟悉。

很多熟悉Vue的同學(xué)都使用過(guò)vue-cli命令行工具來(lái)初始化一個(gè)Vue項(xiàng)目，如下圖所示，通過(guò)向?qū)絾?wèn)答收集關(guān)鍵參數(shù)信息，然后自動(dòng)生成相應(yīng)的工程文件，比你自己各種新建文件和新建文件夾效率高多了。

接下來(lái)，請(qǐng)跟隨筆者一起，看看一個(gè)前端開(kāi)發(fā)人員如何從零開(kāi)始打造一款屬于自己的cli工具吧~

三.相關(guān)知識(shí)儲(chǔ)備

1.前提條件
你需要一些Node.js的API知識(shí)和一些基本的命令行使用經(jīng)驗(yàn)。詳細(xì)的文檔可以訪問(wèn)NodeJs官方API獲取更多信息。

2.readline
readline工具包用于逐行處理信息，常用的API包括：

• createInterface
  用于創(chuàng)建接口實(shí)例，成功調(diào)用后返回一個(gè)接口實(shí)例，調(diào)用后使用方法如下:

  var rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
  });

• rl.question(query, callback)
  實(shí)例方法，提供一個(gè)問(wèn)答式單行交互方法，向用戶展示提示信息，然后接受并處理用戶輸入,調(diào)用方法如下:

  rl.question('你學(xué)會(huì)怎么用了嗎？',function(input){
    console.log('你輸入了:',input);
  })

• rl.write(info)
  實(shí)例方法，向創(chuàng)建rl接口實(shí)例時(shí)連接的output輸出流輸出信息，通常使用主進(jìn)程輸出流process.stdout,調(diào)用方法如下：

  rl.write('我是這樣用的');

  做個(gè)Demo輕松一下(demo的源碼請(qǐng)?jiān)诟郊?:
  

3.child_process
child_process包提供了利用子進(jìn)程執(zhí)行命令或調(diào)用文件的能力,常用的API包括:

• child_process.spawn()
  實(shí)際執(zhí)行方法，其他方法均為基于此方法的封裝，使用方式如下:

  const { spawn } = require('child_process');
  const ls = spawn('ls', ['-lh', '/usr']);
  
  ls.stdout.on('data', (data) => {
    console.log(`stdout: ${data}`);
  });
  
  ls.stderr.on('data', (data) => {
    console.log(`stderr: ${data}`);
  });
  
  ls.on('close', (code) => {
    console.log(`child process exited with code ${code}`);
  });

• child_process.exec(), child_process.execFile()及同名的同步方法
  均是對(duì)spawn方法一定程度上的封裝，使用更方便。

再來(lái)個(gè)Demo輕松一下,通過(guò)在windows命令行工具中執(zhí)行js文件,執(zhí)行了dir命令(demo的源碼請(qǐng)?jiān)诟郊?:

ps:亂碼的問(wèn)題涉及到子進(jìn)程和主進(jìn)程通訊時(shí)的信息的編碼和解碼問(wèn)題，遇到實(shí)際問(wèn)題的童鞋可以了解一下iconv-lite這個(gè)插件.

四.guide風(fēng)格命令行開(kāi)發(fā)工具——inquirer.js

github地址為:Inquirer.js地址
guide風(fēng)格的命令行，指提問(wèn)-回答模式的命令行，inquirer.js支持常見(jiàn)的input輸入,單選,多選,是/否等常見(jiàn)提問(wèn)類型，并暴露了增加自定義類型的接口，參考官方文檔很容易使用。

API使用舉例:

  const questions = [];

  inquirer
  .prompt(
      /* Pass your questions in here */
      [{
        type: 'confirm',
        name: 'toBeDelivered',
        message: 'Is this for delivery?',
        default: false
      }]
  )
  .then(answers => {
     // Use user feedback for... whatever!!
  });

來(lái)看看官方提供的一個(gè)Pizza訂購(gòu)工具pizza.js的效果(是不是有vue-cli的既視感~~~)：

五.git風(fēng)格命令行開(kāi)發(fā)工具——commander.js

github地址為:Commander.js地址
git風(fēng)格命令行，是指通過(guò)主指令+子指令+參數(shù)的模式運(yùn)行命令實(shí)現(xiàn)功能，和guide風(fēng)格命令行沒(méi)有本質(zhì)區(qū)別，只是使用習(xí)慣的偏好。
API使用舉例:

program
  .version('0.0.1')
  .description('An application for pizzas ordering')
  .option('-p, --peppers', 'Add peppers')
  .option('-P, --pineapple', 'Add pineapple')
  .option('-b, --bbq', 'Add bbq sauce')
  .option('-c, --cheese <type>', 'Add the specified type of cheese [marble]')
  .option('-C, --no-cheese', 'You do not want any cheese')
  .parse(process.argv);

來(lái)看看官方提供的這個(gè)Pizza訂購(gòu)工具pizza.js的效果(老外是有多喜歡吃Pizza！?。?：

六.不同風(fēng)格的實(shí)現(xiàn)思路

1.基本架構(gòu)

• web版本
  • 前端使用任意框架制作，點(diǎn)擊某功能按鈕時(shí)，向后端發(fā)送帶參請(qǐng)求
  • 后端為node服務(wù)器，監(jiān)聽(tīng)指定端口，接收到客戶端請(qǐng)求后，調(diào)用具體功能
  • 根據(jù)后端執(zhí)行情況信息在前端展示的實(shí)時(shí)性要求，選擇長(zhǎng)連接或普通連接
  • 后端使用child_process或相關(guān)類庫(kù)實(shí)現(xiàn)命令并將信息傳輸至前端
• Guide風(fēng)格命令行
  • 直接使用inquirer.js庫(kù)編寫(xiě)問(wèn)題組或分支問(wèn)題樹(shù)
  • inquirer.js最終將用戶輸入綁定在一個(gè)對(duì)象上
  • 使用inquirer.js收集到的參數(shù)
  • 帶參數(shù)運(yùn)行命令或腳本
• git風(fēng)格命令行
  • 直接使用commander.js庫(kù)的API編寫(xiě)支持的指令
  • commander.js會(huì)從注冊(cè)的命令及子命令中尋找匹配
  • 使用commander.js收集到的參數(shù)運(yùn)行對(duì)應(yīng)的命令或腳本

2.其他問(wèn)題

• 兼容性
  • 使用多種腳本格式
    為了兼容不同運(yùn)行環(huán)境，可以為實(shí)際需要執(zhí)行的命令準(zhǔn)備.bat和.sh兩套腳本，在node.js代碼中根據(jù)process.platform查詢當(dāng)前系統(tǒng)環(huán)境并調(diào)用對(duì)應(yīng)格式的腳本
  • 使用兼容性插件庫(kù)
    例如《一統(tǒng)江湖的大前端(4)——Shell.js》中提及的shell.js庫(kù)，可將自動(dòng)化腳本重構(gòu)為js版本代碼,實(shí)現(xiàn)跨平臺(tái)運(yùn)行。
• 全局執(zhí)行命令
  • 開(kāi)發(fā)版本
    開(kāi)發(fā)版本的程序，可以在代碼根目錄中使用npm link將其注冊(cè)為全局安裝，當(dāng)開(kāi)發(fā)完畢正式發(fā)布后，使用npm unlink去除連接即可。
  • 發(fā)布版本
    當(dāng)node包開(kāi)發(fā)完成并使用publish命令正式發(fā)布以后，即可通過(guò)npm install -g XXX或yarn global add XXX直接從npm上下載并全局安裝，然后即可全局使用。

七.要什么demo？直接搞實(shí)戰(zhàn)！

接下來(lái)我們?cè)赪indows環(huán)境下實(shí)現(xiàn)一個(gè)自動(dòng)化腳本，實(shí)現(xiàn)的功能主要包括:

• 1.刪除舊目錄
• 2.新建目錄
• 3.從遠(yuǎn)程git倉(cāng)庫(kù)指定分支下載代碼
• 4.在本地建立新分支并

auto_download.js源碼:

var child_process = require('child_process');
function execTask(issueNumber, openLocalhost) {
    //示例中的自定義配置信息從configJson對(duì)象中獲取
    var originDir = configJson['項(xiàng)目信息']['遠(yuǎn)程倉(cāng)庫(kù)地址'];
    var originBranch = configJson['feature分支']['遠(yuǎn)程分支名稱'];
    var destDir = configJson['項(xiàng)目信息']['本地倉(cāng)庫(kù)地址'];
    var projectName = configJson['項(xiàng)目信息']['項(xiàng)目名稱'] + '_issue';
    var devBranch = configJson['本地開(kāi)發(fā)']['默認(rèn)分支前綴'] + issueNumber;

    //執(zhí)行下載腳本
    var issue_process = child_process.spawn('download_dev_branch.bat',
        [destDir, projectName, originDir, originBranch, devBranch],
        {
            stdio : 'inherit'
        });

        //監(jiān)聽(tīng)標(biāo)準(zhǔn)輸出
        issue_process.stdout
        .on('exit', function (number) {
            console.log(number);
            console.log('感謝您使用Dash-Toolbox!')
        });
}

execTask(12315, true);

自動(dòng)化腳本download_dev_branch.bat源碼:

@echo off
rem 當(dāng)前腳本用于將遠(yuǎn)程倉(cāng)庫(kù)的開(kāi)發(fā)分支代碼下載至指定的本地目錄并生成開(kāi)發(fā)分支
rem %1 - 本地倉(cāng)庫(kù)文件夾
rem %2 - 本地指定分支文件夾名
rem %3 - 遠(yuǎn)程倉(cāng)庫(kù)地址
rem %4 - 遠(yuǎn)程開(kāi)發(fā)分支名
rem %5 - 包含issue代碼的本地分支
@echo on
cd %1 
rmdir /s/q %2
mkdir %2 && cd %2
git init
git remote add origin %3
git fetch origin %4 :%5 --progress --no-tags
git checkout %5
exit(0)

使用方法：
在文件目錄下開(kāi)啟命令行cmd.exe,輸入node auto_download即可看到在對(duì)應(yīng)的目錄下載了代碼:

自動(dòng)化腳本的部分也可以采用node的File API來(lái)實(shí)現(xiàn)。

八.后記

在學(xué)習(xí)了以上知識(shí)后，筆者決定開(kāi)發(fā)一款命令行工具——Dash-Toolbox。
其目的主要是:
在保密性要求較高所以不通外網(wǎng)的環(huán)境下，將常用的文檔資源集中化，將常規(guī)的動(dòng)作自動(dòng)化。
在全局環(huán)境下命令行中輸入dash即可啟動(dòng)Guide模式，輸入dash -h類似命令即可支持Git模式，并已經(jīng)制作了Web模式的首頁(yè)。來(lái)先睹為快感受一下：

其實(shí)是受夠了一次次花20秒鐘改代碼，然后花20分鐘提交代碼和發(fā)布的過(guò)程，盡管代碼提交后的流程已經(jīng)打通了jenkins的自動(dòng)化流程，但代碼提交前的本地工作仍然是手動(dòng)的，我真的只是懶而已。