NodeJS和命令行程序

本文做者：劉觀宇，360 奇舞團高級前端工程師、技術經理，W3C CSS 工做組成員。

造物無言卻有情，每於寒盡覺春生。千紅萬紫安排著，只待新雷第一聲。 —— 清.張維屏 《新雷》

源起

植根於Unix系統環境下的程序，不少都把貫徹Unix系統設計的哲學做爲一種追求。Unix系統管道機制的發明者Douglas McIlroy把Unix哲學總結爲三點：

1. 專一作一件事，並作到極致。
2. 程序協同工做。
3. 面向通用接口，如文本數據流。

隨着Unix/Linux系統在服務器上影響力愈加強大，以及各類跨平臺解決方案的發展，這種哲學也被帶到了各類平臺上。若干年前，筆者第一次接觸NodeJS和其包管理解決方案NPM時候，就感受到其官方倡導的風格，和Unix系統哲學很是契合。近年來，隨着NodeJS在服務端以及前端構建領域上的不斷開拓，NodeJS的這種思想也正快速的滲透到這些領域。

其實，NodeJS的自己，也是開發命令行程序的一個重要利器。本文就將介紹幾個經常使用的NodeJS相關命令行程序，以後介紹幾個開發命令行中經常使用的組件，最後介紹發佈npm包以及帶scope的包的發佈方法。

命令行是如何工做的

命令行，能夠簡單定義爲是一種基於文本流的用戶交互接口和交互方式。命令行程序經常經過命令行參數的傳遞來獲得不一樣的運行方式。而因爲一切命令的下達，都是基於文本的，因此也爲元編程，提供了便利。

命令行程序能夠是編譯執行的，也能夠是解釋執行的。對於編譯後的命令行程序，將直接以機器碼執行。而對於大多數的解釋型的命令行程序，運行每每須要藉助命令行解釋程序。

這篇文章中提到的命令行程序特指須要解釋程序的命令行程序。

能夠充當命令行解釋程序的，其實包含了你們據說過的常見的解釋器，好比bash、zsh、perl、python、ruby、tcl等等，固然還有NodeJS。

打開一個命令行程序，比較標準的寫法是在第一行寫明解釋程序的路徑，如：

#!/usr/local/opt/python/bin/python3.6
複製代碼

這裏 #! 成爲shebang，通常位於文件的最開頭。在Unix系統中，#!所在行後面的部分將被視爲解釋器指令。同時會把文件所在路徑做爲參數附在解釋器後面。上例中，若是文件是/usr/local/bin/pip，則直接運行/usr/local/bin/pip的效果，等同於/usr/local/opt/python/bin/python3.6 /usr/local/bin/pip。

這樣作，使得用戶無需關心解釋程序，無需關心代碼編寫的語言，直接運行對應的命令行程序自己就行了。這也是shebang存在的意義。不過，因爲系統設定的緣由，使用windows的同窗可能沒法享受這種便利，通常還需手動指定解釋程序的路徑。可是，他們能夠雙擊運行:-)。

能夠試着用文本編輯工具打開一個NodeJS寫成的腳本如：webpack，會發現其第一行是#!/usr/bin/env node。這句話並非直接的NodeJS的解析程序。這裏， /usr/bin/env是一個程序，目的是從系統的PATH中尋找對應名字的解釋程序的地址。此時，解釋程序能夠被安裝在各類路徑，只要在系統PATH中註冊過，就能夠找到了。

可能你們遇到過這種問題，在運行某些NodeJS程序會出現報錯：

/usr/bin/env: node: No such file or directory

此時能夠從系統PATH中是否有node這個文件路徑、某些版本的NodeJS是否名爲node等方向來排查問題。

NodeJS相關：好用的命令行工具

在NodeJS目前已經成爲前端工做流的主力語言的狀況下， babel和webpack基本已經成爲前端開發、測試、發佈上的重要工具。同時圍繞babel和webpack有一系列周邊的工具包和插件協助開發者完成平常開發的方方面面。

同時，目前最爲流行的前端框架Angular、react、vue（以首字母爲序），各自有自帶的腳手架和開發輔助工具。如ng-cli、create-react-app和vue-cli等等。更有Poi這樣的通吃React和Vue的腳手架工具。

上面這部分每個均可以獨立出來單獨講解。有興趣的讀者能夠參考上述工具的官方網站獲取更多信息。

下面來講幾個其餘方面的NodeJS相關的軟件包。

多版本共存 n/nvm

大多數狀況，咱們只需面對單一的NodeJS版本。等到時機成熟，再統一把NodeJS版本升級到更高版本。

不過筆者就曾經遇到過一個年久失修失修的項目須要從新維護的狀況。此時須要把NodeJS版本切到老版本。同時，咱們也不想捨棄大多數項目運行的新版本NodeJS環境。

這種狀況可使用n或nvm。下圖展現了，用n下載並切換到一個新版本的過程。

除了下載以外，n還提供了列表的方式切換多個版本，以及刪除某個版本的方法。讀者能夠在安裝以後使用n -h查看全部可用參數。

n採用bash編寫。但提供了一個npm倉庫安裝的入口，可使用你們傳統意義的npm安裝法進行全局安裝，前提是你必須有一個能夠運行的NodeJS環境。

npm install -g n

或者在沒有NodeJS的環境下，可使用n-install腳本。安裝只需運行：curl -L https://git.io/n-install | bash。

若是是windows用戶，在windows10下面能夠安裝wsl來得到Linux腳本運行環境，官方倉庫的一個issues，對此有一個操做說明。

對windows10如下的用戶，能夠考慮折騰下Cygwin。

除了n以外，還有一個管理工具爲nvm，也是採用bash腳本編寫。安裝亦可以使用安裝腳原本完成。如：curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash 或 wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash。這裏的v0.34.0是版本號，可能會隨着版本迭代而變化。

使用windows的讀者，除了上述wsl和Cygwin以外，能夠考慮使用nvm-windows這個用Golang編寫的版本。

就目前的最新版原本說，n和nvm的都會嘗試處理公共的依賴庫，然而處理方式是不同的。

n和nvm都會在首次使用某個版本時將此版本的NodeJS下載至本地，不一樣的是：n將嘗試用新版本代替系統路徑中，關鍵路徑如bin、lib、include、share的包。nvm則是保留每個版本的副本，並將NodeJS的系統路徑指向.nvm維護的沙箱地址。

從處理上，nvm顯得更輕量和高效，可是須要修改系統的PATH，這一步nvm腳本會自動完成。n則無需入侵系統路徑，但每次修改時候均需操做系統路徑，且此時最好使用sudo n運行，避免因權限不足，拒絕向系統路徑複製。

因爲nvm會修改PATH地址，因此若是同時默認安裝nvm和n，n會運轉不正常。一種方案是避免同時安裝，另外能夠手動修改PATH，使默認的NodeJS路徑先於nvm的系統路徑，如修改PATH片斷爲：

/usr/local/bin:/Users/leon/.nvm/versions/node/v10.6.0/bin:

執行輔助 nodemon/npx

nodemon是一個執行器，意義在於，若是版本變化或者程序變化，無需從新啓動。這在開發時候很是有用。

nodemon還能夠指定運行的端口，如：

nodemon ./server.js localhost 8080

除了控制NodeJS包以外，nodemon還能夠控制非NodeJS腳本，好比：nodemon --exec "python -v" ./app.py，將監控app.py的內容，並在最開始以及發生變化時候，調用python -v進行解析。固然，若是你的app.py指定了shebang，也能夠不需指定解析函數。

nodemon有不少靈活的配置，經過這些配置，能夠實現環境變量設置、延遲啓動、命令執行、監控定製擴展名、優雅重啓、事件監聽等功能。作法是在須要這些配置的目錄下，提供相關的配置nodemon.json，也能夠在package.json中經過nodemonConfig字段指明。

這裏是官方提供的一份配置文件的樣例，供讀者參考。

再來講說npx。什麼是npx呢？簡單說，就是找到並運行一個包，而且「用完即走」。

這裏有兩層意思：

1. 找到。從哪裏找：先是當前的依賴，而後是PATH，還找不到就到網上找來安裝。
2. 用完即走。即便從網上安裝的，運行完就會刪掉，不會留下運行的包。 讀者能夠試着運行下：npx github:piuccio/cowsay "awesome npx"體驗下。

這實在是居家旅行、開發調試的利器。好比我要在當前目錄下開一個http服務，能夠直接運行：npx http-server

以後就能夠直接在瀏覽器訪問這個地址進行調試了。

另外，若是你須要臨時用一個老版本的node來運行某個腳本，也能夠祭出npx，這個node會被臨時安裝、臨時使用、用完即走。

npx -p node@6 npm init

切換NodeJS註冊表 nrm/yrm

nrm/yrm維護了一個列表，包括npm主站和其餘鏡像。可使用nrm/yrm use 快速切換，以達到最快的下載速度。nrm維護的是npm的註冊表，yrm維護的是yarn註冊表。

輔助編寫NodeJS包

除了直接用大神們寫好的命令以外，咱們也能夠按照本身的需求定製本身須要的NodeJS包。咱們知道，命令行其實也是一種人機交互，所以，交互上有不少能夠借鑑的效果。編寫者只需將包倒入就可使用這些交互效果。這裏筆者給你們推薦幾個包

命令行參數讀取 commander

命令行的一個特色就是根據參數的不一樣調整運行策略。然而處理命令行輸入以及驗證是一個很是繁瑣的事情。爲此，TJ大神曾經創立了commander包。最基礎的用法以下：

var program = require('commander');

program
  .version('0.1.0')
  .option('-p, --peppers', 'Add peppers')
  .option('-P, --pineapple', 'Add pineapple')
  .option('-b, --bbq-sauce', 'Add bbq sauce')
  .option('-c, --cheese [type]', 'Add the specified type of cheese [marble]', 'marble')
  .parse(process.argv);

console.log('you ordered a pizza with:');
if (program.peppers) console.log(' - peppers');
if (program.pineapple) console.log(' - pineapple');
if (program.bbqSauce) console.log(' - bbq');
console.log(' - %s cheese', program.cheese);

複製代碼

默認地，commander會自動建立-h的幫助文件，即利用每個option的輸入產生幫助文案。

用戶的每個輸入，都會放置在program對應option長名的字段的駝峯形式上，若是沒有提供長名，則放在短名字段上。上例中，如使用： testcommander -p 111 -P 222 -b 333則依次存儲在program的peppers、pineapple和bbqSauce上。

同時，commander提供多種驗證方式，如正則表達式：

program.option('-s --size <size>', 'Pizza size', /^(large|medium|small)$/i, 'medium')

則指定只能輸入特定的值。

同時，commander提供一個方案，容許用戶設置子命令。commander稱之爲Git風格的子命令。

var program = require('commander');

program
  .version('0.1.0')
  .command('install [name]', 'install one or more packages')
  .command('search [query]', 'search with optional query')
  .command('list', 'list packages installed', {isDefault: true})
  .parse(process.argv);

複製代碼

這個例子中，假設命令行名字爲pm，則當用戶輸入pm-install、pm-search或pm-list時候，commander會嘗試在入口文件的同一級目錄找到install、search或list，並交給這個文件去執行。

進度條 progress

在編寫web程序時候，你們常常會展現一個進度條。用以緩解用戶在等待時候的焦慮。其實在命令行程序中也會有這種交互方式。好比wget就會在下載過程當中給出進度提示。

在NodeJS中也有這樣的效果可使用。這就是progress包。下面的代碼，運行結果是下載CentOS安裝盤。在下載之中，會實時打印進度

const ProgressBar = require("progress")
const request = require("request")
const progress = require("request-progress")
const fs = require("fs")

const download = (url, headers, target, totalSize) => {
    let percent = 0

    const bar = new ProgressBar('下載中: ├:bar┤ 完成:percent 預估完成時間:eta秒 用時:elapseds', {
        total: 100,
        complete: "█",
        incomplete: "─",
        width: 60
    })

    let opt = {
        headers,
        url: url
    }

    return new Promise((resolve, reject) => {
        progress(request.get(opt))
            .on('progress', function (state) {
                let progressFix = ((state.percent) * 100).toFixed(2)
                delta = progressFix - percent
                bar.tick(delta)
                percent = progressFix
            })
            .on("error", () => {
                return reject()
            })
            .on('end',  () => {
                bar.tick(100 - percent)
                console.log('\n')
                return resolve(target)
            })
            .pipe(fs.createWriteStream(target));
    })
}

const foo = {
    getHeaders: () => {
        const headers = {
            'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
            'Accept-Charset': 'UTF-8,*;q=0.5',
            'Accept-Encoding': 'gzip,deflate,sdch',
            'Accept-Language': 'en-US,en;q=0.8',
            'User-Agent': 'Mozilla/5.0 (X11; Linux x86_64; rv:13.0) Gecko/20100101 Firefox/13.0'
        }

        return Object.assign({}, headers)
    },

    download: function (url, target, totalSize){
        let headers = this.getHeaders()
        headers = Object.assign(headers)

        download(url, headers, target, totalSize)
    }
}


foo.download("http://mirrors.cmich.edu/centos/7.6.1810/isos/x86_64/CentOS-7-x86_64-DVD-1810.iso",
    "CentOS-7-x86_64-DVD-1810.iso", 4508876.8
    )

複製代碼

運行的結果如圖：

這個包的核心就是根據內置和自定義的token在命令行打印出相應的字符，用以完成交互。

交互着色 chalk

chalk是一個命令行交互的着色工具。在命令行支持的狀況下，能夠支持最多16位色域（前提是命令行終端能夠支持）。通常能夠配合console.log使用，如：

const chalk = require('chalk');
const log = console.log;

// Combine styled and normal strings
log(chalk.blue('Hello') + ' World' + chalk.red('!'));
複製代碼

筆者曾經作過一個在命令行下顯示圖片的程序，就是利用的chalk和console.log進行的配合。

交互式問答 inquirer

在須要不斷的同用戶進行交互式問答，並根據用戶的輸入進行驗證和路徑選擇，這個時候inquirer是很是趁手的工具。它內置了單選、多選、問答等多種交互方式。你們能夠感覺下：

甚至能夠經過插件實現suggest

vue框架的腳手架vue-cli是一個使用inquire的絕佳案例，讀者能夠經過閱讀源碼，感覺下大神出神入化的使用。

小圖標 ora

ora打印出一個優雅的文本小圖標，用於在各類狀況下給出用戶優雅而清晰的提示。用法很簡單：

const ora = require('ora');

const spinner = ora('Loading unicorns').start();

setTimeout(() => {
	spinner.color = 'yellow';
	spinner.text = 'Loading rainbows';
}, 1000);
複製代碼

命令行玩瀏覽器 puppeteer

puppeteer是谷歌開發的無頭瀏覽器，使得命令行亦可操做瀏覽器，並能根據瀏覽器的執行結果進行進一步操控。由於puppeteer源自官方，因此以前相似項目PhantomJS的開發者決定再也不更新PhantomJS。

目前puppeteer已經普遍用於前端測試，端對端測試，以及爬蟲。

鑑於篇幅沒法展開介紹，讀者能夠參考其官方文檔。同時，奇舞週刊中黃小璐老師的的這篇文章以及李光釗老師的這篇文章都曾經介紹過puppeteer的使用。

發佈NodeJS包

寫好的NodeJS包須要發佈出去，才能給你們使用。npm publish就是爲了這個需求而產生的。爲了發佈你須要在npm上註冊用戶，並登陸，而後發佈就行了。npm的詳情頁面以及各個鏡像會在一段時間內自動更新。

若是你的NodeJS包，是使用還沒有普遍支持的語法寫成的。那麼須要在package.json的script字段加入prepublish命令，調用babel等預編譯器處理，使得程序能夠有更多的兼容性。

對於但願用戶在全局使用的命令，要注意在根目錄寫好入口，通常是在package.json中的bin字段，指定入口文件。在安裝時，若是是全局安裝，npm將會使用符號連接把這些文件連接到prefix/bin，若是是本地安裝，會連接到./node_modules/.bin/。

除了一般的包，還有一種是帶有scope的包，vue-cli的3.0版本就是@vue開頭的。這個scope是組織的名字。每個帶有scope的包有公有和私有之分，私有的須要付費給npm。

目前npm的讀寫權限策略以下：

若是是我的，能夠考慮增長公有的命名空間。若是是企業付費用戶，你在發佈相關包以前，須要申請成爲這個scope的member。

對公有scope，首先將包的name改成@scope名字/包名，同時，在發佈時，使用npm publish --access public便可。

小結

本文簡述了命令行的意義和優點，介紹瞭解釋型命令行的運行機制，同時介紹了幾個NodeJS相關的命令行工具，推薦了幾款撰寫命令行程序經常使用的包，最後，概述了發佈包和使用scope的發佈狀況。但願給你們的NodeJS命令行相關開發和技術選型，提供一些有用的幫助。

關於奇舞週刊

《奇舞週刊》是360公司專業前端團隊「奇舞團」運營的前端技術社區。關注公衆號後，直接發送連接到後臺便可給咱們投稿。