面试题：Rust 与 WebAssembly 基础协作

编译 Rust 代码为 WebAssembly 的基本步骤：

初始化 Rust 项目：
- 使用 cargo new 命令创建一个新的 Rust 项目，例如 cargo new wasm_project，然后进入项目目录 cd wasm_project。
配置 Cargo.toml：
- 在 Cargo.toml 文件中添加 wasm - bindgen 依赖，它用于生成 JavaScript 胶水代码来调用 WebAssembly 模块。在 [dependencies] 部分添加：
```
wasm - bindgen = "0.2"
```
- 同时，指定 [package] 部分的 crate - type 为 ["cdylib"]，以告诉 Rust 编译器生成动态链接库格式，适用于 WebAssembly：
```
[package]
name = "wasm_project"
version = "0.1.0"
authors = ["Your Name <youremail@example.com>"]
edition = "2021"
crate - type = ["cdylib"]
```
编写 Rust 代码：
- 在 src/lib.rs 中编写你想要编译为 WebAssembly 的 Rust 代码。例如：
```
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}
```
- 这里使用 wasm_bindgen 宏来标记要暴露给 JavaScript 的函数。
安装 wasm - build - target：
- 运行 rustup target add wasm32 - unknown - unknown 命令，添加 WebAssembly 目标。
编译为 WebAssembly：
- 使用 cargo build --target wasm32 - unknown - unknown 命令编译项目。编译成功后，会在 target/wasm32 - unknown - unknown/debug 目录下生成 .wasm 文件，例如 wasm_project.wasm。
生成 JavaScript 胶水代码：
- 运行 wasm - bindgen target/wasm32 - unknown - unknown/debug/wasm_project.wasm --out - dir. 命令，wasm - bindgen 工具会生成 JavaScript 胶水代码，将 WebAssembly 函数包装成 JavaScript 可调用的形式，并将生成的文件输出到当前目录。

在 HTML 页面中引入并调用编译后的 WebAssembly 模块：

创建 HTML 文件：

创建一个 index.html 文件，例如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device - width, initial - scale = 1.0">
    <title>WebAssembly Rust Example</title>
</head>

<body>
    <script type="module">
        import init, { add } from './wasm_project.js';

        async function run() {
            await init();
            const result = add(2, 3);
            console.log('The result is:', result);
        }

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

</html>

引入和调用：
- 在 HTML 的 script 标签中，使用 import 语句引入 wasm - bindgen 生成的 JavaScript 文件（wasm_project.js）。
- init 函数用于初始化 WebAssembly 模块，必须在调用其他导出函数之前调用。
- 调用从 WebAssembly 模块导出的函数（如 add），并处理结果。
- 将 index.html、wasm_project.wasm 和 wasm_project.js 放在同一目录下，在支持 ES6 模块的浏览器中打开 index.html，即可看到调用 WebAssembly 函数的结果。

星途面试题库

面试题：Rust 与 WebAssembly 基础协作

知识考点

面试题答案

编译 Rust 代码为 WebAssembly 的基本步骤：

在 HTML 页面中引入并调用编译后的 WebAssembly 模块：