前言 在現代 Web 開發中，WebAssembly (WASM) 已成為一種強大的工具。它使得開發者可以在瀏覽器中運行高性能的代碼，跨越傳統的 JavaScript 性能限制。Rust 語言因其高效性和記憶體安全性，成為了編寫 WASM 模塊的熱門選擇。本文將介紹如何將 Rust 代碼編譯為 Web ...
前言
在現代 Web 開發中，WebAssembly (WASM) 已成為一種強大的工具。它使得開發者可以在瀏覽器中運行高性能的代碼，跨越傳統的 JavaScript 性能限制。Rust 語言因其高效性和記憶體安全性，成為了編寫 WASM 模塊的熱門選擇。本文將介紹如何將 Rust 代碼編譯為 WebAssembly，併在 Web 項目中使用。
1. 創建 Rust 項目
首先，我們需要創建一個新的 Rust 項目。由於我們要生成一個可以被其它語言或工具調用的模塊，因此選擇創建一個庫項目，而不是可執行程式。使用 cargo 命令可以輕鬆完成：
cargo new lib_wasm --lib
這個命令會生成一個名為 lib_wasm 的項目，其中包含一個基礎的 Cargo.toml 配置文件和一個 src/lib.rs 文件，你將在其中編寫你的 Rust 代碼。
2. 添加 wasm-bindgen 依賴項
在 Rust 中，wasm-bindgen 是一個關鍵工具，它使 Rust 和 JavaScript 之間的交互變得更加簡單。wasm-bindgen 負責生成與 JavaScript 交互所需的綁定代碼，讓你能夠直接調用 Rust 編寫的函數。
要添加 wasm-bindgen，你可以使用 cargo add 命令：
cargo add wasm-bindgen
或者，手動編輯 Cargo.toml 文件，添加如下依賴項：
[dependencies]
wasm-bindgen = "0.2"
添加 wasm-bindgen 後，Rust 編譯器會在編譯過程中生成必要的綁定文件，從而使你的 WASM 模塊可以被 JavaScript 直接調用。
3. 安裝 wasm32-unknown-unknown 目標
Rust 編譯器預設會生成適用於本地機器架構的可執行文件。要編譯成適用於 Web 的 WebAssembly 文件，我們需要添加一個特定的目標架構，即 wasm32-unknown-unknown。這是一個通用的 WASM 目標，不依賴任何特定的操作系統。
使用以下命令安裝該目標：
rustup target add wasm32-unknown-unknown
此命令會配置你的 Rust 工具鏈，使其能夠生成適用於 WebAssembly 的二進位文件。
4. 編寫 Rust 代碼
現在，你可以在 src/lib.rs 文件中編寫你希望導出的功能。例如，我們可以編寫一個簡單的函數，它接受一個名字作為參數並返回一個問候語：
use wasm_bindgen::prelude::*;
// 使用 #[wasm_bindgen] 巨集來導出函數到 JavaScript
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
format!("Hello, {}!", name)
}
在這段代碼中，我們使用了 #[wasm_bindgen] 巨集將 greet 函數導出，使其可以從 JavaScript 中調用。
5. 編譯 Rust 項目為 WASM
編寫完代碼後，我們可以將其編譯為 WASM 文件。編譯時指定目標為 wasm32-unknown-unknown，並使用 --release 選項生成優化後的構建：
cargo build --target wasm32-unknown-unknown --release
編譯完成後，生成的 .wasm 文件將存儲在 target/wasm32-unknown-unknown/release/ 目錄下。
6. 使用 wasm-bindgen 生成 JavaScript 綁定代碼
雖然編譯生成了 .wasm 文件，但直接在 JavaScript 中使用它並不方便。為此，我們需要使用 wasm-bindgen 工具生成相應的 JavaScript 綁定代碼。這將創建一個便於在 JavaScript 中調用的模塊。
首先，確保已安裝 wasm-bindgen-cli 工具。你可以通過以下命令安裝：
cargo install wasm-bindgen-cli
然後，運行以下命令生成 JavaScript 綁定文件：
wasm-bindgen --out-dir ./out --target web target/wasm32-unknown-unknown/release/lib_wasm.wasm
這會在 out 目錄中生成一系列文件，包括 .js 文件和 .wasm 文件，你可以直接在 Web 項目中使用。
7. 在網頁中使用 WASM 模塊
現在，生成的 WASM 模塊已經可以在 Web 項目中使用。你只需在 HTML 文件中導入生成的 JavaScript 綁定文件，並調用 Rust 導出的函數。例如：
<!DOCTYPE html>
<html>
<head>
<title>Lib WASM Demo</title>
</head>
<body>
<script type="module">
import init, { greet } from "./out/lib_wasm.js";
init().then(() => {
console.log(greet("World"));
});
</script>
</body>
</html>
這個示例會在控制台列印出 "Hello, World!"。其中，init 函數用於初始化 WASM 模塊，而 greet 函數則調用了我們在 Rust 中定義的函數。
web 項目目錄結構如下：
index.html
out/
├── lib_wasm_bg.wasm
├── lib_wasm_bg.wasm.d.ts
├── lib_wasm.d.ts
└── lib_wasm.js
out 目錄中包含了生成的 WASM 文件以及相應的 JavaScript 綁定文件，index.html 是一個簡單的網頁，用於測試和展示你的 WASM 模塊。
結語
通過這套流程，你可以輕鬆地將 Rust 代碼編譯為 WebAssembly，並將其集成到 Web 項目中。Rust 的高效性和 WebAssembly 的靈活性相結合，可以為 Web 應用帶來顯著的性能提升。
本文來自博客園，作者：_zhiqiu，轉載請註明原文鏈接：https://www.cnblogs.com/guojikun/p/18358337
