在 Rust 中,使用 WebAssembly (WASM) 实现模块化可以通过以下几个步骤来完成:
- 创建一个新的 Rust 项目:
cargo new --lib my_wasm_project
cd my_wasm_project
- 在
Cargo.toml
文件中添加wasm-bindgen
依赖:
[package]
name = "my_wasm_project"
version = "0.1.0"
authors = ["Your Name <your.email@example.com>"]
edition = "2018"
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2"
- 在
src/lib.rs
文件中编写 Rust 代码:
// src/lib.rs
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
a + b
}
#[wasm_bindgen]
pub struct MyStruct {
value: i32,
}
#[wasm_bindgen]
impl MyStruct {
#[wasm_bindgen(constructor)]
pub fn new(value: i32) -> MyStruct {
MyStruct { value }
}
#[wasm_bindgen]
pub fn get_value(&self) -> i32 {
self.value
}
#[wasm_bindgen]
pub fn set_value(&mut self, value: i32) {
self.value = value;
}
}
- 编译 Rust 代码为 WebAssembly:
cargo build --target wasm32-unknown-unknown --release
- 使用
wasm-bindgen
生成 JavaScript 绑定文件:
wasm-bindgen target/wasm32-unknown-unknown/release/my_wasm_project.wasm --out-dir ./pkg --target web
这将生成一个 pkg
目录,其中包含生成的 .js
和 .wasm
文件。
- 在 HTML 文件中引入生成的 JavaScript 文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My WebAssembly Project</title>
</head>
<body>
<script src="./pkg/my_wasm_project.js"></script>
<script> // 初始化 WebAssembly 模块 const wasmInstance = await WebAssembly.instantiateStreaming(fetch('./pkg/my_wasm_project_bg.wasm')); // 获取导出的函数和结构体 const { add, MyStruct } = wasmInstance.instance.exports; // 使用导出的函数和结构体 console.log(add(1, 2)); // 输出:3 const myStruct = MyStruct.new(42); console.log(myStruct.get_value()); // 输出:42 myStruct.set_value(84); console.log(myStruct.get_value()); // 输出:84 </script>
</body>
</html>
通过以上步骤,你可以在 Rust 中使用 WebAssembly 实现模块化。你可以根据需要将代码拆分为多个模块,并在 Cargo.toml
文件中配置依赖关系。