在本教程中，我們將學習如何在 Web 瀏覽器中運行 Rust 應用程序。我們將創建一個簡單的 Rust 包，將其編譯為 WebAssembly (WASM)，並將其集成到一個 HTML 頁面中。

1. 安裝 Rust

首先，你需要安裝 Rust。請參考 Rust 官方安裝指南：Rust 安裝指南。安裝完成後，運行以下命令驗證安裝是否成功：

rustc --version

2. 創建 Rust 包

接下來，創建一個新的 Rust 包：

cargo new rust-101 --lib

這將生成以下文件夾結構：

├── Cargo.toml
└── src
    └── lib.rs

• Cargo.toml：項目的配置文件，類似於 JavaScript 中的 package.json。
• lib.rs：包含 Rust 代碼的主要庫文件。

打開 lib.rs 文件。默認情況下，它包含一個示例 add 函數。我們的目標是從 Web 應用程序調用此函數。

3. 將 Rust 編譯為 WebAssembly

要在 Web 上運行 Rust 代碼，你需要將其編譯為 WebAssembly (WASM)。為此，安裝 wasm-pack 工具：

cargo install wasm-pack

4. 建立 Rust 和 JavaScript 之間的通信

為了連接 Rust 和 JavaScript，我們將使用 wasm-bindgen crate。更新 Cargo.toml 文件如下：

[package]
name = "rust-101"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

這裡：

• crate-type = ["cdylib"]：配置包以生成與 WebAssembly 兼容的動態庫。
• wasm-bindgen：啟用 Rust 和 JavaScript 之間的通信。

安裝依賴項：

cargo build

5. 更新 Rust 代碼

編輯 src/lib.rs 文件，使 add 函數可從 JavaScript 訪問：

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(left: u64, right: u64) -> u64 {
    left   right
}

• #[wasm_bindgen]：將 add 函數暴露給 JavaScript。

運行以下命令將 Rust 包編譯為 WebAssembly：

wasm-pack build --target web

此命令將：

• 將 Rust 代碼編譯為 WebAssembly。
• 生成用於處理 WebAssembly 文件的 JavaScript 綁定。
• 創建一個包含生成文件的 pkg/ 目錄。

6. 在網頁中使用包

在項目根目錄中創建一個 index.html 文件，內容如下：

7. 最終項目結構

完成以上步驟後，你的項目結構應如下所示：

.
├── Cargo.lock
├── Cargo.toml
├── index.html
├── pkg
│   ├── package.json
│   ├── rust_101.d.ts
│   ├── rust_101.js
│   ├── rust_101_bg.wasm
│   └── rust_101_bg.wasm.d.ts
└── src
    └── lib.rs

8. 啟動 Web 頁面

要運行網頁，你需要使用本地 Web 服務器來提供服務。可以使用任何你喜歡的Web服務器，例如Live Server擴展(VS Code)。

在瀏覽器控制台中（Ctrl Shift J 或 Cmd Option J），你應該看到：

5   10 = 15

就是這樣！希望本教程對您有所幫助。請隨時分享您的反饋或問題！

參考：

• 從 Rust 編譯到 WebAssembly

請注意，我替換了原文中的一些措辭，並對步驟進行了更清晰的組織，但保持了原文的整體意思和圖片位置。 我沒有添加任何新的內容或改變原文的重點。 請根據實際情況替換“[此處應插入Rust安裝指南鏈接]”和“[此處應插入相關文檔鏈接]”為正確的鏈接。