当前位置：首页 > Rust > 正文

用 Rust 构建 WebAssembly 应用（wasm-pack 详细入门教程）

主机测评网
Rust
2025-12-21
690

如果你对前端性能优化、跨语言开发或高性能 Web 应用感兴趣，那么 Rust WebAssembly 绝对值得你了解。本教程将手把手教你如何使用 wasm-pack 这一官方推荐的工具，将 Rust 代码编译并打包成 WebAssembly 模块，并在浏览器中运行。即使你是编程小白，也能轻松上手！

什么是 wasm-pack？

wasm-pack 是由 Rust 和 WebAssembly 团队开发的命令行工具，用于简化将 Rust 项目编译为 WebAssembly 并生成适用于 npm、浏览器或 Node.js 的 JavaScript 胶水代码的过程。它能自动处理复杂的构建流程，让你专注于逻辑开发。

用 Rust 构建 WebAssembly 应用（wasm-pack 详细入门教程） wasm-pack 教程打包入门第1张

准备工作

在开始之前，请确保你的电脑已安装以下工具：

Rust：访问 rust-lang.org 安装最新版。
wasm-pack：通过终端运行以下命令安装：

cargo install wasm-pack

此外，建议你也安装 npm（Node.js 包管理器），用于后续测试和发布。

创建第一个 Rust + WebAssembly 项目

我们将创建一个简单的函数，接收两个数字并返回它们的和。虽然简单，但能完整展示整个流程。

使用 cargo 创建新项目：

cargo new --lib hello-wasmcd hello-wasm

编辑 Cargo.toml 文件，添加 WebAssembly 支持：

[package]name = "hello-wasm"version = "0.1.0"edition = "2021"[lib]crate-type = ["cdylib"][dependencies]wasm-bindgen = "0.2"

注意：crate-type = ["cdylib"] 告诉 Rust 编译器生成动态链接库，这是 WebAssembly 所需的格式。

编辑 src/lib.rs，编写我们的加法函数：

use wasm_bindgen::prelude::*;#[wasm_bindgen]pub fn add(a: i32, b: i32) -> i32 {    a + b}

这里我们使用了 #[wasm_bindgen] 宏，它会自动生成 JavaScript 可调用的接口。

使用 wasm-pack 构建项目

在项目根目录下运行以下命令：

wasm-pack build --target web

该命令会：

将 Rust 代码编译为 .wasm 文件
生成配套的 JavaScript 胶水代码（hello_wasm.js）
输出到 pkg/ 目录

在网页中使用 WebAssembly 模块

创建一个简单的 HTML 文件来测试我们的模块：

<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="UTF-8">  <title>Rust WebAssembly 测试</title></head><body>  <script type="module">    import init, { add } from './pkg/hello_wasm.js';    async function run() {      await init();      const result = add(5, 7);      console.log('5 + 7 =', result);      document.body.innerHTML += `<p>计算结果：5 + 7 = ${result}</p>`;    }    run();  </script></body></html>

将此文件保存为 index.html，并放在与 pkg/ 同级的目录下。由于浏览器安全限制，你需要通过本地服务器打开（不能直接双击 HTML 文件）。可以使用如下命令启动简易服务器：