vite - WebAssembly入门

1. 初始化 vite 项目

1.1 安装 nvm（可选）

brew update
brew install nvm

在 ~/.zshrc 添加

sh 复制代码

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

执行如下命令

sh 复制代码

source ~/.zshrc

1.2 安装 node

sh 复制代码

nvm install node

sh 复制代码

nvm ls                 
->      v21.7.2
         system
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 根据模版初始化项目

sh 复制代码

npm create vite@latest my-vue-app -- --template vue-ts

cd my-vue-app
npm install
npm run dev

2. 初始化 rust 环境

2.1 安装 rust

sh 复制代码

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

2.2 安装 wasm-pack

sh 复制代码

cargo install wasm-pack

sh 复制代码

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 template
  publish  🎆  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

sh 复制代码

cargo install rsw

sh 复制代码

rsw -h              
rsw 0.8.0
wasm-pack based build tool

USAGE:
    rsw <SUBCOMMAND>

OPTIONS:
    -h, --help       Print help information
    -V, --version    Print version information

SUBCOMMANDS:
    build    build rust crates, useful for shipping to production
    clean    clean - `npm link` and `wasm-pack build`
    help     Print this message or the help of the given subcommand(s)
    init     generate `rsw.toml` configuration file
    new      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 配置

sh 复制代码

rsw init

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

2.5 新建 wasm 项目

sh 复制代码

rsw new @rsw/hello

sh 复制代码

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

2.6 修改配置文件

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

sh 复制代码

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

2.7 构建项目

sh 复制代码

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 7s

69 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
[🔗 rsw::link] npm link ./@rsw/hello/pkg

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

修改 ./src/Components/HelloWorld.vue

rust 复制代码

<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 + 1
  init().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>

运行后效果如下

sh 复制代码

npm run dev