06月
22

发表于 • 字数统计 564 • 被 7 人看爆

github project

https://github.com/qyzhizi/js-logical/blob/main/rust/2025-06-21-wasm-pack-demo/wasm_demo

要创建这样一个可以用 wasm-pack build 构建出 JS 可调用的 WebAssembly 工程（带 wasm_bindgen 的 Rust + JS 封装），你可以按如下步骤操作：

✅ 第一步：安装必要工具

确保你已经安装了：

# 安装 Rust 工具链
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# 安装 wasm-pack 工具
cargo install wasm-pack

✅ 第二步：创建工程目录

cargo new --lib wasm_demo
cd wasm_demo

✅ 第三步：修改 Cargo.toml

在 Cargo.toml 中加入：

[package]
name = "wasm_demo"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

[package.metadata.wasm-pack.profile.release]
wasm-opt = false  # 可选：构建更快（禁用优化）

[dependencies.web-sys]
version = "0.3"
features = ["console"]

✅ 第四步：编辑 src/lib.rs

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn double(n: i32) -> i32 {
    n * 2
}

#[wasm_bindgen]
pub fn greet(name: &str) {
    web_sys::console::log_1(&format!("Hello, {name}!").into());
}

如果你要使用 web_sys::console::log_1，还需要启用 web-sys 依赖：

[dependencies.web-sys]
version = "0.3"
features = ["console"]

✅ 第五步：构建项目

运行以下命令来构建：

wasm-pack build --target web

这将输出一个 pkg/ 文件夹，包含：

.
├── package.json
├── wasm_demo.d.ts
├── wasm_demo.js  # 初始化函数 , Rust 导出函数的 glue code
├── wasm_demo_bg.wasm  # Rust 编译的 WebAssembly 模块
└── wasm_demo_bg.wasm.d.ts

✅ 第六步：在 HTML + JS 项目中使用

你可以创建一个简单的前端页面来测试：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WASM Test</title>
</head>
<body>
  <button id="btn">Greet</button>
  <script type="module">
    import init, { double, greet } from "./pkg/wasm_demo.js";

    init().then(() => {
      console.log("double(4):", double(4));
      document.getElementById("btn").addEventListener("click", () => {
        greet("World");
      });
    });
  </script>
</body>
</html>

✅ 小结

整个流程就是：

  1. 使用 wasm_bindgen 暴露 Rust 函数；
  2. wasm-pack build --target web 自动生成 wasm 和 JS glue code；
  3. 在浏览器端通过 import 使用 wasm 模块。
分享到：