[[379960]]

最近山月開發了一個從任意 URL 解析內容并生成 markdown 的小客戶端工具: markdown-read。用以我個人公眾號的內容獲取及一些優質內容的整理收藏，歡迎 Star、下載及使用。

$ markdown https://juejin.cn/post/6924258563862822919 | head -10 
> 本文作者：Wind、Skyler、ZRJ、ZJ 
 
## 前言 
 
Webpack5 在 2020 年 10 月 10 日正式發布，并且在過去的幾個月中快速演進和迭代，截止 1 月 28 日，Webpack5 已經更新了 18 個 minor 版本，帶來了許多十分吸引人的新特性。據[官網介紹](https://webpack.js.org/blog/2020-10-10-webpack-5-release/#general-direction "官網介紹")，Webpack5 整體的方向性變化有以下幾點： 
 
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/77ee2267bfa34ef5bf7bb29553a5035c~tplv-k3u1fbpfcp-zoom-1.image) 
 
+   通過持久化硬盤緩存能力來提升構建性能 
+   通過更好的算法來改進長期緩存（降低產物資源的緩存失效率） 

想到用 Node 開發一個命令行工具在工作中也較為常見，也很有意思，總結一下

命令行工具

什么是命令行工具?

最初印象大致是 ls，pwd 這些能夠在終端執行的系統命令，這樣的命令有很多，數不勝數，被稱為系統內置命令。如果使用 which 查看他們的來歷，則能夠發現他們的廬山真面目:

$ which pwd 
pwd: shell built-in command 

隨著對 Linux/Unix 系統理解及使用的逐漸加深，發現了諸多的非內置命令:

• top
• ps
• netstat
• dig
• man

使用 which 偵查情況，發現他們實際執行的路徑在某一個 bin 目錄

$ which top 
/usr/bin/top 
 
$ which ps 
/bin/ps 

而這些 bin 目錄在環境變量 PATH 中，豁然開朗。簡而言之: 在 PATH 中路徑的命令可在其它任意地方執行。

export PATH=$HOME/bin:/usr/local/bin:$PATH 

你好像想起點什么?在大學配置 Java 時被環境變量支配的各種恐懼?是了，所有語言的可執行命令都要放在 PATH 下，只不過其它語言自動給你做了，而 Java 讓你自己做這件事。

• java
• python
• pip
• node
• npm

開發命令行的原理也是如此，而本篇文章的目標就是:

使用 Javascript 這門前端開發者熟悉的語言，借助 Node 環境，開發一個命令行工具。

原理

先看兩個命令行工具: serve 一個流行的靜態文件服務器，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 

從中可以看出他們關于命令行的解析:

1. npm 全局下載 Package 到 /usr/local/lib/node_modules 下 (yarn 同理)
2. 根據 package.json 中 bin 選項的指示，對應的二進制腳本掛載到 PATH 路徑
3. 對應的二進制腳本添加 x 權限 (可執行文件權限)

簡而言之，Node 環境下的命令行工具，借助的原理無非是環境變量 Path 與一個符號鏈接

從 package.json 說起

在 package.json 中的 bin 選項，用以指定最終的命令行工具的名字

{ 
  "bin": { 
    "markdown": "./md-read-cli" 
  } 
} 

如上所示，markdown 是最終在終端執行的命令，而 ./md-read-cli 是該命令實際執行的文件。

對于最終可執行的命令行工具，Node 項目一般傾向置文件于 bin 目錄下，如以下 Typescript 的配置:

{ 
  "bin": { 
    "tsc": "./bin/tsc", 
    "tsserver": "./bin/tsserver" 
  }, 
} 

一個執行環境

對于可直接執行的文件，需要指明執行環境，首行添加一行說明:

#!/usr/bin/env node 
 
// code 往下寫 

這一句話是啥子意思了?

1. #! 后接解釋器，標明該文件使用 /usr/bin/env node 來執行
2. /usr/bin/env 為 env 的絕對路徑，用以在 PATH 路徑中執行命令 (在各種不同的系統中，node 命令行的位置不同，因此使用 env node 找到路徑并執行)
3. env node 在人為層面可理解為執行 node 命令

所以這句話的意思是: 使用 node 執行這個腳本

// 不寫 #!/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 

根據解析 process.argv 來獲取各式各樣的參數作為命令行的輸入，當然解析參數也要參照基本規律: 格式、可選、必選、簡寫、說明、幫助等等。命令行工具命名協議 文章中已說的足夠詳細。

// 一個較為規整的命令行幫助 
$ 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. 

以此衍生出了關于解析命令參數的多個庫，在實際工作中就直接用吧!

• 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) 

豐富的色彩體驗

Next 構建輸出

目前大部分終端已支持彩色輸出，豐富的高亮色彩如同代碼高亮一樣使用戶可以快速抓住重點。把異常、警告、成功的信息用不同的顏色標出，命令行工具的輸出一目了然。在現代構建工具，如 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!')) 

發布與安裝

在辛苦努力寫完一個 cli 工具后，就是檢驗成果的時候。發布到 npm 倉庫，可使所有人使用你的命令行工具，這也是最重要的一步

# 發布之前需要 npm login，登錄到 npm registory 
$ npm publish 

發版成功后全局下載命令行工具，開始使用，示例用它抓取下我的博客首頁

$ 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 
## [#](#山月的瑣碎博客記錄) 山月的瑣碎博客記錄 
 
本博客關于平常工作中在前端，后端以及運維中遇到問題的一些文章總結。以后也會做系列文章進行輸出，如前端高級進階系列，個人服務器指南系列。個人微信 shanyue94，歡迎添加交流 
 
## [#](#名字由來) 名字由來 

總結

本篇文章由淺至深講解了以下幾方面的內容:

1. 一個全局可執行的命令行工具的原理是什么
2. 在 Node 中開發一個命令行工具所需要的配置
3. 開發命令行工具時如何解析參數

并根據實踐，開發了一個從 URL 中讀取 Markdown 的小工具: markdown-read，歡迎 Star、下載及使用。

另外，我基于此命令行做了一個 Web 版，歡迎來體驗: https://devtool.tech/html-md

本文轉載自微信公眾號「全棧成長之路」，可以通過以下二維碼關注。轉載本文請聯系全棧成長之路公眾號。