vite - WebAssembly入门

1. 初始化 vite 项目

1.1 安装 nvm（可选）

brew update
brew install nvm

在 ~/.zshrc 添加

export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh

执行如下命令

source ~/.zshrc

1.2 安装 node

nvm install node

nvm ls                 
->      v21.7.2system
default -> node (-> v21.7.2)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v21.7.2) (default)
stable -> 21.7 (-> v21.7.2) (default)
...

1.3 根据模版初始化项目

npm create vite@latest my-vue-app -- --template vue-tscd my-vue-app
npm install
npm run dev

2. 初始化 rust 环境

2.1 安装 rust

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

2.2 安装 wasm-pack

cargo install wasm-pack

wasm-pack -h
📦 ✨  pack and publish your wasm!Usage: wasm-pack [OPTIONS] <COMMAND>Commands:build    🏗️  build your npm package!pack     🍱  create a tar of your npm package but don't publish!new      🐑 create a new project with a templatepublish  🎆  pack up your npm package and publish!login    👤  Add an npm registry user account! (aliases: adduser, add-user)test     👩‍🔬  test your wasm!help     Print this message or the help of the given subcommand(s)Options:-v, --verbose...             Log verbosity is based off the number of v used-q, --quiet                  No output printed to stdout--log-level <LOG_LEVEL>  The maximum level of messages that should be logged by wasm-pack. [possible values: info, warn, error] [default: info]-h, --help                   Print help-V, --version                Print version

2.3 安装 rsw

cargo install rsw

rsw -h              
rsw 0.8.0
wasm-pack based build toolUSAGE:rsw <SUBCOMMAND>OPTIONS:-h, --help       Print help information-V, --version    Print version informationSUBCOMMANDS:build    build rust crates, useful for shipping to productionclean    clean - `npm link` and `wasm-pack build`help     Print this message or the help of the given subcommand(s)init     generate `rsw.toml` configuration filenew      quickly generate a crate with `wasm-pack new`, or set a custom template in`rsw.toml [new]`watch    automatically rebuilding local changes, useful for development and debugging

2.4 初始化 rsw 配置

rsw init

执行成功后会在当前目录生成 rsw.toml 文件

2.5 新建 wasm 项目

rsw new @rsw/hello

tree @rsw                
@rsw
└── hello├── Cargo.toml├── LICENSE_APACHE├── LICENSE_MIT├── README.md├── src│   ├── lib.rs│   └── utils.rs└── tests└── web.rs

2.6 修改配置文件

在 rws.toml 文件中添加如下配置

[[crates]]
name = "@rsw/hello"
link = true

2.7 构建项目

rsw build

[rsw::INFO] 🚧  wasm-pack build @rsw/hello --out-dir pkg --target web --release --scope rsw
[INFO]: 🎯  Checking for the Wasm target...
[INFO]: 🌀  Compiling to Wasm...Finished release [optimized] target(s) in 0.21s
[INFO]: ⬇️  Installing wasm-bindgen...
[INFO]: Optimizing wasm binaries with `wasm-opt`...
[INFO]: Optional fields missing from Cargo.toml: 'description', 'repository', and 'license'. These are not necessary, but recommended
[INFO]: ✨   Done in 1.34s
[INFO]: 📦   Your wasm pkg is ready to publish at @rsw/hello/pkg.[✨ rsw::build] @rsw/hello "0.1.0"◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻◼◻up to date, audited 292 packages in 7s69 packages are looking for fundingrun `npm fund` for detailsfound 0 vulnerabilities
[🔗 rsw::link] npm link ./@rsw/hello/pkg

3. vite 项目使用 wasm 构建产物

修改 ./src/Components/HelloWorld.vue

<script setup lang="ts">
import { ref } from 'vue'
import init, { greet } from "@rsw/hello";defineProps<{ msg: string }>()const count = ref(0)const click = function () {count.value = count.value + 1init().then(() => {greet();});
}
</script><template><h1>{{ msg }}</h1><div class="card"><button type="button" @click="click">count is {{ count }}</button><p>Edit<code>components/HelloWorld.vue</code> to test HMR</p></div><p>Check out<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite starter</p><p>Install<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>in your IDE for a better DX</p><p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template><style scoped>
.read-the-docs {color: #888;
}
</style>