Appearance

第 4 章：使用 Rust 编写 WASM ​

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，可以实现高效的前端应用开发。