溫馨提示×

rust wasm怎樣實(shí)現(xiàn)模塊化

小樊
81
2024-11-19 03:47:35
欄目: 編程語言

在 Rust 中，使用 WebAssembly (WASM) 實(shí)現(xiàn)模塊化可以通過以下幾個步驟來完成：

  1. 創(chuàng)建一個新的 Rust 項(xiàng)目：
cargo new --lib my_wasm_project
cd my_wasm_project
  1. 在 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"
  1. 在 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;
    }
}
  1. 編譯 Rust 代碼為 WebAssembly：
cargo build --target wasm32-unknown-unknown --release
  1. 使用 wasm-bindgen 生成 JavaScript 綁定文件：
wasm-bindgen target/wasm32-unknown-unknown/release/my_wasm_project.wasm --out-dir ./pkg --target web

這將生成一個 pkg 目錄，其中包含生成的 .js 和 .wasm 文件。

  1. 在 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'));

        // 獲取導(dǎo)出的函數(shù)和結(jié)構(gòu)體
        const { add, MyStruct } = wasmInstance.instance.exports;

        // 使用導(dǎo)出的函數(shù)和結(jié)構(gòu)體
        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 實(shí)現(xiàn)模塊化。你可以根據(jù)需要將代碼拆分為多個模塊，并在 Cargo.toml 文件中配置依賴關(guān)系。

0 踩