wasmbuild - 在 Deno 和 Web 应用中使用 Rust

在编写 JavaScript 时，有时需要调用 Rust 代码。例如，可能存在已经用 Rust 实现的复杂算法，您希望重用它，或者一些 Rust 代码可能比任何 JS 实现运行得更快，并且更节省内存。

这篇博文介绍了一个名为 wasmbuild 的新工具，它简化了在 Deno 和浏览器中构建和使用 Rust 代码的过程。

概述

wasmbuild 是一个 CLI 工具，它使用 wasm-bindgen 为调用 Rust 命名空间生成粘合代码。生成的输出可以通过 WebAssembly 在 JavaScript 中轻松使用。wasmbuild 包含多种加载器策略、延迟实例化，并使用 wasm-opt 工具自动优化输出。

这与 wasm-bindgen-cli 和 wasm-pack 等工具非常相似，但它是一个您可以运行的脚本，而您或您的贡献者无需安装 Rust 工具链和 Deno 之外的全局 CLI 工具。此外，它专门针对 Deno 和浏览器。

示例 - 添加两个整数

在本例中，我们将从头开始创建用 Rust 编写的函数来添加两个数字，然后在 JavaScript 中使用该函数。

先决条件

开始之前

安装 Deno.
通过 Rustup 安装 Rust.

安装完成后，确保 deno -V、rustup -V 和 cargo -V 都能正常工作。

设置 Wasmbuild 和 Rust

打开终端，为您的项目创建一个新文件夹，并将您的当前工作目录更改为该项目的内部。

mkdir wasmbuild_example && cd wasmbuild_example

在该目录中，创建一个名为 deno.json 的文件，其中定义了用于 Deno 任务运行器的 wasmbuild 任务，如下所示

{
  "tasks": {
    "wasmbuild": "deno run -A https://deno.land/x/[email protected]/main.ts"
  }
}

现在，使用 new 参数运行该任务

deno task wasmbuild new

这将在您的项目的 rs_lib 文件夹中构建一个入门 Rust 命名空间，以及一个示例函数

// rs_lib/src/lib.rs
use wasm_bindgen::prelude::*;

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

#[cfg(test)]
mod tests {
  use super::*;

  #[test]
  fn it_works() {
    let result = add(1, 2);
    assert_eq!(result, 3);
  }
}

此文件定义了一个名为 add 的函数，它接受两个带符号整数并返回一个带符号整数。然后通过 #[wasm_bindgen] 属性将其导出以供 JavaScript 使用。

在本例中，我们将继续使用此生成的代码。

构建

要构建项目，请运行 wasmbuild 任务

deno task wasmbuild

这将创建一个 lib/rs_lib.generated.js 文件和 lib/rs_lib_bg.wasm 文件。

在 Deno 中使用它

要在 Deno 中使用它，请创建一个名为 main.js 的文件，其中包含以下代码

import { instantiate } from "./lib/rs_lib.generated.js";

const { add } = await instantiate();

console.log(add(1, 2));

这将实例化 Wasm 模块，调用其 add 函数，并将结果输出到控制台。

尝试运行以下命令

deno run main.js

输出应为 3。

在浏览器中使用它

创建一个非常基本的 index.html 文件，它引用我们之前创建的 main.js 文件

<html>
  <script type="module" src="main.js"></script>
</html>

现在启动一个 http 服务器，该服务器在当前工作目录中提供文件。我们可以通过运行以下命令轻松实现

$ deno run --allow-net --allow-read=. https://deno.land/[email protected]/http/file_server.ts
Listening on https://127.0.0.1:4507/

导航到显示的链接以提供 index.html 文件，然后打开浏览器控制台。您应该看到 3 记录到控制台。

在 Deno Deploy 中使用它

除了 Deno 的 CLI 和浏览器之外，wasmbuild 生成的代码还将在 Deno Deploy 上开箱即用。

这是一个使用上述示例的游乐场（点击“打开编辑器”查看实际效果）

这从 https://github.com/denoland/wasmbuild_example 仓库导入上述生成的代码，实例化 Wasm 模块以获取 add 函数，然后启动一个 web 服务器，该服务器对每个请求都使用添加 1 和 2 的结果进行响应。

通常情况下，使用 Deno Deploy 时，您需要使用 Git 集成来部署此代码。请注意，目前 URL 部署无法使用 wasmbuild 的生成输出，因为 .wasm 文件不是模块图的一部分。这将在 Wasm 模块可以导入后解决，因此如果您有兴趣，请关注问题 #2552 以获取更新。