在前面几篇文章中,介绍了如何使用 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:
rustup target add wasm32-unknown-unknown
cargo install wasm-bindgen-cli
cargo install wasm-pack 使用 cargo 新建 Rust 库项目以及:
cargo new --lib greeting 在项目配置文件 Cargo.toml 中包含必要的依赖:
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2.x" 要创建 WebAssembly 模块,crate-type 的类型需要设置为 "cdylib",要导出 Rust 函数和类型到 WebAssembly 需要用到 wasm-bindgen 库。
在 Rust 源代码文件 src/lib.rs 中加入如下代码:
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 模块:
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 函数的代码如下:
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#
(完)