在本教程中，我們將學習如何在 Web 瀏覽器中執行 Rust 應用程式。我們將建立一個簡單的 Rust 套件，將其編譯為 WebAssembly (WASM)，並將其整合到一個 HTML 頁面中。
1. 安裝 Rust
首先，你需要安裝 Rust。請參考 Rust 官方安裝指南：Rust 安裝指南。安裝完成後，執行以下命令以驗證安裝是否成功：
<code class="language-bash">rustc --version</code>
2. 建立 Rust 套件
接下來，建立一個新的 Rust 套件：
<code class="language-bash">cargo new rust-101 --lib</code>
這將產生以下資料夾結構：
<code>├── Cargo.toml
└── src
└── lib.rs</code>Cargo.toml：專案的設定文件，類似於 JavaScript 中的 package.json。 lib.rs：包含 Rust 程式碼的主要函式庫檔。 開啟 lib.rs 檔案。預設情況下，它包含一個範例 add 函數。我們的目標是從 Web 應用程式呼叫此函數。
3. 將 Rust 編譯成 WebAssembly
要在 Web 上執行 Rust 程式碼，你需要將其編譯為 WebAssembly (WASM)。為此，安裝 wasm-pack 工具：
<code class="language-bash">cargo install wasm-pack</code>
4. 建立 Rust 與 JavaScript 之間的通訊
為了連接 Rust 和 JavaScript，我們將使用 wasm-bindgen crate。更新 Cargo.toml 文件如下：
<code class="language-toml">[package] name = "rust-101" version = "0.1.0" edition = "2021" [lib] crate-type = ["cdylib"] [dependencies] wasm-bindgen = "0.2"</code>
這裡：
crate-type = ["cdylib"]：配置套件以產生與 WebAssembly 相容的動態庫。 wasm-bindgen：啟用 Rust 和 JavaScript 之間的通訊。 安裝依賴項：
<code class="language-bash">cargo build</code>
5. 更新 Rust 程式碼
編輯 src/lib.rs 文件，使 add 函數可從 JavaScript 存取：
<code class="language-rust">use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn add(left: u64, right: u64) -> u64 {
left + right
}</code>#[wasm_bindgen]：將 add 函數暴露給 JavaScript。 執行以下命令將 Rust 套件編譯為 WebAssembly：
<code class="language-bash">wasm-pack build --target web</code>
此指令將：
pkg/ 目錄。 6. 在網頁中使用套件
在專案根目錄中建立一個 index.html 文件，內容如下：
<code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Rust</title>
</head>
<body>
<script type="module">
import init, { add } from "./pkg/rust_101.js";
init().then(() => {
const sum = add(5, 10);
console.log("5 + 10 =", sum);
});
</script>
</body>
</html></code>7. 最終專案結構
完成以上步驟後，你的專案架構應如下圖所示：
<code>.
├── 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</code>8. 啟動 Web 頁面
要運行網頁，你需要使用本地 Web 伺服器來提供服務。可以使用任何你喜歡的Web伺服器，例如Live Server擴充(VS Code)。
在瀏覽器控制台中（Ctrl Shift J 或 Cmd Option J），你應該看到：
<code class="language-bash">rustc --version</code>
就是這樣！希望本教學對您有所幫助。請隨時分享您的回饋或問題！
參考：
請注意，我替換了原文中的一些措辭，並對步驟進行了更清晰的組織，但保持了原文的整體意思和圖片位置。 我沒有添加任何新的內容或改變原文的重點。 請依照實際情況替換「[https://www.php.cn/link/d185c5ed37536ac0063f735f7a15dd24]」和「[https://www.php.cn/link/2677c94cc946bd788a3828099d6b49]。
以上是如何在 Web 中運行 Rust 應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
