Vite Rsw 使用入门

一种 WASM 的使用方式

来源

https://github.com/rwasm/vite-plugin-rsw

这个方法要比手动改 vite.config.ts tsconfig.json 方便的多,感谢库作者

入门

0. Rust 换源

编辑 ~/.cargo/config

Terminal window
vi ~/.cargo/config

写入以下内容

Terminal window
[source.crates-io]
registry = "https://github.com/rust-lang/crates.io-index"
replace-with = 'ustc'
[source.ustc]
registry = "git://mirrors.ustc.edu.cn/crates.io-index"
[net]
git-fetch-with-cli = true

1. 安装依赖

首先需要安装好各种各样的 rust 依赖,此处全部使用 cargo 来安装

Terminal window
cargo install wasm-pack
cargo install rsw

2. 初始化一个 Web 项目

新建一个文件夹

Terminal window
mkdir vite-rsw-test && cd vite-rsw-test

初始化 pnpm

Terminal window
pnpm init

安装 vite 和 vite-plugin-rsw

Terminal window
pnpm i vite
pnpm i vite-plugin-rsw

初始化 git

Terminal window
git init

3. 配置 Web 项目

新建 vite.config.ts,编写官网给的内容

import { defineConfig } from 'vite'
import ViteRsw from 'vite-plugin-rsw'
export default defineConfig({
plugins: [
ViteRsw(),
],
})

编辑 package.json

{
"scripts": {
"dev": "vite",
"watch": "rsw watch",
"rsw": "rsw",
"build": "rsw build && pnpm fe:build",
"fe:build": "tsc && vite build"
}
}

4. 初始化 Rust 项目

初始化 rsw.toml

Terminal window
rsw init

生成 rust crate

rsw.toml
[new]
# using: wasm-pack | rsw | user, default is `wasm-pack`
using = "wasm-pack"
Terminal window
rsw new rsw-hello

这一步需要在 git init 之后才能成功执行,因为 git fetch 需要当前为一个 git 仓库

编辑 rsw.toml

# link type: npm | yarn | pnpm, default is `npm`
cli = "pnpm"
[[crates]]
name = "rsw-hello"
# <npm|yarn|pnpm> link
# ⚠️ Note: must be set to `true`, default is `false`
link = true

5. 编写 Web 基本部件

index.html 部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module" src="/src/main.ts"></script>
<div id="app"></div>
</body>
</html>

/src/main.ts 部分

import init, { greet } from 'rsw-hello'
init().then(() => {
greet()
})

6. 启动

启动 Rsw 的监看

Terminal window
pnpm run watch

启动 vite 前端项目

Terminal window
pnpm run dev
注意

两个命令行需要分别开启,因为上面一个是监看 Rust 项目的,下面那个是监听 vite 前端项目的

7. 补充

对于需要访问内存的操作,根据教程尝试了下面的方法,但是不行。这样做在 DOM 中仍然会报错,说没有 memory 这个模块作为导出。

import { memory } from 'rsw-hello/rsw_hello_bg.wasm'

经过翻阅 lencx 的源码,发现可以这么做

import init from 'rsw-hello'
const wasmInstance = await init()
const memory = wasmInstance.memory

vite 官方文档的 WebAssembly 给出了一部分样例,可以按照官方文档的方案来引入。

import init from './example.wasm?init'
init().then((instance) => {
instance.exports.test()
})
#vite #wasm