当前位置：网站首页>Rust 入门指南（用 WASM 开发第一个 Web 页面）

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

2022-08-04 10:06:00 【InfoQ】

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&nbsp;install&nbsp;cargo-generate

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

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

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

cargo&nbsp;generate&nbsp;--git&nbsp;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&nbsp;build&nbsp;--target&nbsp;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&nbsp;html>
<html>
&nbsp;&nbsp;<head>
&nbsp;&nbsp;&nbsp;&nbsp;<meta&nbsp;content=&quot;text/html;charset=utf-8&quot;&nbsp;http-equiv=&quot;Content-Type&quot;/>
&nbsp;&nbsp;</head>
&nbsp;&nbsp;<body>

&nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;type=&quot;module&quot;>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;import&nbsp;init,&nbsp;{&nbsp;greet&nbsp;}&nbsp;from&nbsp;'./pkg/testing.js';

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;async&nbsp;function&nbsp;run_wasm()&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;await&nbsp;init();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;greet();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;run_wasm();
&nbsp;&nbsp;&nbsp;&nbsp;</script>
&nbsp;&nbsp;</body>
</html>

运行

index.html

文件（这里使用的是snowpack，运行

snowpack dev

在工程目录下），

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

你会看到

greet()

函数调用的警报弹出：

修改 DOM

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

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

为此，请将 web-sys 依赖项添加到您的 

Cargo.toml

 文件中：

[dependencies.web-sys]
version&nbsp;=&nbsp;&quot;0.3.4&quot;
features&nbsp;=&nbsp;[
&nbsp;&nbsp;'Document',
&nbsp;&nbsp;'Element',
&nbsp;&nbsp;'HtmlElement',
&nbsp;&nbsp;'Node',
&nbsp;&nbsp;'Window',
]

现在我们必须添加一个函数，该函数使用

web-sys

 调用浏览器窗口，然后访问 DOM 并修改。

我们的带有新函数的 

lib.rs

 将如下所示：

如果您现在重新构建 crate（

wasm-pack build --target web

 可以使用GeekCode 加速编译），您将能够从您的 

index.html

 文件中导入 

add_heading

 函数：

<!DOCTYPE&nbsp;html>
<html>
&nbsp;&nbsp;<head>
&nbsp;&nbsp;&nbsp;&nbsp;<meta&nbsp;content=&quot;text/html;charset=utf-8&quot;&nbsp;http-equiv=&quot;Content-Type&quot;/>
&nbsp;&nbsp;</head>
&nbsp;&nbsp;<body>

&nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;type=&quot;module&quot;>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;import&nbsp;init,&nbsp;{&nbsp;greet,&nbsp;add_heading&nbsp;}&nbsp;from&nbsp;'./pkg/testing.js';

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;async&nbsp;function&nbsp;run_wasm()&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;await&nbsp;init();
&nbsp;//&nbsp;&nbsp;&nbsp;greet();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;add_heading();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;run_wasm();
&nbsp;&nbsp;&nbsp;&nbsp;</script>
&nbsp;&nbsp;</body>
</html>