教程 webassembly tutorial

第 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
  1. 安装 wasm-pack:wasm-pack 是一个用来将 Rust 编译成 WebAssembly 模块的工具:
bash
   cargo install wasm-pack
  1. 创建 Rust 项目:使用 Cargo 创建一个新的 Rust 项目:
bash
   cargo new wasm_example --lib
   cd wasm_example
  1. 设置 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"
  1. 编写 Rust 代码:创建一个简单的 Rust 函数并使用 wasm-bindgen 导出它:
rust
   use wasm_bindgen::prelude::*;

   #[wasm_bindgen]
   pub fn greet(name: &str) -> String {
       format!("Hello, {}!", name)
   }
  1. 编译为 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>
  1. 运行 Web 项目:为了运行此项目,可以使用一个本地服务器。例如,可以使用 http-server 启动本地服务器:
bash
   npx http-server

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

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