Rust 入门指南（用 WASM 开发第一个 Web 页面）

作者：王泰

2022 年 8 月 04 日
本文字数：1990 字
阅读完需：约 7 分钟

JavaScript 现在也可以拥有高性能和强类型特性了。

在 WASM 成为技术社区的主流技术之前，大部分的情况下，开发者还是更加愿意使用 JavaScript 和 TypeScript。现在，WebAssembly 已经为前端开发带来了前所未有的安全的性能优势。

WebAssembly (WASM) 使用一种二进制的语言，浏览器高效的把它转换成机器码，比 JavaScript 更有效率。在浏览器中就可以运行 C、Rust 和 Zig 等语言在浏览器执行代码。

WebAssembly 不止运行在浏览器端，事实上，WASM 也在链上构建智能合约生态，这意味着 WebAssembly 正在成为多种行业的重要参与者。

创建 WASM 最重要的原因就是速度，黑客甚至将恶意的 JavaScript 代码注入到容易受到攻击的网站，加载 WASM 编写的挖矿代码，这也证明了 WebAssembly 的性能完全不同 JavaScript。

今天我们介绍如何使用 Rust 构建简单的 WASM 并在 JavaScript 上运行。

设置

假设已经安装了 Rust 的基本设置，如果没有可以使用 https://GeekCode.cloud 云开发环境。

打开环境后，我们安装 cargo-generate

cargo install cargo-generate

复制代码

接下来安装工具 wasm-pack ，用来从 Rust 构建 WebAssembly：

curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

复制代码

一切准备就绪，接下来我们创建项目：

cargo generate --git https://github.com/rustwasm/wasm-pack-template

复制代码

这里的 project 名字，起名叫做“testing”。

在 JS 中导入第一个 Rust 函数

和其他 cargo 项目一样， src/lib.rs 文件将被编译为 WASM 的文件。 Cargo.toml 文件来管理依赖项、设置、元数据等。

打开lib.rs，让我们看看它的当前代码。

这是一个简单的模板，使用 wasm-bindingen 导入 JavaScript 的 alert 函数，然后定义（公共）greet 函数，供 JS 将来调用。

接下来做两件事：

将 rust 代码编译成 wasm
导入 wasm 并从 index.html 页面调用 greet 函数。

构建 Rust 代码生成 WASM

我们使用 wasm-pack 构建 WASM 时使用 --target web 标志。

在 crate 的目录中，运行以下命令：

wasm-pack build --target web

复制代码

如果使用 GeekCode 平台，这里可以使用加速编译：

这将在 ./pkg 文件夹中生成一些文件。在这些文件中，有一个 wasm 二进制文件 (testing_bg.wasm) 和一个 js 文件 (testing.js)，js 文件提供 API，用于在 JavaScript 中加载 WASM 函数。

运行 greet 方法

在项目的根目录下，创建一个 index.html 文件，然后导入 ./pkg/testing.js 文件。这将允许您初始化 wasm API 并调用 greet() 函数。 HTML 文件应如下所示：

<!DOCTYPE html><html>  <head>    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>  </head>  <body>
    <script type="module">      import init, { greet } from './pkg/testing.js';
      async function run_wasm() {          await init();          greet();      }
      run_wasm();    </script>  </body></html>

复制代码

运行index.html文件（这里使用的是 snowpack，运行snowpack dev在工程目录下），

如果用的是 GeekCode 平台，创建 Dev URL 用来访问 8080 端口

你会看到greet()函数调用的警报弹出：

修改 DOM

“
本节假定您已阅读上一节。

上面的部分提介绍了如何在浏览器中加载 Rust 所需的几乎所有内容。您可能还想知道如何直接从 Rust 修改 DOM。在本段中，我将快速向您展示如何操作。

为此，请将 web-sys 依赖项添加到您的 Cargo.toml 文件中：

[dependencies.web-sys]version = "0.3.4"features = [  'Document',  'Element',  'HtmlElement',  'Node',  'Window',]

复制代码

现在我们必须添加一个函数，该函数使用web-sys 调用浏览器窗口，然后访问 DOM 并修改。

我们的带有新函数的 lib.rs 将如下所示：

如果您现在重新构建 crate（wasm-pack build --target web 可以使用 GeekCode 加速编译），您将能够从您的 index.html 文件中导入 add_heading 函数：

<!DOCTYPE html><html>  <head>    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>  </head>  <body>
    <script type="module">      import init, { greet, add_heading } from './pkg/testing.js';
      async function run_wasm() {     await init(); //   greet();     add_heading();      }
      run_wasm();    </script>  </body></html>

复制代码

再次运行 HTML，将看到标题。

因为 WASM 相关的主题文章很多，本文将是一个新的系列的开始，主要是在讨论优化与 WebAssembly 接口的应用程序以更好地适应 wasm 线性内存模型。

希望这篇文章能帮助你开始使用 Rust 和 WASM，至少对尝试这项技术感到好奇。

Keep Rusty!

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/6bba20c269aa96f7f62d592a8】。

王泰

关注

还未添加个人签名 2011.07.21 加入

GeekCode.Cloud 创始人

发布

暂无评论

创作场景

Rust 入门指南 （用 WASM 开发第一个 Web 页面）

设置

在 JS 中导入第一个 Rust 函数

构建 Rust 代码生成 WASM

运行 greet 方法

修改 DOM

王泰

评论

Rust 入门指南（用 WASM 开发第一个 Web 页面）