Node CLI 開發調試技巧總結

原文地址：github.com/younth/blog…

最近這段時間一直在折騰各類Node CLI，把我的的一些開發，調試技巧分享給你們～

通常狀況下，一套CLI工具集合，包括CLI運行核心模塊及各類插件體系。拿 webpack 來講，其由核心模塊 webpack 及各類 loader plugin 組成其強大的構建生態體系。

單一NPM包的調試

npm link 到本地進行開發調試

• 先進入模塊目錄執行 npm link
• 再去項目目錄經過包名來 link npm link my-plugin
• 刪除link: npm unlink my-plugin

npm link 的原理其實就是創建軟鏈接，省去了本身創建軟鏈的麻煩了

單一的npm包，調試方法比較多，vscode node-debug 或者 chrome devtool 調試node 均可以。若是是vscode ，launch.json 裏面能夠配置 env 與 args 也比較方便。單一模塊開發推薦這種方式。

{
    "type": "node",
    "request": "launch",
    "name": "Launch Program",
    "program": "${workspaceRoot}/bin/def.js",
    "args": [
        "-v"
    ],
    "env": {
        "DEF_CORE_PATH": "/Users/younth/node-cli/def/node-cli"
    }
}
複製代碼

入口CLI的開發調試

入口cli模塊通常是在 package.json 裏面申明的：

"bin": {
    "webpack": "./bin/webpack.js"
}
複製代碼

bin 字段主要用於npm i -g時候能夠將腳本添加到可執行路徑中，以後能夠在命令行中直接執行。例如npm i -g webpack後就能夠全局使用webpack命令。

一樣的咱們在 CLI 的項目目錄下執行 npm link 將 webpack 放入全局，這樣後面咱們就能夠在命令行中直接使用了。對於CLI模塊的調試仍然可使用單一模塊調試方法。

可是當 webpack 再去調用 loader 或者 plugin 的時候，咱們想完整的調試整個過程，就不太方便了。嘗試過用 node --debug 去啓動 CLI 下面的 bin/webpack ，而後在調試具體執行模塊，感受開發起來很彆扭，體驗很差。並且若是是模塊是經過child\_process.spawn 執行的，那真就沒啥辦法了。最終選擇了以日誌的形式進行開發調試。

提及日誌，最簡單的就是 console.log 調試了，但問題也很明顯：

• 模塊自己須要輸出一些信息，須要作到debug信息在正常啓動模式下是不顯示的
• 涉及模塊愈來愈多的時候，console 輸出的信息會多而亂。這樣增長了調試的複雜度，迫切須要 進行分模塊塊打印日誌調試

咱們引入了 debug 模塊。使用也很是方便，一般咱們只須要給每一個模塊指定特定的__命名空間__便可：

// app.js
var debug = require('debug')('app');

// 運行 DEBUG=app node app.js
// 輸出：app hello
debug('hello');
debug('this is %s', string);
debug('this is %o', obj);
複製代碼

使用的時候，能夠傳參，自定義格式：

• %s: string
• %o: object

debug 同時支持命名空間：

• DEBUG=app,api：表示同時打印出命名空間爲app、api的調試日誌。
• DEBUG=a\*：支持通配符，全部命名空間爲a開頭的調試日誌都打印出來。

關於守護程序(daemon)模塊的調試

在開發Node Cli的過程當中，咱們常常須要執行一些 後臺程序 , 好比 檢測CLI及模塊的版本更新狀況，其本質就是利用 child\_process.spawn 以守護進程的方式執行一個js文件。咱們能夠經過設定 spawn 的 stdout 參數來將輸出指向某個文件。

const fs = require('fs-extra');
let stdout = fs.openSync(path.join(__dirname, 'check_out.log'), 'w')
let stderr = fs.openSync(path.join(__dirname, 'check_error.log'), 'w')
const p = child_process.spawn(
  'node', ['check.js', 'a', 'b'],
  {
    'stdio': ['ignore', stdout, stderr],
    'detached': true   // 讓子進程能在父進程退出後繼續運行
  }
);
複製代碼

如上述代碼所示，在 check.js 裏面進行 console.log 或者 debug 的，將會在 check\_out.log 裏面看到結果。

正式環境的日誌顯示

以上都是開發時候的調試，在發佈以後，有時候咱們也須要一些信息輸出給用戶。咱們常常用 --verbose 查看詳細的運行狀況。對於正式環境的錯誤提示，信息輸出等，咱們把日誌級別分爲：

• verbose：詳細日誌，通常是經過 --verbose 參數查看
• info：平常的輸出
• warn：警告日誌
• error：錯誤日誌
• debug:  這裏不須要了，由於debug已經單獨拿出來用 debug模塊進行輸出

能夠考慮用原生util模塊，這裏推薦使用 npmlog ，功能也比較完善。

// additional stuff ---------------------------+
// message ----------+ |
// prefix ----+ | |
// level -+ | | |
// v v v v
    log.info('[core]', 'node version is : %j', nodeVersion)
複製代碼

其餘小技巧

有時候咱們也想讓本身的CLI輸出各類酷炫的效果，這裏也把本身使用的模塊分享給你們：

• CLI各類顏色輸出：colors 、chalk
• CLI輸出表格：cli-table  easy-table
• CLI emoji 輸出：node-emoji
• 持續更新...

最近也在梳理前端工程化的全鏈路開發的解決方案，看了業界不少工具，慢慢融化貫通後再嘗試分享。