vite-plugin-rsw
vite-plugin-rsw copied to clipboard
🦞 wasm-pack plugin for Vite
vite-plugin-rsw
wasm-pack plugin for Vite
rsw version | vite version |
---|---|
>= 2.0.0 |
>= 2.8.0 |
>= 1.8.0 |
>= 2.4.0 |
1.7.0 |
2.0.0 ~ 2.3.8 |
Features
-
HMR
-
Friendly error message
- browser and terminal
Pre-installed
- rust
- nodejs
- wasm-pack
-
rsw-rs:
rsw = rs(rust) → w(wasm)
- A command-line tool for automatically rebuilding local changes, based on the wasm-pack implementation.
Usage
Step 1
Install rsw
cargo install rsw
Install vite-plugin-rsw
# With NPM:
npm i -D vite-plugin-rsw
# With Yarn:
yarn add -D vite-plugin-rsw
Step 2
Edit vite.config.ts
import { defineConfig } from 'vite';
import ViteRsw from 'vite-plugin-rsw';
export default defineConfig({
plugins: [
ViteRsw(),
],
})
Step 3
Edit package.json
"scripts": {
"dev": "vite",
+ "rsw": "rsw",
+ "build": "rsw build && tsc && vite build",
}
Step 4
-
Initial rsw.toml
# yarn rsw -h yarn rsw init
-
Generate rust crate
# rsw.toml [new] # using: wasm-pack | rsw | user, default is `wasm-pack` using = "wasm-pack"
yarn rsw new rsw-hello
-
Edit rsw.toml
# link type: npm | yarn | pnpm, default is `npm` cli = "npm" [[crates]] name = "rsw-hello" # <npm|yarn|pnpm> link # ⚠️ Note: must be set to `true`, default is `false` link = true
Step 5
-
Run rsw watch
# rust crates - automatic build # ⚠️ Note: Do not exit the process after the command has started. yarn rsw watch
-
Run dev
# Front-end: start dev server yarn dev
⚠️ Note: Open two terminal windows, execute yarn rsw watch
in the first and yarn dev
in the second. The order of execution is important, do not close the first window!
Step 6
Deploy
yarn build
Example
Related
create-mpl - ⚡️ Create a project in seconds!
# Quickly initialize a wasm project
# npm 6.x
npm init mpl@latest my-app --type wasm
# npm 7+, extra double-dash is needed:
npm init mpl@latest my-app -- --type wasm
微信
群二维码已过期,关注公众号《浮之静》,发送“进群”,我将拉你进群一起学习。
License
MIT License © 2021 lencx