vite-plugin-rsw

wasm-pack plugin for Vite

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

rsw.toml options

1. Initial rsw.toml

   # yarn rsw -h
   yarn rsw init

2. Generate rust crate

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

   yarn rsw new rsw-hello

3. 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

1. Run rsw watch

   # rust crates - automatic build
   # ⚠️ Note: Do not exit the process after the command has started.
   yarn rsw watch

2. 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

• Demo - 🎲 Learning WebAssembly
• Oh My Box - 🔮 Development toolbox, and more...

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