当 Rust 遇见 WebAssembly：Wasm 与 Rust 生态初探（入门篇）WebAssembly，常简称为

当 Rust 遇见 WebAssembly：Wasm 与 Rust 生态初探（入门篇）

《Rust Wasm 探索之旅：从入门到实践》系列一：当 Rust 遇见 WebAssembly：Wasm 与 Rust 生态初探（入门篇）

197605d8-d36f-4347-9fba-e1fa2915aebc_1746803106274269925_origin~tplv-a9rns2rl98-image-qvalue.jpeg

一、WebAssembly：重新定义 Web 开发的 “极速引擎”

1.1 什么是 WebAssembly（Wasm）？

WebAssembly，常简称为 Wasm，是一种为 Web 优化的二进制字节码格式，专为现代浏览器设计。它能以接近原生的速度运行，并与 JavaScript 无缝协作。

简单来说，WebAssembly 是一种可移植、体积小、加载快并且兼容 Web 的全新格式。它不是要取代 JavaScript，而是要与 JavaScript 并肩作战！

WebAssembly 的核心优势在于其 “沙箱安全环境” 和 “跨平台可移植性”。

在沙箱环境中，WebAssembly 代码被隔离运行，避免了对系统的潜在风险，就像在一个安全的独立容器里运行程序，不会影响到外面的世界。
跨平台可移植性则意味着，编写一次 WebAssembly 代码，可以在不同的浏览器、Node.js 环境，甚至是嵌入式设备中运行，极大地提高了代码的复用性和通用性。

1.2 三大核心优势，解锁 Web 新可能

高性能计算：相比 JavaScript，WebAssembly 省去了解释执行和动态类型检查的开销，以接近原生的速度运行，在数值计算、图形渲染等密集型任务中性能提升显著。使得网页运行 3D 游戏、视频处理等复杂应用成为可能。

代码复用革命：WebAssembly 实现了一次编写，多端运行。开发者可以复用现有的 Rust 或 C++ 代码库，通过编译生成 Wasm 模块，轻松嵌入 Web 应用。

多语言协同生态：作为 “语言中立” 的中间格式，WebAssembly 支持多种编程语言编译接入。这形成了以 JavaScript 为 “胶水”、Wasm 为 “引擎” 的混合开发模式。在这种模式下，JavaScript 负责处理 DOM 操作、用户交互等上层逻辑，而 WebAssembly 则专注于执行计算密集型任务，两者相互协作，发挥各自的优势。

1.3 应用场景：从浏览器到全平台

Web 端：在游戏领域，无论是 2D 还是 3D 游戏，Wasm 都可以让游戏引擎直接在浏览器中运行，提供流畅的游戏体验，无需插件；在音视频领域，实现浏览器内的实时音频分析、效果器、音乐制作软件、视频剪辑、转码、特效处理等；在科学计算与数据可视化方面，处理和渲染海量数据点，能够加速图表的渲染，使数据展示更加流畅和实时。

跨平台：通过 Electron/Tauri 等框架，WebAssembly 可以构建高性能桌面应用。开发者可以用 Rust 编写核心逻辑，然后编译成 Wasm 模块，再结合前端技术，实现一套代码同时运行在 Web 和桌面平台。

边缘计算：在资源受限的嵌入式设备中，WebAssembly 也能发挥重要作用。运行轻量级的 Wasm 模块，既能够满足设备的性能需求，又能保证安全性。例如，在智能摄像头中，WebAssembly 可以运行图像识别算法，实现实时的目标检测和分析，而无需依赖强大的云端计算资源。

二、为什么 Rust 是 WebAssembly 的 “黄金搭档”？

在 WebAssembly 的开发领域中，Rust 凭借其独特的优势，成为了众多开发者的首选语言。它与 WebAssembly 的结合，就像是一把钥匙开一把锁，完美适配，为 Web 开发带来了前所未有的体验。

2.1 内存安全：筑牢 Web 环境的 “安全防线”

在 Web 开发中，内存安全一直是一个至关重要的问题。JavaScript 作为传统的 Web 开发语言，虽然灵活，但在内存管理方面存在一些潜在的风险，比如空指针引用、数据竞争等问题，这些问题可能会导致程序崩溃或者安全漏洞。

而 Rust 则通过其强大的所有权系统和借用检查器，在编译阶段就能够杜绝这些内存错误，无需运行时垃圾回收。

Rust 的所有权系统规定，每个值都有一个唯一的所有者，当所有者离开作用域时，值将被自动释放。例如：

fn main() {
    let s = String::from("hello"); // s拥有这个字符串的所有权
    println!("s: {}", s);
    let s1 = s; // s的所有权转移到s1
    println!("s1: {}", s1);
    // 这里s已经不再有效，不能再使用它
    // 下面这行代码会报错，因为s已经不再有效
    // println!("{}", s);
}

借用检查器则确保在任意时刻，一个值只能有一个可变引用或任意数量的不可变引用，从而避免了数据竞争。例如：

fn main() {
    let mut s = String::from("hello");

    let r1 = &s; // 不可变引用

    let r2 = &s; // 多个不可变引用是允许的

    // 下面这行代码会报错，因为在有不可变引用时，不能有可变引用
    // let r3 = &mut s;
    // r3.push('a');

    println!("r1: {}", r1);
    println!("r2: {}", r2);
}

Rust 的内存安全特性就像是为 Web 环境筑牢了一道 “安全防线”，让 Wasm 模块在高效运行的同时，成为浏览器中的 “安全沙盒”。

2.2 极致性能：媲美 C/C++ 的 “速度担当”

在性能方面，Rust 同样表现出色。Rust 代码经 LLVM 优化后生成的 Wasm 字节码，执行效率接近原生代码，且无额外运行时开销。这使得 Rust+Wasm 组合在处理矩阵运算、视频编解码等计算密集型任务时，能够展现出强大的性能优势。

2.3 一站式工具链：开发体验全面升级

Rust 拥有一套完善的工具链，为开发者提供了全方位的支持，极大地提升了开发体验。

rustup：这是 Rust 的安装程序和版本管理工具，就像是一个贴心的管家，帮助开发者轻松管理 Rust 版本和 Wasm 编译目标。只需要一行命令rustup target add wasm32-unknown-unknown，就可以添加 Wasm 编译目标，让开发者能够快速开始 Rust 和 WebAssembly 的开发。

cargo：作为 Rust 的构建系统和包管理工具，cargo 原生支持 Wasm 项目。通过 Cargo.toml 文件，开发者可以方便地配置项目依赖。比如，要使用 wasm-bindgen 库，只需要在 Cargo.toml 中添加wasm-bindgen = "0.2"，就可以轻松引入这个库，为后续的开发做好准备。

wasm-pack：这是一个将 Rust 代码编译、打包为 Wasm 模块，并自动生成 JavaScript 调用接口的工具。它彻底简化了跨语言交互流程，让开发者无需担心 Rust 和 JavaScript 之间的通信问题。使用wasm-pack build --target web命令，就可以一键完成编译和打包，生成的 JavaScript 文件可以直接在浏览器中引入使用，大大提高了开发效率。

三、Rust 与 Wasm 生态核心工具揭秘

在 Rust 与 WebAssembly 的开发世界里，有一些核心工具起着至关重要的作用，它们就像是魔法棒，让 Rust 与 WebAssembly 的开发变得更加高效和便捷。

3.1 wasm-bindgen：打通 Rust 与 JS 的 “翻译官”

在 Rust 与 WebAssembly 的开发中，wasm-bindgen 是一个非常重要的工具，它就像是一位 “翻译官”，打通了 Rust 与 JavaScript 之间的交流障碍，让两者能够轻松地进行交互。

通过#[wasm_bindgen]宏，Rust 函数可以轻松地导出为 JavaScript 可调用的接口。例如，我们在 Rust 代码中定义一个简单的函数：

use wasm_bindgen::prelude::*;

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

在这段代码中，#[wasm_bindgen]宏将add函数标记为可以被 JavaScript 调用。编译后，在 JavaScript 中就可以通过导入的方式来调用这个函数，实现无缝交互。

反之，wasm-bindgen 也能让我们在 Rust 中调用浏览器 API。比如，我们想要在 Rust 中操作 DOM 元素，通过 wasm-bindgen 就可以实现。首先，在 Rust 代码中导入相关的模块：

use wasm_bindgen::prelude::*;
use web_sys::window;

#[wasm_bindgen]
pub fn set_body_text(text: &str) {
   if let Some(window) = window() {
       if let Some(document) = window.document() {
           if let Some(body) = document.body() {
               body.set_inner_html(text);
           }
       }
   }
}

在这段代码中，我们通过wasm_bindgen和web_sys库，在 Rust 中调用了浏览器的window、document和body等 API，实现了设置网页正文内容的功能。

这样，Rust 就能够与浏览器环境进行深度交互，拓展了其在 Web 开发中的应用范围。

3.2 wasm-pack：Wasm 模块的 “智能打包机”

wasm-pack 是另一个不可或缺的工具，它就像是一个 “智能打包机”，能够帮助我们将 Rust 代码编译、打包为 Wasm 模块，并自动生成 JavaScript 调用接口，极大地简化了开发流程。

只需运行wasm-pack build --target web，wasm-pack 就会自动完成一系列操作：

Rust 代码编译为 Wasm 字节码：wasm-pack 会调用 Rust 编译器，将我们编写的 Rust 代码编译成 WebAssembly 字节码，这是在浏览器中运行的核心代码。
生成 JS 胶水代码（.js 文件）和类型声明（.d.ts）：为了让 JavaScript 能够方便地调用 Wasm 模块，wasm-pack 会生成相应的 JavaScript 胶水代码，这些代码就像是桥梁，连接了 Rust 和 JavaScript。同时，还会生成类型声明文件（.d.ts），可以为 TypeScript 项目提供类型检查和代码提示，提高代码的可维护性。
配置 package.json：wasm-pack 会读取项目的 Cargo.toml 文件，并生成相应的 package.json 文件。这个 package.json 文件包含了项目的元数据、依赖信息等，支持通过 npm 发布或本地引用。

最终，wasm-pack 会生成一个 pkg/ 目录，里面包含了编译后的 Wasm 文件、生成的 JavaScript 文件和类型声明文件等。

这个 pkg/ 目录可以直接嵌入 Web 项目，无需手动配置复杂的编译流程。例如，我们在一个 Webpack 项目中使用 wasm-pack 生成的 Wasm 模块，只需要在项目中安装相关依赖，然后在 JavaScript 文件中导入生成的模块即可使用，非常方便。

四、手把手搭建第一个 Rust Wasm 开发环境

4.1 安装 Rust 工具链

在开始 Rust 与 WebAssembly 的开发之旅前，我们首先需要搭建好开发环境。第一步就是安装 Rust 工具链，这是整个开发过程的基础。

我们可以使用rustup来安装 Rust 工具链，它是 Rust 官方提供的工具链管理器，就像是一个贴心的管家，帮助我们轻松管理 Rust 的安装和版本。

在 Linux 或 macOS 系统中，打开终端，执行以下命令：

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

这条命令会从 Rust 官方网站下载安装脚本并运行。在安装过程中，按照提示选择默认选项即可完成安装。安装完成后，重新打开终端，或者执行source $HOME/.cargo/env命令，使环境变量生效。

在 Windows 系统中，你可以从 Rust 官方网站（www.rust-lang.org/tools/insta… ）下载安装程序，然后按照安装向导的提示进行安装。安装完成后，打开命令提示符或 PowerShell，输入rustc --version和cargo --version命令，如果能正确显示版本信息，说明 Rust 工具链已经成功安装。

4.2 安装核心工具 wasm-pack

安装好 Rust 工具链后，接下来我们需要安装wasm-pack，它是将 Rust 代码编译、打包为 Wasm 模块，并自动生成 JavaScript 调用接口的核心工具。使用cargo安装wasm-pack非常简单，在终端中执行以下命令：

cargo install wasm-pack

cargo会自动从 crates.io 下载wasm-pack并安装到本地。安装完成后，执行wasm-pack --version命令，验证是否安装成功。如果能显示wasm-pack的版本号，说明安装成功。

4.3 创建 Rust 项目

现在，我们已经安装好了所需的工具，可以开始创建我们的第一个 Rust 项目了。使用cargo创建项目非常方便，在终端中执行以下命令：

cargo new --lib hello_wasm
cd hello_wasm

这两条命令会在当前目录下创建一个名为hello_wasm的新目录，并在其中初始化一个新的 Rust 库项目。--lib参数表示我们创建的是一个库项目，而不是可执行项目。进入hello_wasm目录后，你会看到项目目录结构如下：

hello_wasm
├── Cargo.toml
└── src
   └── lib.rs

Cargo.toml是项目的配置文件，用于管理项目的依赖和元数据；src/lib.rs是项目的源代码文件，Rust 代码就写在这里。

4.4 配置 Cargo.toml

打开Cargo.toml文件，添加以下内容：

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

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

[dependencies]
wasm-bindgen = "0.2"

[lib]部分告诉 Cargo 我们要生成一个动态链接库（cdylib），这是 WebAssembly 所需要的格式。

[dependencies]部分添加了wasm-bindgen依赖，它是 Rust 与 JavaScript 之间进行交互的重要工具，版本号0.2表示我们使用的是 0.2 版本的wasm-bindgen。

添加依赖后，Cargo 会自动下载并管理这些依赖。

五、实战：编写浏览器里的 Rust “Hello World”

现在，我们已经搭建好了开发环境，并且了解了相关工具的使用方法，接下来就让我们通过一个实际的例子，来感受一下 Rust 与 WebAssembly 的魅力。

我们将编写一个简单的 “Hello, World!” 程序，用 Rust 编写逻辑，然后编译为 Wasm 模块，最后在浏览器中调用并展示结果。

5.1 编写 Rust 逻辑（src/lib.rs）

打开src/lib.rs文件，编写以下代码：

use wasm_bindgen::prelude::*;

// 使用#[wasm_bindgen]宏将函数导出为JavaScript可调用的接口
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!(
        "Hello, {}! Welcome to the world of Rust and WebAssembly.",
        name
    )
}

在这段代码中，我们首先导入了wasm_bindgen::prelude::*，这是使用wasm_bindgen的必要步骤，它包含了一些常用的宏和类型定义。

然后，我们定义了一个greet函数，这个函数接受一个字符串类型的参数name，并返回一个格式化后的问候语字符串。

#[wasm_bindgen]宏将这个函数标记为可以被 JavaScript 调用的接口，这样在编译后，我们就可以在 JavaScript 中调用这个函数了。

5.2 编译为 Wasm 模块

编写好 Rust 代码后，接下来我们使用wasm-pack将其编译为 Wasm 模块，并生成 JavaScript 调用接口。在项目根目录下的终端中执行以下命令：

wasm-pack build --target web

wasm-pack build命令会将 Rust 代码编译为 Wasm 模块，并生成相应的 JavaScript 胶水代码和类型声明文件。

--target web参数表示我们生成的 Wasm 模块是用于 Web 环境的。

编译完成后，项目目录下会生成一个pkg目录，里面包含了编译后的文件：

pkg
├── hello_wasm_bg.wasm  // WebAssembly字节码文件
├── hello_wasm_bg.wasm.d.ts  // Wasm模块的类型声明文件（TypeScript）
├── hello_wasm.d.ts  // JavaScript调用接口的类型声明文件（TypeScript）
├── hello_wasm.js  // JavaScript调用接口文件，用于在JavaScript中调用Wasm模块
└── package.json  // 项目的元数据和依赖信息文件，支持通过npm发布或本地引用

其中，hello_wasm_bg.wasm是 WebAssembly 字节码文件，它包含了我们编写的 Rust 代码编译后的机器码，是在浏览器中实际执行的代码。

hello_wasm.js是 JavaScript 调用接口文件，它提供了在 JavaScript 中调用 Wasm 模块的方法，通过这个文件，可以在 JavaScript 中轻松地调用 Rust 编写的函数。

5.3 在JavaScript中调用

接下来，我们创建一个 HTML 页面来调用编译好的 Wasm 模块。在项目根目录下创建一个index.html文件，编写以下代码：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Rust Wasm Hello World</title>
    </head>

    <body>
        <script type="module">
            // 导入Wasm模块的初始化函数和导出的greet函数
            import init, { greet } from "./pkg/hello_wasm.js";

            // 初始化Wasm模块
            init().then(() => {
                // 调用Rust导出的greet函数，并传入参数"WebAssembly"
                const message = greet("WebAssembly");

                // 在控制台输出问候语
                console.log(message);
                // 也可以将问候语显示在页面上，例如创建一个段落元素并添加到页面中
                const p = document.createElement("p");
                p.textContent = message;
                document.body.appendChild(p);
            });
        </script>
    </body>
</html>

在这段 HTML 代码中，我们首先通过<script type="module">标签引入了pkg/hello_wasm.js文件，这是wasm-pack生成的 JavaScript 调用接口文件。

然后，我们调用init()函数来初始化 Wasm 模块，这个函数会加载并实例化hello_wasm_bg.wasm文件。

初始化完成后，我们调用greet('WebAssembly')函数，传入参数WebAssembly，并将返回的问候语字符串打印到控制台，同时也通过创建段落元素的方式将问候语显示在页面上。

5.4 运行项目

完成以上步骤后，我们就可以在浏览器中运行这个 Rust+Wasm 的 “Hello World” 程序了。

在项目根目录下创建server.js文件，用于启动一个web服务，实现在浏览器中访问页面：

const http = require("http");
const fs = require("fs");
const path = require("path");
const url = require("url");

const port = 3000;
const publicDir = path.join(__dirname, "/");

// 定义MIME类型映射
const mimeTypes = {
  ".html": "text/html",
  ".js": "application/javascript",
  ".wasm": "application/wasm",
  ".json": "application/json",
  ".css": "text/css",
  ".png": "image/png",
  ".jpg": "image/jpeg",
};

const server = http.createServer((req, res) => {
  // 解析请求路径
  const parsedUrl = url.parse(req.url);
  let pathname = path.normalize(parsedUrl.pathname);

  // 处理根路径
  if (pathname === "/") {
    pathname = "/index.html";
  }

  // 构造完整文件路径
  const filePath = path.join(publicDir, pathname);

  // 安全检查：防止目录遍历
  if (!filePath.startsWith(publicDir)) {
    res.writeHead(403);
    res.end("Forbidden");
    return;
  }

  // 获取文件扩展名并确定Content-Type
  const ext = path.extname(filePath);
  const contentType = mimeTypes[ext] || "application/octet-stream";

  // 读取文件
  fs.readFile(filePath, (err, data) => {
    if (err) {
      if (err.code === "ENOENT") {
        res.writeHead(404, { "Content-Type": "text/plain" });
        res.end("Not Found");
      } else {
        res.writeHead(500);
        res.end("Internal Server Error");
      }
    } else {
      res.writeHead(200, { "Content-Type": contentType });
      res.end(data);
    }
  });
});

server.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});

然后在项目根目录下的终端中执行以下命令：

node server.js

终端提示：

Server running at http://localhost:3000/

打开浏览器，访问http://localhost:3000/，你会在浏览器的控制台中看到输出的问候语，同时页面上也会显示出问候语：

Hello, WebAssembly! Welcome to the world of Rust and WebAssembly.

这样，我们就成功地在浏览器中运行了一个用 Rust 编写的 “Hello, World!” 程序，

通过这个简单的示例，我们展示了 Rust 与 WebAssembly 的基本开发流程和强大能力。

六、总结：开启 Rust+Wasm 的无限可能

通过本文，我们初探了 WebAssembly 的核心优势、Rust 作为最佳搭档的底层逻辑，以及如何用rustup、cargo、wasm-pack快速搭建开发环境并运行第一个程序。Rust 的安全、高性能与 Wasm 的跨平台特性结合，正在重塑 Web 开发的技术栈 —— 从高性能计算到全平台应用，这条技术路径已逐渐成熟。