入门 Rust 开发 WebAssembly

本文来自 AirCloud 的知乎投稿：https://zhuanlan.zhihu.com/p/104299612

写在前面

可以用于开发 WebAssembly 的语言比较多，笔者之前也尝试过 AssemblyScript、C++、Rust，相对来说，使用 Rust 开发在开发效率和便捷性、包体积大小等方面还是有很大优势的，因此，笔者也建议使用 Rust 来作为 WebAssembly 的开发语言。

Rust 开发 WebAssembly 非常方便，实际上官方周边文档已经比较全面和友好了，而这篇文章主要有两个目的：

• 帮助大家快速上手：目前有些资料还是比较零散的，这里希望将各个资料中的一些东西串联起来，特别是开发者比较关心的入门开发、调试等各个过程。

• 帮助大家建立 Rust 开发 WebAssembly 的心智模型：由于使用 Rust 入门开发 WebAssembly 已经足够简单，官方实际上把很多内容进行了封装，比如 Rust 和 JS 交互的部分等，而本文对比较关键的各个部分原理也进行讲解，而不仅仅是如何开发，从而让大家对原理也有一个了解。

本文的目标读者:

• 对前端有一定经验，并且对 WebAssembly 感兴趣的同学

• 有 Rust 的开发经验，或对使用 Rust 开发 WebAssembly 感兴趣的同学

• 已经使用了 Rust 开发 WebAssembly，尚未深入，但是对整体原理感兴趣的同学

本文看后，读者可以基本掌握：

• 搭建一个简单的 Rust webassembly 开发环境

• 编写代码完成 Rust 和 js 的交互需求，并了解原理

• 调试和错误处理

Rust+WebAssembly 的能力

在开始开发之前，我们可以先大致了解下 Rust+webassembly 能干些什么：

• 可以使用 Rust std，可以使用 Rust 的大多数第三方库（部分涉及多线程的，可能会有一些问题，关于 webassembly 多线程后续会写文章单独进行讲解）。

• 可以调用几乎任何 JS 侧声明的方法，也可以暴露方法给 JS 调用。

• 可以和 JS 侧互相”传递“几乎任何的数据类型，包括但不限于基本的数字、字符串、对象、Dom对象等。

• 可以直接在 Rust 侧“操作”Dom，甚至已经出现了 Rust 版本的 react

起步开发

我们的第一个目标，肯定是希望能最快看到 hello-world，接下来我们需要一步步操作：
安装 wasm-pack，wasm-pack 是将 Rust 打包成 wasm 的命令行工具：

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

然后我们需要安装 cargo-generate，后续在样板代码生成的时候需要：

cargo install cargo-generate

接下来，我们需要建立一个项目，这里我们可以使用 create-wasm-app 这个工具，做前端开发的同学想必对这类 create-xx 应该比较熟悉了。

我们可以直接使用 npm init 目录来生成一个样板库，并安装依赖：

npm init wasm-app ./myRust && cd myRust && npm i

这个时候我们可以使用 npm start 来运行代码并且在浏览器访问了，这个时候，我们应该可以看到一个 alert 弹框。

不过当我们看入口代码发现，这个样板库中的 wasm 部分，是直接引入的一个 npm 包：

import * as wasm from "hello-wasm-pack";

这显然是不能符合我们的需求的，