开发语言基于 Rust 的 Wasm 开发探索与实践

一、参考资料

参考官方技术文档 https://rustwasm.github.io/

二、安装脚手架 cargo-generate

# cargo-generate 用于快速生成 WASM 项目的脚手架（类似 create-react-app）

cargo install cargo-generate

三、下载安装 wasm-pack.exe 打包工具

双击安装之后在 Cargo 根路径下多出一个 wasm-pack.exe

四、创建一个 WASM 项目

# 使用模板生成

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

# 使用文档 GitHub - cargo-generate/cargo-generate: cargo, make me a project

# templates on github

cargo generate --git https://github.com/username-on-github/mytemplate.git

# or just

cargo generate username-on-github/mytemplate

# templates on other git platforms

cargo generate gl:username-on-gitlab/mytemplate

cargo generate bb:username-on-bitbucket/mytemplate

# this scheme is also available for github

cargo generate gh:username-on-github/mytemplate

# for a complete list of arguments and options

cargo help generate

在项目目录下运行 wasm-pack build 命令，即可编译出 WASM 模块。wasm-pack 会在项目的 pkg 目录下生成 .wasm 文件和相关的 js 胶水代码。

wasm-pack build --target web

五、创建一个Vue项目

# VueCli，弃用

# vue create -m cnpm webdemo

# 使用 Vite

cnpm create vite@latest

六、引用 wasm 模块

金钥匙