從淺入深講解 Node 如何開發(fā)一個命令行工具
最近山月開發(fā)了一個從任意 URL 解析內(nèi)容并生成 markdown 的小客戶端工具: markdown-read。用以我個人公眾號的內(nèi)容獲取及一些優(yōu)質(zhì)內(nèi)容的整理收藏，歡迎 Star、下載及使用。
- $ markdown https://juejin.cn/post/6924258563862822919 | head -10
- > 本文作者：Wind、Skyler、ZRJ、ZJ
- ## 前言
- Webpack5 在 2020 年 10 月 10 日正式發(fā)布，并且在過去的幾個月中快速演進(jìn)和迭代，截止 1 月 28 日，Webpack5 已經(jīng)更新了 18 個 minor 版本，帶來了許多十分吸引人的新特性。據(jù)[官網(wǎng)介紹](https://webpack.js.org/blog/2020-10-10-webpack-5-release/#general-direction "官網(wǎng)介紹")，Webpack5 整體的方向性變化有以下幾點(diǎn)：
- 
- + 通過持久化硬盤緩存能力來提升構(gòu)建性能
- + 通過更好的算法來改進(jìn)長期緩存（降低產(chǎn)物資源的緩存失效率）
想到用 Node 開發(fā)一個命令行工具在工作中也較為常見，也很有意思，總結(jié)一下
命令行工具
什么是命令行工具?
最初印象大致是 ls，pwd 這些能夠在終端執(zhí)行的系統(tǒng)命令，這樣的命令有很多，數(shù)不勝數(shù)，被稱為系統(tǒng)內(nèi)置命令。如果使用 which 查看他們的來歷，則能夠發(fā)現(xiàn)他們的廬山真面目:
- $ which pwd
- pwd: shell built-in command
隨著對 Linux/Unix 系統(tǒng)理解及使用的逐漸加深，發(fā)現(xiàn)了諸多的非內(nèi)置命令:
- top
- ps
- netstat
- dig
- man
使用 which 偵查情況，發(fā)現(xiàn)他們實(shí)際執(zhí)行的路徑在某一個 bin 目錄
- $ which top
- /usr/bin/top
- $ which ps
- /bin/ps
而這些 bin 目錄在環(huán)境變量 PATH 中，豁然開朗。簡而言之: 在 PATH 中路徑的命令可在其它任意地方執(zhí)行。
- export PATH=$HOME/bin:/usr/local/bin:$PATH
你好像想起點(diǎn)什么?在大學(xué)配置 Java 時被環(huán)境變量支配的各種恐懼?是了，所有語言的可執(zhí)行命令都要放在 PATH 下，只不過其它語言自動給你做了，而 Java 讓你自己做這件事。
- java
- python
- pip
- node
- npm
開發(fā)命令行的原理也是如此，而本篇文章的目標(biāo)就是:
使用 Javascript 這門前端開發(fā)者熟悉的語言，借助 Node 環(huán)境，開發(fā)一個命令行工具。
原理
先看兩個命令行工具: serve 一個流行的靜態(tài)文件服務(wù)器，markdown 一個我自己寫的解析 URL 到 markdow 的命令行。通過命令解析出他們指向的符號鏈接
- $ ls -lah $(which serve)
- lrwxr-xr-x 1 xiange admin 65B 7 12 2020 /usr/local/bin/serve -> ../../../Users/shanyue/.config/yarn/global/node_modules/.bin/serve
- $ ls -lah $(which markdown)
- lrwxr-xr-x 1 xiange admin 48B 1 28 20:06 /usr/local/bin/markdown -> ../lib/node_modules/markdown-read/md-read-cli.js
從中可以看出他們關(guān)于命令行的解析:
- npm 全局下載 Package 到 /usr/local/lib/node_modules 下 (yarn 同理)
- 根據(jù) package.json 中 bin 選項(xiàng)的指示，對應(yīng)的二進(jìn)制腳本掛載到 PATH 路徑
- 對應(yīng)的二進(jìn)制腳本添加 x 權(quán)限 (可執(zhí)行文件權(quán)限)
簡而言之，Node 環(huán)境下的命令行工具，借助的原理無非是環(huán)境變量 Path 與一個符號鏈接
從 package.json 說起
在 package.json 中的 bin 選項(xiàng)，用以指定最終的命令行工具的名字
- {
- "bin": {
- "markdown": "./md-read-cli"
- }
- }
如上所示，markdown 是最終在終端執(zhí)行的命令，而 ./md-read-cli 是該命令實(shí)際執(zhí)行的文件。
對于最終可執(zhí)行的命令行工具，Node 項(xiàng)目一般傾向置文件于 bin 目錄下，如以下 Typescript 的配置:
- {
- "bin": {
- "tsc": "./bin/tsc",
- "tsserver": "./bin/tsserver"
- },
- }
一個執(zhí)行環(huán)境
對于可直接執(zhí)行的文件，需要指明執(zhí)行環(huán)境，首行添加一行說明:
- #!/usr/bin/env node
- // code 往下寫
這一句話是啥子意思了?
- #! 后接解釋器，標(biāo)明該文件使用 /usr/bin/env node 來執(zhí)行
- /usr/bin/env 為 env 的絕對路徑，用以在 PATH 路徑中執(zhí)行命令 (在各種不同的系統(tǒng)中，node 命令行的位置不同，因此使用 env node 找到路徑并執(zhí)行)
- env node 在人為層面可理解為執(zhí)行 node 命令
所以這句話的意思是: 使用 node 執(zhí)行這個腳本
- // 不寫 #!/usr/bin/env node
- $ node serve .
- // 寫上 #!/usr/bin/env node
- $ serve .
解析命令輸入
- $ node cmd.js 1 2 3
- // Output: [
- // '/usr/local/bin/node',
- // '/Users/shanyue/cmd.js',
- // '1',
- // '2',
- // '3',
- // ]
- process.argv
根據(jù)解析 process.argv 來獲取各式各樣的參數(shù)作為命令行的輸入，當(dāng)然解析參數(shù)也要參照基本規(guī)律: 格式、可選、必選、簡寫、說明、幫助等等。命令行工具命名協(xié)議 文章中已說的足夠詳細(xì)。
- // 一個較為規(guī)整的命令行幫助
- $ node --help
- Usage: node [options] [ script.js ] [arguments]
- node inspect [options] [ script.js | host:port ] [arguments]
- Options:
- - script read from stdin (default if no file name is provided,
- interactive mode if a tty)
- -- indicate the end of node options
- --abort-on-uncaught-exception aborting instead of exiting causes a core file to be generated for
- analysis
- -c, --check syntax check script without executing
- --completion-bash print source-able bash completion script
- --cpu-prof Start the V8 CPU profiler on start up, and write the CPU profile to
- disk before exit. If --cpu-prof-dir is not specified, write the profile
- to the current working directory.
以此衍生出了關(guān)于解析命令參數(shù)的多個庫，在實(shí)際工作中就直接用吧!
- yargs: Star 8.5K，周下載量 4900K
- commander: Star 19.7K，周下載量 5300K，tj 大神的作品
使用 commander 解析不同的輸入指令
- const { program } = require('commander')
- // 解析不同的指令輸入
- program
- .option('-d, --debug', 'output extra debugging')
- .option('-s, --small', 'small pizza size')
- .option('-p, --pizza-type <type>', 'flavour of pizza')
- program.parse(process.argv)
- const options = program.opts()
- console.log(options)
豐富的色彩體驗(yàn)
Next 構(gòu)建輸出
目前大部分終端已支持彩色輸出，豐富的高亮色彩如同代碼高亮一樣使用戶可以快速抓住重點(diǎn)。把異常、警告、成功的信息用不同的顏色標(biāo)出，命令行工具的輸出一目了然。在現(xiàn)代構(gòu)建工具，如 Webpack 下，也大都支持彩色輸出。
以下是在命令行工具中常用的兩個色彩庫，支持多種多樣色彩的輸出。
- chalk
- colors
以下是 chalk 示例，Error 與 Warning 信息用不同的顏色表示
- const chalk = require('chalk')
- const error = chalk.bold.red
- const warning = chalk.keyword('orange')
- console.log(error('Error!'))
- console.log(warning('Warning!'))
發(fā)布與安裝
在辛苦努力寫完一個 cli 工具后，就是檢驗(yàn)成果的時候。發(fā)布到 npm 倉庫，可使所有人使用你的命令行工具，這也是最重要的一步
- # 發(fā)布之前需要 npm login，登錄到 npm registory
- $ npm publish
發(fā)版成功后全局下載命令行工具，開始使用，示例用它抓取下我的博客首頁
- $ npm i -g markdown-read
- /usr/local/bin/markdown -> /usr/local/lib/node_modules/markdown-read/md-read-cli.js
- + markdown-read@1.1.0
- added 102 packages from 72 contributors and updated 10 packages in 33.15s
- $ markdown https://shanyue.tech
- ## [#](#山月的瑣碎博客記錄) 山月的瑣碎博客記錄
- 本博客關(guān)于平常工作中在前端，后端以及運(yùn)維中遇到問題的一些文章總結(jié)。以后也會做系列文章進(jìn)行輸出，如前端高級進(jìn)階系列，個人服務(wù)器指南系列。個人微信 shanyue94，歡迎添加交流
- ## [#](#名字由來) 名字由來
總結(jié)
本篇文章由淺至深講解了以下幾方面的內(nèi)容:
- 一個全局可執(zhí)行的命令行工具的原理是什么
- 在 Node 中開發(fā)一個命令行工具所需要的配置
- 開發(fā)命令行工具時如何解析參數(shù)
并根據(jù)實(shí)踐，開發(fā)了一個從 URL 中讀取 Markdown 的小工具: markdown-read，歡迎 Star、下載及使用。
另外，我基于此命令行做了一個 Web 版，歡迎來體驗(yàn): https://devtool.tech/html-md
本文轉(zhuǎn)載自微信公眾號「全棧成長之路」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系全棧成長之路公眾號。
