Rust编写WebAssembly

rust
  目录
  1. 1. 安装Wasm打包工具
  2. 2. 创建项目并配置
    1. 2.1. 创建一个新的 Rust 库项目
    2. 2.2. 修改 Cargo.toml 文件，添加必要的依赖和配置
  3. 3. 编写Rust代码
  4. 4. 编译为WebAssembly
  5. 5. 在浏览器中运行
  6. 6. 启动Server
  7. 7. 总结

Rust编写WebAssembly极简教程

确保已经安装了rust,nodejs

安装Wasm打包工具

1
2
3
4
5
# 1. 添加 Wasm 编译目标
rustup target add wasm32-unknown-unknown

# 2. 安装 wasm-pack (用于将 Rust 编译为 Wasm 并生成 JS 胶水代码)
cargo install wasm-pack

创建项目并配置

创建一个新的 Rust 库项目

1
2
cargo new --lib rust-wasm-demo
cd rust-wasm-demo

修改 Cargo.toml 文件，添加必要的依赖和配置

1
2
3
4
5
6
7
8
9
10
11
12
[package]
name = "rust-wasm-demo"
version = "0.1.0"
edition = "2024"

# 必须指定 crate-type 为 cdylib，这样才能生成 .wasm 文件
[lib]
crate-type = ["cdylib"]

[dependencies]
# wasm-bindgen 是 Rust 与 JavaScript 之间的桥梁
wasm-bindgen = "0.2"

编写Rust代码

打开 src/lib.rs，清空原有内容，写入以下代码。我们通过 #[wasm_bindgen] 宏将 add 函数暴露给 JavaScript

1
2
3
4
5
6
7
use wasm_bindgen::prelude::*;

// 这个函数将被导出，供 JavaScript 调用
#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

编译为WebAssembly

在项目根目录下运行以下命令，将 Rust 代码编译为 Wasm

1
wasm-pack build --target web

–target 参数说明

target 适用场景
web 原生 ES Module，浏览器 <script type="module"> 直接用
bundler 给 Vite / Webpack / Rollup 等打包工具用
nodejs Node.js 环境 require() 引入
no-modules 老式浏览器，挂在全局变量上

在浏览器中运行

在项目根目录创建 index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Rust Wasm 极简教程</title>
</head>
<body>
    <h1>Rust Wasm 加法演示</h1>
    <p>2 + 3 = <span id="result"></span></p>

    <!-- 注意：type="module" 是必须的 -->
    <script type="module">
        // 1. 导入 wasm-pack 生成的 JS 绑定文件和 init 函数
        import init, { add } from './pkg/rust_wasm_demo.js';

        async function run() {
            // 2. 初始化 Wasm 模块（加载 .wasm 文件）
            await init();

            // 3. 直接调用 Rust 编写的 add 函数
            const result = add(2, 3);
            document.getElementById('result').textContent = result;
        }

        run();
    </script>
</body>
</html>

启动Server

1
http-server -p 8888

总结

  • wasm-bindgen：负责 Rust 和 JS 之间的类型转换与函数调用。
  • wasm-pack：负责编译、打包，生成前端可以直接使用的 npm 包或 ES6 模块。
  web性能