WebAssembly 开发入门 6:使用 Rust 语言开发
计算学徒
编辑于 2026年02月03日 20:02
收录于文集
共106篇
web前端学习

在前面几篇文章中,介绍了如何使用 C/C++ 语言配合 CMake 进行 WebAssembly 开发:

相信大家对 WebAssembly 的开发已经有所入门。今天给大家介绍一下使用 Rust 语言开发 WebAssembly。

相比于 C/C++ 语言,Rust 几乎是为 WebAssembly 量身定制的,其内存安全特性与 WebAssembly 的沙箱模型完美契合。Rust 的几个特性使其非常适合进行 WebAssembly 开发:

  • Rust 拥有 wasm-pack 和 wasm-bindgen 官方工具链,不仅能编译代码,还能自动生成 JavaScript 胶水代码和 TypeScript 定义文件;

  • Rust 具有零成本抽象,它的内存管理机制不需要垃圾回收,生成的 wasm 文件非常精简并且运行效率高;

  • Rust 具有现代化的包管理工具 cargo,可以轻松引入专门为 WebAssembly 优化的库,提高开发效率。

如果你的 WebAssembly 项目从零开始,也没有大量 C/C++ 遗留代码,强烈建议选择 Rust 语言进行 WebAssembly 开发。

介绍了这么多背景知识,现在来看一下如何使用 Rust 开发并导出一个函数到 WebAssembly 模块中。假设你已经安装好了 Rust 开发环境(rustup 工具)。

为了能够编译 WebAssembly,需要为 Rust 添加 wasm 目标以及安装绑定工具 wasm-bindgen-cli 和打包工具 wasm-pack:

代码块
PlainText
自动换行
复制代码
rustup target add wasm32-unknown-unknown
cargo install wasm-bindgen-cli
cargo install wasm-pack
复制成功

使用 cargo 新建 Rust 库项目以及:

代码块
Shell
自动换行
复制代码
cargo new --lib greeting
复制成功

在项目配置文件 Cargo.toml 中包含必要的依赖:

代码块
YAML
自动换行
复制代码
[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2.x"
复制成功

要创建 WebAssembly 模块,crate-type 的类型需要设置为 "cdylib",要导出 Rust 函数和类型到 WebAssembly 需要用到 wasm-bindgen 库。

在 Rust 源代码文件 src/lib.rs 中加入如下代码:

代码块
Rust
自动换行
复制代码
use wasm_bindgen::prelude::*;

// 使用 #[wasm_bindgen] 标记要导出的函数
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Greeting, {}!", name)
}
复制成功

在 Rust 函数上使用宏 #[wasm_bindgen] 表示要将该函数导出到 WebAssembly。在上面的代码中,就是将 greet 函数导出到 WebAssembly 模块中。

使用 wasm-pack 编译 WebAssembly 模块:

代码块
Shell
自动换行
复制代码
wasm-pack build --target web
复制成功

编译选项 -- target web 表示将项目编译为 WebAssembly。编译完成之后在 pkg 目录中会生成 greeting.js、greeting.d.ts、greeting_bg.wasm、greeting_bg.wasm.d.ts 等 WebAssembly 模块文件。

在 Web 页面中,调用 greet 函数的代码如下:

代码块
JavaScript
自动换行
复制代码
import init, {greet} from './greeting.js';
await init(); // 模块初始化,不能省略
console.log(greet("WebAssembly"));
复制成功

init 函数的作用是初始化模块,如果没有初始化完成就调用 greet 函数会出错。打开 Web 页面的控制台,应该可以看到打印出了文本 "Greeting, WebAssembly!"。

#Rust#​ #WebAssembly#​ #Wasm#​ #wasm_bindgen#​ #wasm-pack#​#rustup#​

(完)