本文来自 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";
这显然是不能符合我们的需求的,