rust wasm 最简单示例
rust wasm 最简单示例
rust的wasm使用wasm-pack来build，有很多选项和target用于不同的目的，本文描述一个最简单的示例，不使用webpack和npm，让你可以快速入门和了解。
安装rust
rust开发环境可参考网上的教程https://www.runoob.com/rust/rust-setup.html，我是在windows下安装完成，使用vscode作为代码编辑器。
wasm-pack
vscode里新建终端，输入下面的指令安装(可能需要VPN)
cargo install wasm-bindgen-cli
安装完成后看一下版本号，
wasm-pack -V
注意V是大写，如果看到版本号，说明安装成功，否则可能需要安装一下https://rustwasm.github.io/wasm-pack/installer/
新建wasm工程
vscode终端进入你要创建工程目录的地方执行下面的代码创建项目文件夹名并在里面创建相关的文件
wasm-pack new 你的项目名称
如果提示无法将“wasm-pack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称，安装一下https://rustwasm.github.io/wasm-pack/installer/
终端里通过cd 项目名称，进入上面创建的文件夹后执行
wasm-pack build --target web
第一个命令会引用rust在git上的一个wasm模板来创建wasm工程，通过第二个命令编译为本地js可以直接使用的文件并自动创建pkg和target文件夹放置相关文件。在src目录下的lib.rs里可以看到示例有一个greet方法供页面调用，同时这个方法里又调用了页面的alert方法，以此来演示页面和wasm互调。
新建index.html
通过vscode须工程目录下新建index.html文件，并写入调用代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>wasm demo</title>
</head>
<body>
<script type="module">
import { default as wasm, greet } from "./pkg/你的项目名.js";
wasm().then((module) => {
// 调用wasm里的方法
greet();
});
</script>
</body>
</html>
运行
通过vscode的Live Server插件或其他的web服务端为index.html提供web服务，之后在浏览器里打开即可。
参考
https://blog.csdn.net/wangmarkqi/article/details/109378685