rust wasm怎样实现模块化

在 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 文件中配置依赖关系。

最新问答

相关标签