Rust賦能前端：給我0.02秒，生成一套Vite/Rsbuild前端項目
1. 迎新
相比上一個版本，我們主要有幾個新的變化。
新增特性
對Rsbuild的支持
很早就開始關注到Rsbuild[2]的功能。在不久之前，他們將版本信息更新到1.0。在觀望了幾天之后，發現Rsbuild在打包和開發階段有著和其他打包工具截然不同的性能優勢。所以，我們團隊，也在逐步將Vite替換為Rsbuild。
下面就直接截取它官網的內容了。
圖片
圖片
其實呢，Rsbuild在構建項目的時候，也為我們提供了很多Template。和其他工具一樣（CRA/Vue Cli/Vite）。他們只是為我們提供一個最基礎的項目。對于像一些axios/css/狀態管理都需要自己去配置。
既然，我們團隊也是對于一些新項目，要用Rsbuild。所以，這次更新cli也將Rsbuild作為一個打包選項。
體現在Rust代碼中就是下面的邏輯
let _build_tool = match build_tool {
Some(build_tool) => build_tool,
None => {
if default {
panic!("Fatal: 構建工具未指定");
}
logger::multiselect_msg("選擇一個構建工具:");
logger::message("使用上/下箭頭進行選擇，使用空格或回車鍵確認。");
let items = vec!["Vite", "Rsbuild"];
let selection = Select::with_theme(&ColorfulTheme::default())
.items(&items)
.default(0)
.interact_on_opt(&Term::stderr())?;
match selection {
Some(0) => BuildTool::Vite,
Some(1) => BuildTool::Rsbuild,
_ => panic!("Fatal: 構建工具指定失敗."),
}
}
};然后，我們在使用交互式構建項目時候，就可以選擇vite或者rsbuild作為項目的構建工具了。
圖片
通過，選擇Rsbuild作為構建工具，那么我們就會生成一個功能完備的項目。
然后，我們在之后的template-react目錄基礎上加上rusbuild-config的內容，在配合一些交互式配置就可以生成一個rsbuild+react的項目了。
下面是rusbuild-config的內容。
├── biome.json
├── index.d.ts
├── index.html
├── package.json
├── rsbuild.config.js
└── src
└── routers
└── index.tsx命令自動化
在之前的版本中，像一些
- husky的實例化，
- 項目初始化后打開編輯器
- 安裝項目依賴
這些操作都需要自己手動完成。而此次更新之后，這些操作我們都使用了std::process::Command來自動執行了。
圖片
體現在Rust代碼中，如下所示（我們拿打開Vscode為例子）
use std::process::Command;
use console::style;
use super::logger::{ self, message };
pub fn open_vscode(project_dir: &std::path::PathBuf) {
logger::command_msg("正在打開 VS Code...");
// 使用 `code` 命令打開指定的項目目錄
let status = if cfg!(target_os = "windows") {
Command::new("cmd").arg("/C").current_dir(project_dir).arg("code").arg(".").status()
} else {
Command::new("code").current_dir(project_dir).arg(".").status()
};
match status {
Ok(s) if s.success() => {
logger::command_success("VS Code 成功打開");
}
Ok(_) | Err(_) => {
logger::error("打開 VS Code 失敗");
message("確保您已安裝 VS Code，并且 `code` 命令可用");
message(
&format!(
"{}",
style("要將 `code` 命令配置到系統 PATH，請按照以下步驟操作：!").underlined()
)
);
message(" 1. 打開 VS Code");
message(" 2. 打開命令面板 (按下 `Ctrl + Shift + P`)");
message(" 3. 輸入并選擇 'Shell Command: Install 'code' command in PATH'");
message(" 4. 重啟終端，并再次運行此命令");
}
}
}其他的操作，如husky的初始化，使用yarn安裝依賴。都是類似的操作。
css解決方案和hook，變成可選
在使用cli過程中，我們發現有些功能不是很必須的，所以我們讓這些功能變成可選。
圖片
我們是用dialoguer[3]來實現這個的二次確認操作。
體現到Rust中就是如下：
let _style = match style {
Some(style) => style,
None => {
if default {
panic!("Fatal: css解決方案未指定");
}
if
Confirm::with_theme(&ColorfulTheme::default())
.with_prompt("所構建的項目是否需要CSS解決方案(tailwindcss/styled-components)?")
.interact()
.unwrap()
{
logger::multiselect_msg("選擇一個css解決方案:");
logger::message("使用上/下箭頭進行選擇，使用空格或回車鍵確認。");
let items = vec!["tailwindcss", "styled-components"];
let selection = Select::with_theme(&ColorfulTheme::default())
.items(&items)
.default(0)
.interact_on_opt(&Term::stderr())?;
match selection {
Some(0) => Style::TailwindCSS,
Some(1) => Style::StyledComponents,
_ => panic!("Fatal: css解決方案指定失敗."),
}
} else {
Style::None
}
}
};項目天然支持wasm/web worker（comlink）
我們在原始項目中，新增了wasm/worker的文件目錄，用于存放項目中可能會用到的wasm和web worker。
這些功能都是開箱即用的。我們已經在相應的構建工具（vite/rsbuild）為大家配置好了。
大家可以在下載完項目后，在home頁面進行驗證。（記得把控制臺打開）。
下面是vite.worker.config.ts中的相關配置。
import wasm from 'vite-plugin-wasm';
import topLevelAwait from 'vite-plugin-top-level-await';
import { comlink } from 'vite-plugin-comlink';
const worker = () => {
return ({
plugins: () => [wasm(), topLevelAwait(),comlink()],
})
};
export default worker;我們在配置vite時，按照功能將其分為幾大類：
├── vite.plugin.config.ts
├── vite.build.config.ts
├── vite.config.ts
├── vite.define.config.ts
├── vite.server.config.ts
├── vite.worker.config.ts引入code-inspector-plugin
我們在項目中引入了code-inspector-plugin[4]，它是一款點擊頁面上的 DOM 元素，它能自動打開 IDE 并將光標定位至 DOM 的源代碼位置
圖片
通過tsconfig.json中的配置別名
{
//...
"compilerOptions": {
"baseUrl": ".", // 解析非相對模塊的基準目錄
"paths": { // 設置路徑映射
"@/*": ["src/*"],
"@hooks/*": ["src/hooks/*"],
"@assets/*": ["src/assets/*"],
"@utils/*": ["src/utils/*"],
"@components/*": ["src/components/*"],
"@pages/*": ["src/pages/*"],
"@api/*": ["src/api/*"],
"@network/*": ["src/services/*"]
}
},
//....
}設置vscode的規范
我們在構建項目的時候，會自動生成.vscode的文件。
其中有幾點比較好玩：
- 設置explorer.fileNesting.patterns配置文件分組
{
"explorer.fileNesting.patterns": {
"tsconfig.json": "tsconfig.*.json, env.d.ts",
"package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .prettier*, prettier*, .editorconfig",
".env":".env.*",
"vite.config.ts":"vite.*.config.ts"
},
}
圖片
- 設置search.exclude限定搜索范圍。
{
"search.exclude": {
"**/node_modules": true,
"**/*.log": true,
"**/*.log*": true,
//省略部分代碼
},
}相關的配置還有files.exclude。
- 設置cSpell.words規范拼寫檢查。
{
"cSpell.words": [
"vben",
"windi",
"browserslist",
"tailwindcss",
"esnext",
"antv",
//省略部分代碼
]
}2. 辭舊
之前呢，我們在template-react中冗余了很多工具方法或者特性。
例如Sentry/Logging。
而此次的更新，我們將前端項目的結構做了精簡。
我們只保留了一個能夠直接啟動的目錄結構，其他冗余的功能，現在剔除掉了。因為有些需求對于一個項目來講不是必須品。
├── src
│ ├── App.tsx
│ ├── api
│ │ ├── config.ts
│ │ └── test.ts
│ ├── components
│ │ ├── ErrorPage
│ │ │ └── index.tsx
│ │ └── Loading
│ │ └── index.tsx
│ ├── constants
│ │ └── pages.ts
│ ├── contexts
│ │ └── global.ts
│ ├── index.css
│ ├── main.tsx
│ ├── pages
│ │ ├── Home
│ │ │ └── index.tsx
│ │ └── Login
│ │ └── index.tsx
│ ├── routers
│ │ └── index.tsx
│ ├── services
│ │ ├── ApiError.ts
│ │ └── HTTPService.ts
│ ├── style
│ │ └── global.css
│ ├── types
│ │ └── index.ts
│ ├── utils
│ │ ├── deviceDetection
│ │ │ └── index.ts
│ │ ├── envDetection
│ │ │ └── index.ts
│ │ ├── index.ts
│ │ └── storage
│ │ └── localStorage
│ │ ├── helpers.ts
│ │ └── index.ts
│ ├── wasm
│ │ └── fibonacci
│ │ ├── fibonacci_wasm.d.ts
│ │ ├── fibonacci_wasm_bg.wasm
│ │ ├── fibonacci_wasm_bg.wasm.d.ts
│ │ └── index.js
│ └── worker
│ └── fibonacciWorker.ts
├── tsconfig.json
└── yarn.lock3. 展望
其實呢，這個項目還有很多功能需要完善。
如果大家使用了會發現，我們有些的工具是限定死的。
例如，我們推崇只使用yarn來作為包管理器。使用vscode作為IDE。
這塊也是我們后期需要豐富的地方。
這里我們有一個TODO List
- 兼容pnpm/npm/yarn
- 兼容常規IDE
- 兼容更多構建工具Webpack/Vite/Rsbuild
- 兼容Vue的項目構建。
- 兼容monorepo項目的構建
針對第四/五點，其實我們已經在做這方面的努力了。
圖片
對應的我們已經構建好對于的枚舉類型- FrameworksType
#[derive(Clone, Copy, Debug, PartialEq, Eq, ValueEnum)]
pub enum FrameworksType {
React,
Vue,
}同時，在create_project函數中，已經有了對Monorepo和FrameworksType的渴望。只不過，因為有些效果還沒達到要求。這方面的需求先擱置了。我們打算把這些需求放到下一個大版本中。
圖片
Reference
[1]f_cli_f: https://www.npmjs.com/package/f_cli_f
[2]Rsbuild: https://rsbuild.dev/zh/guide/start/
[3]dialoguer: https://github.com/console-rs/dialoguer
[4]code-inspector-plugin: https://inspector.fe-dev.cn/
