一統江湖的大前端（6）commander.js + inquirer.js——懶，纔是第一輩子產力

《一統江湖的大前端》系列是本身的前端學習筆記，旨在介紹javascript在非網頁開發領域的應用案例和發現各種好玩的js庫，不按期更新。若是你對前端的理解仍是寫寫頁面綁綁事件，那你真的是有點OUT了，前端能作的事情已經太多了, 手機app開發 , 桌面應用開發 , 用於神經網絡人工智能的庫 , 頁面遊戲 , 數據可視化 , 甚至 嵌入式開發 ，什麼火就搞什麼,活脫脫一個蹭熱點小能手。若是你也以爲前端的平常開發有些枯燥，不妨一塊兒來看看前端的另外一番模樣。

一.[懶]——纔是第一輩子產力

你沒有看錯，懶絕壁是第一輩子產力，技術的進步，不少時候都是由於一些很是聰明的人難以忍受一些（在他們眼裏）枯燥重複且低效的東西，從而發明出的東西，不管這些新發明在經歷了迭代和打磨以後看起來多麼牛逼耀眼，但其本質基本均可以概括爲：

是聰明的懶人搞出的可讓本身更省事的東西。

• jQuery的流行，是由於開發者懶得爲DOM編寫跨瀏覽器兼容性代碼
• Angular.js的流行, 是由於開發者連DOM都懶得操做
• Bootstrap的流行, 是由於開發者懶得編寫自適應樣式
• Webpack的流行, 是由於開發者懶得作一系列上線前的準備工做
  ......

有的人越懶越牛逼，有的人越懶越逗逼，看來懶也是個技術活，懶出高度，懶出藝術，那纔是真的高端懶。

二.從GUI到CLI

GUI(Grapic User Interface,即圖形化用戶界面)和CLI(Command Line Interface,即命令行交互界面)都有其擁護者。
你們都懶,只是對懶的認知不一樣，用GUI的人懶得去記命令,用CLI的人懶得去挪鼠標。

不少前端童鞋都經過可視化工具小烏龜來管理git代碼倉庫，可視化工具的好處在於可讓初學者能夠更直觀更容易地去管理代碼。

可是筆者發現不少熟練的開發者都更喜歡使用命令行工具(如下簡稱Cli工具)，不只由於Cli工具能夠知足裝X需求，更是由於它能夠幫你省掉不少繁瑣的移動鼠標和點擊的動做。
有時候你並不須要去記憶不少指令和參數(固然用的次數多了，你不想記也記住了),幾乎全部的命令行工具只要簡單滴使用-h或--help參數就能夠打印出幫助文件，你徹底能夠邊學邊用，逐步熟悉。

不少熟悉Vue的同窗都使用過vue-cli命令行工具來初始化一個Vue項目，以下圖所示，經過嚮導式問答收集關鍵參數信息，而後自動生成相應的工程文件，比你本身各類新建文件和新建文件夾效率高多了。

接下來，請跟隨筆者一塊兒，看看一個前端開發人員如何從零開始打造一款屬於本身的cli工具吧~

三.相關知識儲備

1.前提條件
你須要一些Node.js的API知識和一些基本的命令行使用經驗。詳細的文檔能夠訪問NodeJs官方API獲取更多信息。

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

• createInterface
  用於建立接口實例，成功調用後返回一個接口實例，調用後使用方法以下:

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

• rl.question(query, callback)
  實例方法，提供一個問答式單行交互方法，向用戶展現提示信息，而後接受並處理用戶輸入,調用方法以下:

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

• rl.write(info)
  實例方法，向建立rl接口實例時鏈接的output輸出流輸出信息，一般使用主進程輸出流process.stdout,調用方法以下：

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

作個Demo輕鬆一下(demo的源碼請在附件拿):

3.child_process
child_process包提供了利用子進程執行命令或調用文件的能力,經常使用的API包括:

• child_process.spawn()
  實際執行方法，其餘方法均爲基於此方法的封裝，使用方式以下:

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()及同名的同步方法
  均是對spawn方法必定程度上的封裝，使用更方便。

再來個Demo輕鬆一下,經過在windows命令行工具中執行js文件,執行了dir命令(demo的源碼請在附件拿):

ps:亂碼的問題涉及到子進程和主進程通信時的信息的編碼和解碼問題，遇到實際問題的童鞋能夠了解一下iconv-lite這個插件.

四.guide風格命令行開發工具——inquirer.js

github地址爲:Inquirer.js地址
guide風格的命令行，指提問-回答模式的命令行，inquirer.js支持常見的input輸入,單選,多選,是/否等常見提問類型，並暴露了增長自定義類型的接口，參考官方文檔很容易使用。

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!!
  });

來看看官方提供的一個Pizza訂購工具pizza.js的效果(是否是有vue-cli的既視感~~~)：

五.git風格命令行開發工具——commander.js

github地址爲:Commander.js地址
git風格命令行，是指經過主指令+子指令+參數的模式運行命令實現功能，和guide風格命令行沒有本質區別，只是使用習慣的偏好。
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);

來看看官方提供的這個Pizza訂購工具pizza.js的效果(老外是有多喜歡吃Pizza！！！)：

六.不一樣風格的實現思路

1.基本架構

• web版本
  • 前端使用任意框架製做，點擊某功能按鈕時，向後端發送帶參請求
  • 後端爲node服務器，監聽指定端口，接收到客戶端請求後，調用具體功能
  • 根據後端執行狀況信息在前端展現的實時性要求，選擇長鏈接或普通鏈接
  • 後端使用child_process或相關類庫實現命令並將信息傳輸至前端
• Guide風格命令行
  • 直接使用inquirer.js庫編寫問題組或分支問題樹
  • inquirer.js最終將用戶輸入綁定在一個對象上
  • 使用inquirer.js收集到的參數
  • 帶參數運行命令或腳本
• git風格命令行
  • 直接使用commander.js庫的API編寫支持的指令
  • commander.js會從註冊的命令及子命令中尋找匹配
  • 使用commander.js收集到的參數運行對應的命令或腳本

2.其餘問題

• 兼容性
  • 使用多種腳本格式
    爲了兼容不一樣運行環境，能夠爲實際須要執行的命令準備.bat和.sh兩套腳本，在node.js代碼中根據process.platform查詢當前系統環境並調用對應格式的腳本
  • 使用兼容性插件庫
    例如《一統江湖的大前端(4)——Shell.js》中說起的shell.js庫，可將自動化腳本重構爲js版本代碼,實現跨平臺運行。
• 全局執行命令
  • 開發版本
    開發版本的程序，能夠在代碼根目錄中使用npm link將其註冊爲全局安裝，當開發完畢正式發佈後，使用npm unlink去除鏈接便可。
  • 發佈版本
    當node包開發完成並使用publish命令正式發佈之後，便可經過npm install -g XXX或yarn global add XXX直接從npm上下載並全局安裝，而後便可全局使用。

七.要什麼demo？直接搞實戰！

接下來咱們在Windows環境下實現一個自動化腳本，實現的功能主要包括:

• 1.刪除舊目錄
• 2.新建目錄
• 3.從遠程git倉庫指定分支下載代碼
• 4.在本地創建新分支並

auto_download.js源碼:

var child_process = require('child_process');
function execTask(issueNumber, openLocalhost) {
    //示例中的自定義配置信息從configJson對象中獲取
    var originDir = configJson['項目信息']['遠程倉庫地址'];
    var originBranch = configJson['feature分支']['遠程分支名稱'];
    var destDir = configJson['項目信息']['本地倉庫地址'];
    var projectName = configJson['項目信息']['項目名稱'] + '_issue';
    var devBranch = configJson['本地開發']['默認分支前綴'] + issueNumber;

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

        //監聽標準輸出
        issue_process.stdout
        .on('exit', function (number) {
            console.log(number);
            console.log('感謝您使用Dash-Toolbox!')
        });
}

execTask(12315, true);

自動化腳本download_dev_branch.bat源碼:

@echo off
rem 當前腳本用於將遠程倉庫的開發分支代碼下載至指定的本地目錄並生成開發分支
rem %1 - 本地倉庫文件夾
rem %2 - 本地指定分支文件夾名
rem %3 - 遠程倉庫地址
rem %4 - 遠程開發分支名
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)

使用方法：
在文件目錄下開啓命令行cmd.exe,輸入node auto_download便可看到在對應的目錄下載了代碼:

自動化腳本的部分也能夠採用node的File API來實現。

八.後記

在學習了以上知識後，筆者決定開發一款命令行工具——Dash-Toolbox。
其目的主要是:
在保密性要求較高因此不通外網的環境下，將經常使用的文檔資源集中化，將常規的動做自動化。
在全局環境下命令行中輸入dash便可啓動Guide模式，輸入dash -h相似命令便可支持Git模式，並已經制做了Web模式的首頁。來先睹爲快感覺一下：

實際上是受夠了一次次花20秒鐘改代碼，而後花20分鐘提交代碼和發佈的過程，儘管代碼提交後的流程已經打通了jenkins的自動化流程，但代碼提交前的本地工做仍然是手動的，我真的只是懶而已。