安装rust
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source "$HOME/.cargo/env"
替换tuna源
echo $HOME/.cargo/,查看cargo的安装路径,然后在该路径下添加config文件(没用就用touch config创建),config文件内容如下:
[source.crates-io]
replace-with = 'tuna'
[source.tuna]
registry = "https://mirrors.tuna.tsinghua.edu.cn/git/crates.io-index.git"
检验是否安装成功
rustc -V
cargo -V
安装一下rust下的wasm开发和打包相关的环境
安装编译打包工具
cargo install wasm-pack
安装脚手架工具
cargo install cargo-generate
安装失败用手动下载的方式:
安装包地址: github.com/cargo-gener…, mac电脑直接下载x86_64 darwin(如:cargo-generate-v0.21.1-x86_64-apple-darwin)
解压后的cargo-generate Unix可执行文件拷贝放入 ~/.cargo/bin/ 中
通过wasm-pack-template创建rust模板项目
cargo generate --git https://github.com/rustwasm/wasm-pack-template
如果报错,手动双击执行一下cargo-generate,如果报权限问题,系统阻止打开generate,那么就和mac打开其他非官方的程序一样到安全那里点仍然打开就允许打开了,然后再重新执行上面命令。
创建前端调试页面
先在项目下构建wasm
wasm-pack build
构建后的内容在pkg下,包含js胶水代码和wasm文件
生成调试页面
npm init wasm-app www
cd www
npm install
npm run start
npm install报错,可能是因为node版本过高,参考stackoverflow.com/questions/6…
告诉 Node 使用旧版 OpenSSL 提供程序
在类 Unix 上(Linux、macOS、Git bash 等):
export NODE_OPTIONS=--openssl-legacy-provider
修改index.js引用自己的wasm查看效果
// import * as wasm from "hello-wasm-pack";
import * as wasm from "../pkg";
wasm.greet();