Rust 寫腳手架，Clap你應該知道的二三事

作者：前端柒八九 2024-03-11 13:18:00

和前端開發(fā)類似，當我們把包下載到本地后，我們就需要在對應的入口文件中引入并執(zhí)行。在前端開發(fā)中我們一般挑選的是項目根目錄下的index.js。而對于Rust項目來講，它的入口文件是src/main.rs。

有感而發(fā)

最近，在和前端小伙伴聊天發(fā)現(xiàn)，在2024年，她們都有打算入局Rust學習的行列。畢竟前端現(xiàn)在太卷了，框架算是走到「窮途末路」了，無非就是在原有基礎上修修補補。所有他們想在新的賽道彎道超車。但是，苦于各種原因，遲遲找不到入門之法。

確實如她們所言，Rust由于學習路徑比較陡峭，加之和前端語言可以說是交集很少。然后，給大家一種學了馬上就會忘記的感覺。并且，由于現(xiàn)在Rust在前端領域的應用少之又少。除了字節(jié)跳動的Rspack，還有Vivo的Vivo Blue OS(我們在國貨之光？用Rust編寫的Vivo Blue OS有過介紹),就很少聽說其他國內互聯(lián)網公司有相關的產品和應用。

相比國外，我們的道路還任重而道遠。像國外很多耳熟能詳?shù)墓径荚缫巡季諶ust開發(fā)。最明顯的就是PhotoShop,它已經將只能在桌面運行的PS搬入了瀏覽器上。(這個我們也在之前的師夷長技以制夷:跟著PS學前端技術中有過相關介紹)

不過，從最新的招聘網站中搜索Rust相關崗位，相比前幾年有了很好的改觀。并且很多崗位都和前端相關。這說明，Rust在國內已經有了自己的市場，也意味著在前端領域也有了一席之地。那么作為職業(yè)前端，不想在紅海中繼續(xù)卷，那勢必就需要選擇藍海，方可在千軍萬馬之中，殺出一條光明之路。

其實，像我在學習Rust也遇到很她們一樣的困境。知識點看了，也理解了。但是隔斷時間就會忘記。周而復始，就會對這門語言產生一種抗拒感。畢竟，編程也算是一種技術工種，唯手熟爾。

后面，我就轉變思路，那就是動手做一些自己認為可以解決前端痛點的事。哪怕做這個事情，其他語言也可以勝任，但是為什么我們不做更進一步的嘗試呢。現(xiàn)階段，Rust在前端賦能的場景，大部分都是提高編譯效率方向。像Rspack[1]/OXC[2]。

既然，大方向已經定了，然后就有了我們新的嘗試。從那開始，就有了我們下面的嘗試方向

Rust 開發(fā)命令行工具（上）
Rust 開發(fā)命令行工具（中）
Rust 編譯為 WebAssembly 在前端項目中使用
Game = Rust + WebAssembly + 瀏覽器
Rust 賦能前端-開發(fā)一款屬于你的前端腳手架

就是基于上面的不斷試錯和嘗試，到現(xiàn)在我們已經有了像f_cli[3]的npm包，并且已經部署到公司私庫，并投入生產開發(fā)了。

同時，在最近的項目開發(fā)中，還利用Rust編寫WebAssembly進行前端功能的處理。這塊等有機會寫一篇相關的文章。

前言

耽誤了大家?guī)追昼姷臅r間，在上面絮叨了半天，其實就是想傳達一個思想。Rust其實不可怕，可怕的是學了但是你沒用到工作中。就是想著法都要讓它貼切工作，應用于工作。

我們回到正題，其實Rust賦能前端這個方向我也在摸索，然后現(xiàn)階段自我感覺能用到前端項目中的無非就兩點

寫一個腳手架，將一些繁瑣操作工具化
寫wasm模塊，嵌入到前端邏輯中

大家不管是從哪個方面獲取Rust知識點，想必大家嘗試的第一個Rust應用就是Cli了。

那我們今天就來聊聊在Rust開發(fā)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的版本是最新版，有些和大家用過的語法有區(qū)別的話，需要大家甄別。

這里多說一嘴，如果對前端開發(fā)熟悉的同學是不是感覺到上述流程很熟悉。當我們創(chuàng)建一個前端項目時，是不是會遇到下面的步驟。

npm init 
yarn add xx

項目實現(xiàn)

和前端開發(fā)類似，當我們把包下載到本地后，我們就需要在對應的入口文件中引入并執(zhí)行。在前端開發(fā)中我們一般挑選的是項目根目錄下的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);
}

我們來簡單解釋一下上面的代碼。

在前端開發(fā)中我們一般使用import/require進行第三方庫的引入，而在Rust中我們使用use來導入第三方庫clap中的Parser trait。也就是說，通過use xx我們就可以使用clap中的特定功能。也就是把對應的功能引入到該作用域內。

定義了一個結構體，它使用 clap::Parser 的 derive 宏和command宏，并且只接受一個參數(shù)，即 name。

#[derive(Parser)]/#[command(version, about)]不是Rust內置的宏,它們是由clap庫自定義的過程宏(procedural macros)。

Rust有兩種類型的宏:

聲明式宏(Declarative Macros):

這些是Rust內置的,使用macro_rules定義,例如vec!、println!等。

它們主要用于元編程(metaprogramming),在編譯期執(zhí)行代碼生成。

過程宏(Procedural Macros):

這些是由外部crate定義的,在編譯期間像函數(shù)一樣被調用。
它們可以用來實現(xiàn)自定義的代碼生成、lint檢查、trait派生,解析、操作和生成 AST等操作。

#[derive(Parser)]它使用 derive 屬性來自動為 Cli 結構體實現(xiàn) Parser trait。這意味著 Cli 結構體將獲得解析命令行參數(shù)的功能,而無需手動實現(xiàn) Parser trait。

圖片

#[command(version, about)]用于配置命令行應用程序的元數(shù)據。

version: 設置應用程序的版本信息。
about: 設置應用程序的簡短描述。這里的信息就是我們在Cargo.toml中配置的description的信息。

最后，我們可以通過cargo run -- --help來查看對應的信息。

圖片

總的來說,這段代碼使用 clap 庫定義了一個命令行應用程序,它接受一個名為 name 的字符串參數(shù)。當運行這個應用程序時,它會打印出 "Hello, {name}"。#[derive(Parser)] 和 #[command(...)] 這兩個屬性分別用于自動實現(xiàn) Parser trait 和配置應用程序的元數(shù)據。

當我們加載程序并使用 Cli::parse() 時，它將從 std::env::args 中獲取參數(shù)(這個概念我們之前在環(huán)境變量：熟悉的陌生人有過介紹)。

如果你嘗試運行 cargo run front789，它應該會打印出 Hello, front789!
但如果嘗試不添加任何額外值運行它，它將打印出幫助菜單。Clap 在默認特性中包含了一個幫助功能，當輸入的命令無效時會自動顯示幫助菜單。

當然，如果想讓我們的程序更加健壯，我們可以給name設定一個默認值，這樣在沒有提供參數(shù)的情況下，也能合理運行。

#[derive(Parser,Debug)]
#[command(version, about)]
struct Cli {
    #[arg(default_value = "front789")]
    name: String
}

現(xiàn)在，嘗試僅使用 cargo run 而不添加其他任何東西，它應該會打印出 Hello, front789!。

圖片

當然，我們也可以像在f_cli中一樣為參數(shù)添加更多的配置，來增強我們的Cli。

圖片

如果想了解更多關于參數(shù)配置，可以翻看clap_command-attributes[5]

圖片

2. 編寫子命令

作為一個功能強大的CLI，我們有時候需要通過定義一些子命令來讓我們的目的更加明確。

如果大家用過我們的f_cli，那就心領神會了。

下圖是我們f_cli的根據用戶提供的參數(shù)，默認構建前端項目的命令。

圖片

在f_cli的實現(xiàn)中，我們就用到了子命令的操作。

圖片

下面我們來簡單實現(xiàn)一個擁有子命令的cli。在之前代碼的基礎上，我們只需要將剛才結構體中再新增一個參數(shù) - command并且其類型為實現(xiàn)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中調用對應的子命令然后執(zhí)行對應的操作了。

圖片

3. 添加命令標志

我們可以繼續(xù)豐富我們子命令。上面的我們不是通過一個枚舉Commands夠了一個組件命令(Create/Replace/Update/Delete)嗎。

有時候，在某一個子命令下，還需要收集更多的用戶選擇。那么我們就可以將枚舉中的值關聯(lián)成一個「匿名結構體」。這樣，我們就可以針對某個子命令做更深的操作了。

還是舉我們之前的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實例中。

隨后，我們就可以在主函數(shù)中通過match來匹配枚舉信息，然后執(zhí)行相對應的操作。

Rust 中的匹配是窮舉式的：必須窮舉到最后的可能性來使代碼有效

為了節(jié)約代碼量，我們通過_占位符來處理其他的邏輯。

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

在上一節(jié)中我們通過對CLI枚舉進行改造，讓其能夠擁有了子命令的功能。其實到這步已經能夠獲取到cli中用戶輸入的值，并且能夠進行下一步的操作了。

但是呢，你是一個精益求精的人。見多識廣的你突然有一個想法，為什么不能像vite/create/next一樣。在觸發(fā)對應的構建和更新操作后，有一個「人機交互」的過程。然后，用戶可以根據自己的喜好來選擇我們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]

現(xiàn)在，我們需要在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
}

處理結構體中參數(shù)的默認值

既然，已經有了對應的默認值，那么我們就需要限制我們cli中的參數(shù)必須是這些內置參數(shù)中值。

#[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>,
    }
}

上面的配置，見名知意，就是從對應的枚舉中解析對應的值。

主函數(shù)

其實，這步的操作和之前是差不多的，我們還是利用match對cli.command進行匹配處理。不過我們這里又進一步的做了容錯處理。

首先判斷是否提供子命令
在提供子命令的情況下，再判斷是否是Craete

因為，在進行操作中我們會有錯誤拋出，所以我們對main的返回值也做了處理。(anyhow::Result<()>)

fn main() ->anyhow::Result<()> {
    let cli = Cli::parse();
    match cli.command {
        // - 如果有子命令，則根據子命令執(zhí)行相應的邏輯；
        Some(command) => {
            match command {
                Commands::Create {
                    name,
                    address,
                } => 
                operation_params(
                  name,
                  address
                )?,
            }
        },
         _ => panic!("Fatal: cli為提供參數(shù)，退出處理."),
    }
    Ok(())
}

operation_params

在main中我們通過match是可以獲取到cli中參數(shù)的，而此時我們還需要根據參數(shù)做進一步的處理。我們把這個邏輯提取到了一個函數(shù)中了。

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中的參數(shù)name/address。因為他們都是枚舉類型，所以我們繼續(xù)用match進行對應值的匹配。

雖然，我們對兩個枚舉值都做了處理，但是他們的邏輯都是相同的。

上面的邏輯就是當我們運行子命令時候

當提供對應的參數(shù)的話，那就原封不動的返回對應的值
當沒有提供對應的參數(shù)的話，我們就調用dialoguer::Select進行我們預設值的選擇。

圖片

這樣，不管我們上面那種情況，我們最后都可以拿到對應的值。這樣我們方便我們后期進行其他操作。

5. 其他有用的庫

上面我們通過幾個例子，講了很多clap的應用例子，其中我們還配合dialoguer進行人機交互的處理。如果我們想實現(xiàn)功能更加強大的cli我們還可以借助其他的工具。下面我們就來簡單介紹幾種。

Crossterm

crossterm[9] 是一款跨終端的crate。它具有各種很酷的功能，如能夠更改背景和文本顏色、操作終端本身和光標，以及捕獲鍵盤和其他事件。

圖片

comfy-table

comfy-table[10] 是一個設計用于在終端中創(chuàng)建漂亮表格的 crate。

以下是其官網的案例。用僅僅幾句話就可以實現(xiàn)一個在終端展示的表格。

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",
            "Now\nadd some\nmulti line stuff",
            "This is awesome",
        ]);

    println!("{table}");
}

執(zhí)行后的效果如下：

+----------------------+----------------------+------------------------+
| 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。它支持單選、多選、選擇日歷等功能：

下面的動圖是其官網的案例。其中最吸引我的就是那個多選。哈哈。

圖片

責任編輯：武曉燕來源：前端柒八九