告別重復勞動：2024年學會用Node.js一鍵搞定CLI工具
在2024年，隨著技術的不斷發展和迭代，Node.js作為一個事件驅動且擁有豐富npm生態統的JavaScript運行環境，已經成為開發高效、可擴展命令行界面（CLI）工具的首選技術。這不僅僅因為其強大的性能，更因為它提供了大量專門設計來支持CLI開發的包和工具。那么，為什么我們要開發CLI工具呢？簡單來說，CLI工具能夠幫助我們自動化繁瑣的任務，為開發者創建實用工具，以及與系統交互和管理工作流程。
例如，我們可以創建了幾個提供巨大價值的CLI工具：一個管理CI/CD流程中動態管道的CLI，它消除了手動配置的需要和流程之間的等待時間；一個設置和管理本地docker化開發環境的CLI；以及一個運行預定義遷移步驟的CLI。這些工具極大地提高了我們的工作效率和流程的自動化程度。
現在，我將向你展示如何輕松構建自己的CLI工具。我們將從命令處理和用戶提示開始，一步一步深入到提升用戶體驗，以及如何組織項目結構和文檔編寫。這個過程不僅僅是編碼，更是一次深入理解Node.js強大功能的旅程。
從零開始：打造你的Node.js命令行工具
接下來，我將引導你通過幾個簡單的步驟，從零開始打造一個屬于自己的Node.js CLI工具。
準備工作
首先，確保你的電腦上已經安裝了Node.js。這是所有后續步驟的基礎。
第一步：初始化你的項目
創建一個新的文件夾來承載你的項目，并進入這個文件夾：
mkdir my-node-cli
cd my-node-cli然后，啟動一個新的Node.js項目：
npm init按照提示完成項目的初始化。這一步會創建一個package.json文件，為你的項目記錄重要的元數據和依賴關系。
第二步：引入Commander.js
Commander.js是我們構建Node.js CLI工具的神器，它就像一個瑞士軍刀，幫助我們解析輸入、生成幫助文本和管理錯誤。
npm install commander通過這一步，你將Commander.js添加到了項目依賴中。
第三步：打造CLI
在項目文件夾中創建一個名為index.js的文件，這將是我們CLI工具的起點。
#!/usr/bin/env node
import { program } from "commander";
program
.version('1.0.0')
.description('My Node CLI')
.option('-n, --name <type>', 'Add your name')
.action((options) => {
console.log(`Hey, ${options.name}!`);
});
program.parse(process.argv);這段代碼定義了一個基礎的CLI，它接受一個名字作為參數，并打印出一條歡迎信息。
接下來，修改你的package.json來識別CLI命令，并設置為使用ES模塊：
"bin": {
"my-node-cli": "./index.js"
},
"type": "module"通過全局鏈接你的項目：
npm link這樣，my-node-cli就可以在終端上運行了！
my-node-cli --name YourName
值得一提的是，從Node.js 18.3版本開始，Node.js內置了命令行參數解析器。你可以考慮閱讀相關文檔，決定是否使用它來代替Commander.js。
https://nodejs.org/api/util.html#utilparseargsconfig
讓你的CLI工具色彩斑斕
當你的命令行工具（CLI）在終端中運行時，使用色彩可以極大地提升用戶體驗，使得輸出信息更加生動和易于區分。Chalk庫正是為此而生，它能夠讓你輕松地在CLI的輸出中添加色彩。接下來，我將向你展示如何使用Chalk來美化你的Node.js CLI工具的輸出。
引入Chalk
首先，你需要將Chalk添加到你的項目中：
npm install chalk這一步會將Chalk作為依賴安裝到你的項目中。
改進問候消息
接下來，讓我們用色彩改進CLI的問候消息。通過簡單的修改，我們可以讓問候語變得更加友好和多彩：
#!/usr/bin/env node
import { program } from "commander";
import chalk from "chalk";
program
.version('1.0.0')
.description('My Node CLI')
.option('-n, --name <type>', 'Add your name')
.action((options) => {
console.log(chalk.blue(`Hey, ${options.name}!`)); // 藍色問候
console.log(chalk.green(`Welcome to the CLI world, ${options.name}!`)); // 綠色歡迎
console.log(chalk.red(`It's great to have you here, ${options.name}!`)); // 紅色歡迎
});
program.parse(process.argv);在這段代碼中，我們使用了Chalk的blue、green和red方法來分別以藍色、綠色和紅色輸出不同的問候語。這不僅使得CLI的交互更加多彩，也提高了用戶體驗，使得用戶能夠在使用過程中感受到更多的樂趣和參與感。
體驗提升
通過這樣的改進，你的CLI工具不僅功能強大，而且在視覺上也更加吸引人。色彩的使用可以幫助用戶更好地理解CLI工具的輸出，尤其是在輸出復雜或多個信息時，不同的顏色可以幫助區分和強調重要的部分。
讓你的CLI交互更加友好：探索Inquirer.js
在構建命令行工具（CLI）時，與用戶的互動是一個非常重要的環節。為了提高交互性并提升用戶體驗，Inquirer.js提供了一套簡單而強大的API來收集用戶輸入。通過使用Inquirer.js，你可以輕松地實現各種類型的用戶提示，從而使你的CLI工具更加人性化和友好。
引入Inquirer.js
首先，我們需要將Inquirer.js添加到項目中：
npm install inquirer這一步驟會把Inquirer.js作為依賴安裝到你的項目里。
實現交互式提示
接下來，讓我們通過Inquirer.js來實現一個簡單的交互式提示。這里的目標是通過用戶輸入來收集用戶的名字，而不是通過命令行選項：
#!/usr/bin/env node
import { program } from "commander";
import chalk from "chalk";
import inquirer from "inquirer";
program.version('1.0.0').description('My Node CLI');
program.action(() => {
inquirer.prompt([
{
type: 'input',
name: 'name',
message: "What's your name?",
}
]).then((answers) => {
console.log(chalk.green(`Hey there, ${answers.name}!`));
});
});
program.parse(process.argv);
在這段代碼中，我們使用了Inquirer.js的prompt方法來顯示一個輸入類型的提示，詢問用戶的名字。用戶的回答將被用來顯示一條個性化的歡迎信息。
探索更多的提示類型
- Inquirer.js還提供了多種其他類型的提示，包括：
- Confirm：向用戶提出一個是/否問題。
- List：允許用戶從列表中選擇一個選項。
- Checkbox：允許用戶通過復選框選擇多個選項。
- Password：讓用戶輸入密碼，輸入時不會顯示字符。
- Rawlist和Expand：提供了更多的選擇列表樣式。
這些豐富的提示類型讓你可以根據需要設計更加復雜和多樣化的用戶交互，以適應不同的場景和需求。
你可以在Inquirer.js的GitHub頁面上探索更多關于這個庫的信息，包括它提供的所有提示類型和使用方法。
讓等待變得有趣：使用ora添加加載動畫
在開發命令行工具（CLI）時，處理一些耗時的操作是不可避免的。無論是調用外部API、執行文件操作還是其他任何可能需要一些時間來完成的任務，向用戶提供反饋是非常重要的。這不僅可以提升用戶體驗，還可以避免用戶對程序是否還在運行感到疑惑。ora是一個非常棒的庫，它允許你在CLI中添加旋轉器動畫，使等待時間變得有趣。
引入ora
首先，我們需要將ora添加到你的項目中：
npm install ora通過這一步，ora將作為依賴被安裝到你的項目里。
實現加載動畫
接下來，讓我們在CLI中實現一個加載動畫。這里的目的是在執行一個可能需要一些時間的操作時顯示一個旋轉器動畫，以向用戶表明程序正在忙碌：
#!/usr/bin/env node
import { program } from "commander";
import chalk from "chalk";
import inquirer from "inquirer";
import ora from "ora";
program.version('1.0.0').description('My Node CLI');
program.action(() => {
inquirer.prompt([
{
type: 'list',
name: 'choice',
message: 'Choose an option:',
choices: ['Option 1', 'Option 2', 'Option 3'],
}
]).then((result) => {
const spinner = ora(`Doing ${result.choice}...`).start(); // 啟動旋轉器動畫
setTimeout(() => {
spinner.succeed(chalk.green("Done!")); // 3秒后完成，顯示成功消息
}, 3000);
});
});
program.parse(process.argv);在這段代碼中，我們使用了ora來創建一個旋轉器實例，并在用戶選擇一個選項后啟動它。setTimeout僅僅是用來模擬一個耗時的操作，3秒后我們通過調用spinner.succeed方法停止旋轉器并顯示一條成功的消息。
提升用戶體驗
通過在CLI中加入ora的加載動畫，你不僅能提升用戶體驗，還能以一種優雅和友好的方式向用戶展示程序的狀態。這種視覺反饋是非常重要的，它能讓用戶知道程序正在正常工作，即使在后臺執行一些復雜或耗時的任務時也是如此。
記得探索ora的其他功能，比如自定義旋轉器的樣式、顏色和文本，這樣你可以創建一個與你的CLI工具風格相匹配的加載動畫。
用ASCII藝術美化你的CLI
在命令行界面（CLI）工具中添加ASCII藝術是一個絕妙的方式，可以在用戶使用你的工具時給他們留下深刻的第一印象。figlet.js是一個強大的庫，它允許你在CLI中生成各種風格的ASCII藝術文字。通過使用figlet.js和chalk庫，你可以以彩色的ASCII藝術形式展示你的CLI工具名稱或其他任何文字，從而增加你的CLI工具的吸引力。
引入figlet.js
首先，你需要將figlet.js添加到你的項目中：
npm install figlet這一步會把figlet.js作為依賴安裝到你的項目里。
在CLI中展示ASCII藝術
接下來，讓我們將ASCII藝術添加到你的index.js文件中，以展示你CLI工具的名稱：
import figlet from "figlet";
import chalk from "chalk";
console.log(
chalk.yellow(figlet.textSync("My Node CLI", { horizontalLayout: "full" }))
);這段代碼使用了figlet的textSync方法來生成“My Node CLI”這個文本的ASCII藝術表示，并通過chalk.yellow將其設置為黃色，從而在程序開始時以一種醒目和創意的方式歡迎用戶。
自定義ASCII藝術
figlet.js提供了多種字體和自定義選項，允許你根據你的CLI工具的美學需求來定制ASCII藝術。你可以通過查看figlet.js的文檔來了解所有可用的字體和定制選項，從而創建出完全符合你想象的藝術作品。
通過簡單的幾步，你就可以在你的CLI工具中添加有趣而富有表現力的ASCII藝術，使你的工具在眾多CLI中脫穎而出。這種視覺元素不僅能夠增強用戶體驗，還能在用戶心中留下持久的印象。
構建高效的項目結構
隨著你的Node.js命令行界面（CLI）工具項目的發展，保持代碼的組織性變得尤為重要。一個清晰、合理的項目結構不僅能夠幫助你更快地定位和解決問題，還能在團隊協作時減少混亂。下面是一個簡單而有效的項目結構示例，適用于開始一個新的CLI工具項目：
my-node-cli/
├─ bin/
│ └─ index.js
├─ src/
│ ├─ commands/
│ ├─ utils/
│ └─ lib/
├─ package.json
└─ README.md項目結構解析
- bin/: 這個目錄包含你的CLI入口文件。當用戶運行你的CLI工具時，這里的腳本會被首先執行。
- src/: 所有的源代碼都應該放在這個目錄下。這有助于將你的應用程序邏輯與入口點分開，使項目更加模塊化。commands/: 用于存放各個命令文件。將命令分離到不同的文件中，可以使添加新命令或編輯現有命令更加清晰和簡單。utils/: 如果你的CLI工具中有一些跨命令使用的實用函數，比如數據格式化，它們應該放在這個目錄下。lib/: 對于需要與API交互或執行復雜邏輯的核心功能，可以放在這個目錄中。這有助于保持代碼的清晰和可維護性。
項目文檔
- package.json: Node.js項目的心臟，存儲了項目的元數據、依賴關系以及腳本命令等。
- README.md: 項目的README文件是向新用戶介紹你的項目、說明如何安裝和使用CLI工具、以及如何貢獻的理想場所。
保持靈活性和擴展性
隨著項目的成長，你可能需要添加更多的目錄和文件來滿足新的需求。例如，如果你的項目開始包含測試，你可能會添加一個test/目錄。關鍵是保持項目結構的邏輯性和清晰性，使得其他開發者（或未來的你）能夠輕松地理解和維護代碼。
采用這樣的項目結構，你的CLI工具項目不僅能夠保持有序，還能夠隨著項目的擴展保持高效和可維護性。記住，一個好的開始是成功的一半。通過從一開始就建立一個清晰的項目結構，你將為你的項目打下堅實的基礎。
編寫清晰的文檔
在開發Node.js命令行界面（CLI）工具時，擁有一份清晰、詳細的文檔是至關重要的。良好的文檔不僅能幫助用戶快速上手使用你的工具，還能減少因誤解或缺乏信息而產生的問題。下面是如何為你的CLI工具編寫一個有效的README.md文件的指南。
# My Node CLI
My Node CLI is a tool for doing awesome things directly from your terminal.
## Installation
```bash
npm install -g my-node-cli
```
## Usage
To start using My Node CLI, run:
```bash
my-node-cli - help
```
### Commands
- `my-node-cli - name YourName`: Greets you by your name.
- `my-node-cli option1`: Executes option 1.
For more detailed information on commands, run `my-node-cli --help`.
## Contributing
Contributions are welcome ...
## License
This project is licensed ...自動生成文檔
考慮使用像JSDoc或TypeDoc這樣的工具，它們可以根據你的代碼注釋自動生成詳細的文檔。
/**
* 通過姓名問候用戶的函數。
* @param {string} name 用戶的名字。
*/
const greet = (name) => {
console.log(`Hello, ${name}!`);
};通過以上步驟，你可以為你的Node.js CLI工具創建一份清晰、有用的文檔。記得隨著你的項目發展，定期更新文檔，以確保它反映了最新的功能和用法。良好的文檔是提升用戶體驗的重要一環，能夠顯著增加你的項目的可用性和吸引力。
最后，分享一個開源項目進行練習和實踐
在你開始著手實際的命令行界面（CLI）邏輯之前，我強烈建議你參考Liran Tal的這個倉庫。這個倉庫收獲了超過3000顆星，涵蓋了我能想到的以及更多的最佳實踐。
倉庫鏈接：
nodejs-cli-apps-best-practices
https://github.com/lirantal/nodejs-cli-apps-best-practices
例如，為了避免用戶在每次調用命令時重復提供相同的信息，你可以提供一個有狀態的體驗。使用conf這樣的庫來保存像用戶名、電子郵件或API令牌這樣的數據，就可以優化用戶的體驗。
以下是一些可能會在該倉庫中找到的最佳實踐：
- 結構化項目文件夾：保持代碼的組織性，如將命令、實用工具、庫函數和其他配置分別放在不同的文件夾中。
- 使用.env文件或類似機制來管理敏感配置：例如API密鑰或數據庫憑證，不應直接硬編碼在代碼中。
- 編寫單元測試：確保你的CLI工具的每個部分都通過自動化測試，以防止未來的更改破壞現有功能。
- 持續集成（CI）：設置CI流程，以自動運行測試和其他檢查，確保代碼的質量。
- 文檔化：為你的CLI工具編寫清晰的README.md文件，包括安裝指南、使用方式、命令列表以及如何貢獻。
- 優化命令行輸出：使用像chalk、ora或figlet這樣的庫來增強CLI的用戶體驗。
- 處理異常和錯誤：合理處理可能發生的錯誤，并向用戶提供有用的反饋。
- 發布和版本控制：使用semver進行版本控制，并適當地標記你的GitHub發布。
這些最佳實踐將幫助你構建一個健壯、可維護且用戶友好的CLI工具。記得定期回顧和更新你的實踐，以保持與時俱進。
