有感而發
最近，在和前端小伙伴聊天發現，在2024年，她們都有打算入局Rust學習的行列。畢竟前端現在太卷了，框架算是走到「窮途末路」了，無非就是在原有基礎上修修補補。所有他們想在新的賽道彎道超車。但是，苦于各種原因，遲遲找不到入門之法。
確實如她們所言，Rust由于學習路徑比較陡峭，加之和前端語言可以說是交集很少。然后，給大家一種學了馬上就會忘記的感覺。并且，由于現在Rust在前端領域的應用少之又少。除了字節跳動的Rspack，還有Vivo的Vivo Blue OS(我們在國貨之光？用Rust編寫的Vivo Blue OS有過介紹),就很少聽說其他國內互聯網公司有相關的產品和應用。
相比國外，我們的道路還任重而道遠。像國外很多耳熟能詳的公司都早已布局Rust開發。最明顯的就是Photoshop,它已經將只能在桌面運行的PS搬入了瀏覽器上。(這個我們也在之前的師夷長技以制夷:跟著PS學前端技術中有過相關介紹)
不過，從最新的招聘網站中搜索Rust相關崗位，相比前幾年有了很好的改觀。并且很多崗位都和前端相關。這說明，Rust在國內已經有了自己的市場，也意味著在前端領域也有了一席之地。那么作為職業前端，不想在紅海中繼續卷，那勢必就需要選擇藍海，方可在千軍萬馬之中，殺出一條光明之路。
其實，像我在學習Rust也遇到很她們一樣的困境。知識點看了，也理解了。但是隔斷時間就會忘記。周而復始，就會對這門語言產生一種抗拒感。畢竟，編程也算是一種技術工種，唯手熟爾。
后面，我就轉變思路，那就是動手做一些自己認為可以解決前端痛點的事。哪怕做這個事情，其他語言也可以勝任，但是為什么我們不做更進一步的嘗試呢。現階段，Rust在前端賦能的場景，大部分都是提高編譯效率方向。像Rspack[1]/OXC[2]。
既然，大方向已經定了，然后就有了我們新的嘗試。從那開始，就有了我們下面的嘗試方向
- Rust 開發命令行工具（上）
- Rust 開發命令行工具（中）
- Rust 編譯為 WebAssembly 在前端項目中使用
- Game = Rust + WebAssembly + 瀏覽器
- Rust 賦能前端-開發一款屬于你的前端腳手架
就是基于上面的不斷試錯和嘗試，到現在我們已經有了像f_cli[3]的npm包，并且已經部署到公司私庫，并投入生產開發了。
同時，在最近的項目開發中，還利用Rust編寫WebAssembly進行前端功能的處理。這塊等有機會寫一篇相關的文章。
前言
耽誤了大家幾分鐘的時間，在上面絮叨了半天，其實就是想傳達一個思想。Rust其實不可怕，可怕的是學了但是你沒用到工作中。就是想著法都要讓它貼切工作，應用于工作。
我們回到正題，其實Rust賦能前端這個方向我也在摸索，然后現階段自我感覺能用到前端項目中的無非就兩點
- 寫一個腳手架，將一些繁瑣操作工具化
- 寫wasm模塊，嵌入到前端邏輯中
大家不管是從哪個方面獲取Rust知識點，想必大家嘗試的第一個Rust應用就是Cli了。
那我們今天就來聊聊在Rust開發Cli時的神器 -clap[4]。
今天，我們只要是講相關的概念，針對如何用Rust構建一個CLI，可以翻看我們之前的文章。
好了，天不早了，干點正事哇。
我們能所學到的知識點
- 項目初始化
- 編寫子命令
- 添加命令標志
- 交互式cli
- 其他有用的庫
1. 項目初始化
首先，讓我們通過運行以下命令來初始化我們的項目：cargo init clap_demo。隨后我們再配置一下項目的基礎信息。(description等)
[package]
name = "clap_demo"
version = "0.1.0"
edition = "2021"
description = "front789帶你學習clap"
我們可以通過運行以下命令將 clap 添加到我們的程序中：
cargo add clap -F derive
這樣在Cargo.toml中的[dependencies]中就有了相關的信息。
[dependencies]
clap = { version = "4.5.1", features = ["derive"] }
其中-F表示，我們只需要clap中的derive特性。
圖片
上述流程中，我們使用的clap的版本是最新版，有些和大家用過的語法有區別的話，需要大家甄別。
這里多說一嘴，如果對前端開發熟悉的同學是不是感覺到上述流程很熟悉。當我們創建一個前端項目時，是不是會遇到下面的步驟。
npm init
yarn add xx
項目實現
和前端開發類似，當我們把包下載到本地后，我們就需要在對應的入口文件中引入并執行。在前端開發中我們一般挑選的是項目根目錄下的index.js。而對于Rust項目來講，它的入口文件是src/mAIn.rs。（作為二進制項目(Binary Projects)而言）
use clap::Parser;
#[derive(Parser)]
#[command(version, about)]
struct Cli {
name: String
}
fn main() {
let cli = Cli::parse();
println!("Hello, {}!", cli.name);
}
我們來簡單解釋一下上面的代碼。
在前端開發中我們一般使用import/require進行第三方庫的引入，而在Rust中我們使用use來導入第三方庫clap中的Parser trait。也就是說，通過use xx我們就可以使用clap中的特定功能。也就是把對應的功能引入到該作用域內。
定義了一個結構體，它使用 clap::Parser 的 derive 宏和command宏，并且只接受一個參數，即 name。
#[derive(Parser)]/#[command(version, about)]不是Rust內置的宏,它們是由clap庫自定義的過程宏(procedural macros)。
Rust有兩種類型的宏:
- 聲明式宏(Declarative Macros):
這些是Rust內置的,使用macro_rules定義,例如vec!、println!等。
它們主要用于元編程(metaprogramming),在編譯期執行代碼生成。
- 過程宏(Procedural Macros):
-
這些是由外部crate定義的,在編譯期間像函數一樣被調用。
-
它們可以用來實現自定義的代碼生成、lint檢查、trait派生,解析、操作和生成 AST等操作。
#[derive(Parser)]它使用 derive 屬性來自動為 Cli 結構體實現 Parser trait。這意味著 Cli 結構體將獲得解析命令行參數的功能,而無需手動實現 Parser trait。
圖片
#[command(version, about)]用于配置命令行應用程序的元數據。
- version: 設置應用程序的版本信息。
- about: 設置應用程序的簡短描述。這里的信息就是我們在Cargo.toml中配置的description的信息。
最后，我們可以通過cargo run -- --help來查看對應的信息。
圖片
總的來說,這段代碼使用 clap 庫定義了一個命令行應用程序,它接受一個名為 name 的字符串參數。當運行這個應用程序時,它會打印出 "Hello, {name}"。#[derive(Parser)] 和 #[command(...)] 這兩個屬性分別用于自動實現 Parser trait 和配置應用程序的元數據。
當我們加載程序并使用 Cli::parse() 時，它將從 std::env::args 中獲取參數(這個概念我們之前在環境變量：熟悉的陌生人有過介紹)。
- 如果你嘗試運行 cargo run front789，它應該會打印出 Hello, front789!
- 但如果嘗試不添加任何額外值運行它，它將打印出幫助菜單。Clap 在默認特性中包含了一個幫助功能，當輸入的命令無效時會自動顯示幫助菜單。
當然，如果想讓我們的程序更加健壯，我們可以給name設定一個默認值，這樣在沒有提供參數的情況下，也能合理運行。
#[derive(Parser,Debug)]
#[command(version, about)]
struct Cli {
#[arg(default_value = "front789")]
name: String
}
現在，嘗試僅使用 cargo run 而不添加其他任何東西，它應該會打印出 Hello, front789!。
圖片
當然，我們也可以像在f_cli中一樣為參數添加更多的配置，來增強我們的Cli。
圖片
如果想了解更多關于參數配置，可以翻看clap_command-attributes[5]
圖片
2. 編寫子命令
作為一個功能強大的CLI，我們有時候需要通過定義一些子命令來讓我們的目的更加明確。
如果大家用過我們的f_cli，那就心領神會了。
下圖是我們f_cli的根據用戶提供的參數，默認構建前端項目的命令。
圖片
在f_cli的實現中，我們就用到了子命令的操作。
圖片
下面我們來簡單實現一個擁有子命令的cli。在之前代碼的基礎上，我們只需要將剛才結構體中再新增一個參數 - command并且其類型為實現sumcommad trait的枚舉
use clap::{ Parser, Subcommand };
#[derive(Parser,Debug)]
#[command(version, about)]
struct Cli {
#[arg(default_value = "front789")]
name: String,
#[command(subcommand)]
command: Commands
}
#[derive(Subcommand, Debug, Clone)]
enum Commands {
Create,
Replace,
Update,
Delete
}
fn main() {
let cli = Cli::parse();
println!("Hello, {:?}!", cli);
}
這樣，我們就在上面的基礎上擁有了一組子命令(CRUD)。這樣我們就可以在cli中調用對應的子命令然后執行對應的操作了。
圖片
3. 添加命令標志
我們可以繼續豐富我們子命令。上面的我們不是通過一個枚舉Commands夠了一個組件命令(Create/Replace/Update/Delete)嗎。
有時候，在某一個子命令下，還需要收集更多的用戶選擇。那么我們就可以將枚舉中的值關聯成一個「匿名結構體」。這樣，我們就可以針對某個子命令做更深的操作了。
還是舉我們之前的f_cli的例子，在我們通過f_cli create xxx構建項目時，我們可以通過-x來像CLI傳遞Create所用到的必要信息。
圖片
use clap::{ Parser, Subcommand };
#[derive(Parser,Debug)]
#[command(version, about)]
struct Cli {
#[arg(default_value = "front789")]
name: String,
#[command(subcommand)]
command: Commands
}
#[derive(Subcommand, Debug, Clone)]
enum Commands {
Create{
#[arg(default_value = "front789")]
name: String,
#[arg(default_value = "山西")]
address: String,
},
Replace,
Update,
Delete
}
這樣我們就對Create進一步處理，并且在create的時候，它會從命令行中尋找對應的name/address信息，并且收集到clap實例中。
隨后，我們就可以在主函數中通過match來匹配枚舉信息，然后執行相對應的操作。
Rust 中的匹配是窮舉式的：必須窮舉到最后的可能性來使代碼有效
為了節約代碼量，我們通過_占位符來處理其他的邏輯。
fn main() {
let cli = Cli::parse();
match cli.command {
Commands::Create{name,address} => {
println!("我是{},來自:{}", name,address);
},
_=>(),
}
}
當我們運行cargo run create時，由于我們提供了默認值，在控制臺就會輸出對應的信息。當然，我們也可以通過-- name xx -- address xx來進行操作。
有人會覺得輸入較長的子命令不是很友好，我們可以通過short = 'n'來為子命令提供一個別名。同時我們還可以通過help="xxx"設置對應在--help時，提供給用戶的幫助信息。
圖片
對應的代碼如下：
#[derive(Subcommand, Debug, Clone)]
enum Commands {
Create{
#[arg(
short = 'n',
lnotallow="name",
help = "用戶信息",
default_value = "front789"
)]
name: String,
#[arg(
short = 'a',
lnotallow="address",
help = "地址信息",
requires = "name",
default_value = "山西"
)]
address: String,
},
Replace,
Update,
Delete
}
4. 交互式cli
在上一節中我們通過對CLI枚舉進行改造，讓其能夠擁有了子命令的功能。其實到這步已經能夠獲取到cli中用戶輸入的值，并且能夠進行下一步的操作了。
但是呢，你是一個精益求精的人。見多識廣的你突然有一個想法，為什么不能像vite/create/next一樣。在觸發對應的構建和更新操作后，有一個「人機交互」的過程。然后，用戶可以根據自己的喜好來選擇我們cli的內置功能。這樣是不是顯的更加友好。
像我們的f_cli就是這種交互流程。用戶通過人機交互的方式可以選擇內置功能。
圖片
f_cli 選擇UI庫
那我們就再次用一個簡單的例子來介紹一下哇。
安裝新的包
首先，我們需要安裝幾個用于交互的包。
cargo add anyhow
cargo add dialoguer
cargo add console
隨后，就他們就會自動被注入到Cargo.toml中了。關于anyhow/dialoguer/console我們就不在這里過多介紹了。大家感興趣可以去對應的官網查找.
- dialoguer[6]
- console[7]
- anyhow[8]
現在，我們需要在src/main.rs中引入相關的功能，同時我們在處理cli變量的時候，用的是枚舉值，所以我們需要引入clap中針對這類的操作。
use clap::{
+ builder::EnumValueParser,
Parser,
Subcommand,
+ ValueEnum
};
+use dialoguer::{
+ console::Term,
+ theme::ColorfulTheme,
+ Select
+};
+use console::style;
新增枚舉信息
前面說過，我們想通過人機交互的方式，在cli運行過程中讓用戶自己選擇我們內置的功能點。所以，這些內置功能我們可以需要事先設定好。
#[derive(Clone, Copy, Debug, PartialEq, Eq, ValueEnum)]
pub enum Name {
N1,
N2,
}
#[derive(Clone, Copy, Debug, PartialEq, Eq, ValueEnum)]
pub enum Address {
A1,
A2
}
處理結構體中參數的默認值
既然，已經有了對應的默認值，那么我們就需要限制我們cli中的參數必須是這些內置參數中值。
#[derive(Subcommand, Debug, Clone)]
enum Commands {
Create{
#[arg(
short = 'n',
lnotallow="name",
help = "用戶信息",
+ value_parser = EnumValueParser::<Name>::new(),
ignore_case = true
)]
+ name: Option<Name>,
#[arg(
short = 'a',
lnotallow="address",
help = "地址信息",
requires = "name",
+ value_parser = EnumValueParser::<Address>::new(),
)]
+ address: Option<Address>,
}
}
上面的配置，見名知意，就是從對應的枚舉中解析對應的值。
主函數
其實，這步的操作和之前是差不多的，我們還是利用match對cli.command進行匹配處理。不過我們這里又進一步的做了容錯處理。
- 首先判斷是否提供子命令
- 在提供子命令的情況下，再判斷是否是Craete
因為，在進行操作中我們會有錯誤拋出，所以我們對main的返回值也做了處理。(anyhow::Result<()>)
fn main() ->anyhow::Result<()> {
let cli = Cli::parse();
match cli.command {
// - 如果有子命令，則根據子命令執行相應的邏輯；
Some(command) => {
match command {
Commands::Create {
name,
address,
} =>
operation_params(
name,
address
)?,
}
},
_ => panic!("Fatal: cli為提供參數，退出處理."),
}
Ok(())
}
operation_params
在main中我們通過match是可以獲取到cli中參數的，而此時我們還需要根據參數做進一步的處理。我們把這個邏輯提取到了一個函數中了。
fn operation_params (
name: Option<Name>,
address: Option<Address>
) -> anyhow::Result<()> {
let n = match name {
Some(na) => na,
None => {
multiselect_msg("選擇一個姓名:");
message("使用上/下箭頭進行選擇，使用空格或回車鍵確認。");
let items = vec!["張三", "王五"];
let selection = Select::with_theme(&ColorfulTheme::default())
.items(&items)
.default(0)
.interact_on_opt(&Term::stderr())?;
match selection {
Some(0) => Name::N1,
Some(1) => Name::N2,
_ => panic!("Fatal: 用戶信息制定錯誤."),
}
}
};
let a = match address {
Some(na) => na,
None => {
multiselect_msg("選擇一個地址:");
message("使用上/下箭頭進行選擇，使用空格或回車鍵確認。");
let items = vec!["太原", "晉中"];
let selection = Select::with_theme(&ColorfulTheme::default())
.items(&items)
.default(0)
.interact_on_opt(&Term::stderr())?;
match selection {
Some(0) => Address::A1,
Some(1) => Address::A2,
_ => panic!("Fatal: 地址信息制定錯誤."),
}
}
};
println!("name:{:?},地址:{:?}",n,a);
Ok(())
}
其實上面的邏輯也是比較簡單明了的。 我們接收cli中的參數name/address。因為他們都是枚舉類型，所以我們繼續用match進行對應值的匹配。
雖然，我們對兩個枚舉值都做了處理，但是他們的邏輯都是相同的。
上面的邏輯就是當我們運行子命令時候
- 當提供對應的參數的話，那就原封不動的返回對應的值
- 當沒有提供對應的參數的話，我們就調用dialoguer::Select進行我們預設值的選擇。
圖片
這樣，不管我們上面那種情況，我們最后都可以拿到對應的值。這樣我們方便我們后期進行其他操作。
5. 其他有用的庫
上面我們通過幾個例子，講了很多clap的應用例子，其中我們還配合dialoguer進行人機交互的處理。如果我們想實現功能更加強大的cli我們還可以借助其他的工具。下面我們就來簡單介紹幾種。
Crossterm
crossterm[9] 是一款跨終端的crate。 它具有各種很酷的功能，如能夠更改背景和文本顏色、操作終端本身和光標，以及捕獲鍵盤和其他事件。
圖片
comfy-table
comfy-table[10] 是一個設計用于在終端中創建漂亮表格的 crate。
以下是其官網的案例。用僅僅幾句話就可以實現一個在終端展示的表格。
use comfy_table::Table;
fn main() {
let mut table = Table::new();
table
.set_header(vec!["Header1", "Header2", "Header3"])
.add_row(vec![
"This is a text",
"This is another text",
"This is the third text",
])
.add_row(vec![
"This is another text",
"Nownadd somenmulti line stuff",
"This is awesome",
]);
println!("{table}");
}
執行后的效果如下：
+----------------------+----------------------+------------------------+
| Header1 | Header2 | Header3 |
+======================================================================+
| This is a text | This is another text | This is the third text |
|----------------------+----------------------+------------------------|
| This is another text | Now | This is awesome |
| | add some | |
| | multi line stuff | |
+----------------------+----------------------+------------------------+
inquire
inquire[11] 是一個用于構建終端上交互式提示的 crate。它支持單選、多選、選擇日歷等功能：
下面的動圖是其官網的案例。其中最吸引我的就是那個多選。哈哈。
圖片
