Mac系统rust+WebAssembly环境搭建

243 阅读1分钟

安装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();