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

在编写 JavaScript 时，有时调用 Rust 代码会很有用。例如，可能存在一个已经用 Rust 实现的复杂算法，你想重用它，或者一些 Rust 代码可能比任何 JS 实现运行得更快、内存效率更高。

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

概述

wasmbuild 是一个 CLI 工具，它使用 wasm-bindgen 生成用于调用 Rust crate 的粘合代码。生成的输出可以通过 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 crate，以及一个示例函数

// 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 上开箱即用。

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

这从 https://github.com/denoland/wasmbuild_example 仓库导入了上面生成的代码，实例化 Wasm 模块以获取 add 函数，然后启动一个 Web 服务器，该服务器响应每个请求，并返回 1 和 2 相加的结果。

通常，对于 Deno Deploy，你会希望使用 Git 集成来部署此代码。请注意，URL 部署目前不适用于 wasmbuild 的生成输出，因为 .wasm 文件不属于模块图。一旦 Wasm 模块可以导入，这将得到修复，所以如果你有兴趣，请关注 issue #2552 以获取更新。