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

``` shell
cargo install rsw
```

Install vite-plugin-rsw

``` shell
# With NPM:
npm i -D vite-plugin-rsw
# With Yarn:
yarn add -D vite-plugin-rsw
```

Step 2

Edit vite.config.ts

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

Step 3

Edit package.json

recommend to use concurrently instead of & to run command concurrently, because it can't handle system signal properly, see rwasm/rsw-rs#7

``` js
"scripts": {
+ "dev": "concurrently \"rsw watch\" \"vite\"",
+ "build": "rsw build && tsc && vite build",
+ "rsw": "rsw"
}
```

Step 4

rsw.toml options

Initial rsw.toml

``` shell
# yarn rsw -h
yarn rsw init
```

Generate rust crate

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

``` shell
yarn rsw new rsw-hello
```

Edit rsw.toml

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

Start dev server

``` shell
# rsw watch & vite
yarn dev
```

Step 6

Deploy

``` shell
yarn build
```

Example

WA+ - 🤩Making a web page more like a desktop application is just the beginning, the possibilities are unlimited, up to your imagination!

Demo - 🎲Learning WebAssembly

Oh My Box - 🔮Development toolbox, and more...

create-mpl - ⚡️Create a project in seconds!

``` shell
# 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
```

微信

群二维码已过期，关注公众号《浮之静》，发送“进群”，我将拉你进群一起学习。