跳到主要内容

将Rust编译为WASM

编译工具cargo与wasm-pack​

一、编译工具对比​

工具作用适用场景
wasm-pack专为 Rust 生成 WASM 设计，自动处理编译、生成 JavaScript 绑定和 npm 包配置需要与 JavaScript 交互的 Web 应用
cargoRust 官方包管理器，需手动指定编译目标 (wasm32-unknown-unknown) 生成 WASM通用编译，或需要自定义构建流程

二、生成的文件名​

1. 使用 wasm-pack​

  • 输出目录：pkg/

  • 文件名规则：<crate-name>.wasm + JavaScript 绑定文件（如 wasm_example_bg.wasm、wasm_example.js）

    示例

    wasm-pack build --target web
    # 生成 pkg/wasm_example_bg.wasm 和 pkg/wasm_example.js

2. 使用 cargo​

  • 输出目录：target/wasm32-unknown-unknown/release/

  • 文件名规则：<crate-name>.wasm

    示例

    cargo build --target wasm32-unknown-unknown --release
    # 生成 target/wasm32-unknown-unknown/release/example.wasm

三、工具详细说明​

1. wasm-pack​

  • 核心功能：

    • 自动编译 Rust 代码为 WASM。
    • 生成 JavaScript 绑定代码（通过 wasm-bindgen），支持在浏览器或 Node.js 中调用。
    • 创建 package.json 和 webpack 配置，方便发布到 npm。

  • 典型命令

    wasm-pack build --target web  # 生成浏览器兼容的 WASM 和 JS 绑定
    wasm-pack build --target nodejs  # 生成 Node.js 兼容的 WASM

2. cargo​

  • 核心功能：

    • 通用 Rust 构建工具，需手动配置编译目标。
    • 生成纯 WASM 文件，无自动生成的 JavaScript 绑定。

  • 配置步骤：

    1. 在 Cargo.toml 中添加 crate-type = ["cdylib"]。

    2. 安装目标平台：

      rustup target add wasm32-unknown-unknown

    3. 编译：

      cargo build --target wasm32-unknown-unknown --release

四、使用场景对比​

场景推荐工具原因
开发 Web 应用wasm-pack自动生成 JS 绑定，简化与前端框架（如 React/Vue）集成
需要优化编译流程cargo直接控制编译参数，适合嵌入到非 Web 环境（如游戏引擎、嵌入式系统）
发布到 npmwasm-pack自动生成符合 npm 规范的包结构，支持 npm publish
调试或测试wasm-pack内置开发服务器和测试工具（wasm-pack test）

五、示例对比​

1. wasm-pack 生成文件结构​

project/
├── pkg/
│   ├── wasm_example_bg.wasm    # WASM 二进制
│   ├── wasm_example.js         # JavaScript 绑定（自动加载 WASM）
│   └── package.json            # npm 包配置
└── src/
    └── lib.rs                  # Rust 源码

2. cargo 生成文件结构​

project/
├── target/
│   └── wasm32-unknown-unknown/
│       └── release/
│           └── example.wasm    # 纯 WASM 文件
└── Cargo.toml

六、总结​

  • wasm-pack：适合需要快速构建 WebAssembly 并与 JavaScript 交互的场景，提供开箱即用的工具链。
  • cargo：适合需要精细控制编译过程或生成纯 WASM 文件的场景。