# 第 4 章：使用 Rust 编写 WASM

URL: https://caijiao.org/webassembly/practical/04-rust
Source: docs/webassembly/practical/04-rust.md
Description: 本章介绍如何使用 Rust 编写 WebAssembly 模块，包括 Rust 安装与 wasm-pack 使用、使用 wasm-bindgen 以及如何编译和在 Web 中集成 WebAssembly 模块。

## 4.1 **Rust 安装与 wasm-pack 使用**

要使用 Rust 编写 WebAssembly，首先需要安装 Rust 和相关的工具链。Rust 官方提供了一个强大的工具 `wasm-pack`，帮助我们将 Rust 代码编译成 WebAssembly 并进行集成。

1. **安装 Rust**：可以通过以下命令安装 Rust：
   ```bash
   curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
   ```
   安装完成后，执行以下命令确认 Rust 已经正确安装：
   ```bash
   rustc --version
   ```

2. **安装 wasm-pack**：`wasm-pack` 是一个用来将 Rust 编译成 WebAssembly 模块的工具：
   ```bash
   cargo install wasm-pack
   ```

3. **创建 Rust 项目**：使用 Cargo 创建一个新的 Rust 项目：
   ```bash
   cargo new wasm_example --lib
   cd wasm_example
   ```

4. **设置 Rust 项目为 WebAssembly 目标**：通过以下命令安装 WebAssembly 目标：
   ```bash
   rustup target add wasm32-unknown-unknown
   ```

现在你已经准备好开始使用 Rust 编写 WebAssembly 模块，并使用 `wasm-pack` 来构建它。

## 4.2 **使用 wasm-bindgen**

`wasm-bindgen` 是一个用于将 Rust 代码和 JavaScript 交互的库，它允许 Rust 函数和 JavaScript 函数之间进行数据交换。

1. **安装 wasm-bindgen**：在 Rust 项目中添加 `wasm-bindgen` 依赖，在 `Cargo.toml` 文件中加入以下内容：
   ```toml
   [dependencies]
   wasm-bindgen = "0.2"
   ```

2. **编写 Rust 代码**：创建一个简单的 Rust 函数并使用 `wasm-bindgen` 导出它：
   ```rust
   use wasm_bindgen::prelude::*;

   #[wasm_bindgen]
   pub fn greet(name: &str) -> String {
       format!("Hello, {}!", name)
   }
   ```

3. **编译为 WebAssembly**：使用 `wasm-pack` 编译该 Rust 模块为 WebAssembly：
   ```bash
   wasm-pack build --target web
   ```

   这会生成 `pkg` 目录，其中包含了 WebAssembly 模块和 JavaScript 包装器。

## 4.3 **编译与在 Web 中集成**

完成了 Rust 编写和 WebAssembly 编译之后，可以将模块集成到 Web 应用中。

1. **创建 HTML 和 JavaScript 文件**：在你的 Web 项目中，创建一个 HTML 文件并引入通过 `wasm-pack` 生成的 JavaScript 文件：
   ```html
   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Rust WASM Example</title>
   </head>
   <body>
     <h1>Rust and WebAssembly</h1>
     <script type="module">
       import init, { greet } from './pkg/wasm_example.js';

       async function run() {
         await init();
         console.log(greet('World'));
       }

       run();
     </script>
   </body>
   </html>
   ```

2. **运行 Web 项目**：为了运行此项目，可以使用一个本地服务器。例如，可以使用 `http-server` 启动本地服务器：
   ```bash
   npx http-server
   ```

   在浏览器中访问该页面时，应该能够看到输出的 `Hello, World!`。

通过以上步骤，你成功地将 Rust 编写的 WebAssembly 模块集成到 Web 应用中。利用 Rust 的性能优势，结合 WebAssembly 和 JavaScript，可以实现高效的前端应用开发。