Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

vite-plugin-rsw

lencx359MIT2.0.11TypeScript support: included

wasm-pack plugin for Vite

rsw, wasm, vite, plugin, wasm-pack, vite-plugin, webAssembly

readme

vite-plugin-rsw

wasm-pack plugin for Vite

npm npm downloads vite version chat

awesome-rsw Rust WebAssembly

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": "rsw watch & vite",
+   "build": "rsw build && tsc && vite build",
+   "rsw": "rsw"
}

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

Start dev server

# rsw watch & vite
yarn dev

Step 6

Deploy

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!

# 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

微信

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

wasm-wechat-qrcode fzj-qrcode

License

MIT License © 2021 lencx

changelog

2.0.8 (2022-06-27)

  • fix: reload

    2.0.0 (2022-02-27)

  • a major upgrade based on rsw-rs

1.10.0 (2021-10-02)

feature

1.9.1 (2021-08-24)

fix

1.9.0 (2021-08-22)

1.8.0 (2021-07-13)

  • remove replace: Vite v2.4.x support new URL(url, import.meta.url)

1.7.0 (2021-07-09)

  • <input checked="" disabled="" type="checkbox"> rsw options
    • cli
    • root
    • unLinks
    • crates
  • <input checked="" disabled="" type="checkbox"> startup optimization
  • <input checked="" disabled="" type="checkbox"> enable debug mode
  • <input checked="" disabled="" type="checkbox"> friendly error message
  • <input checked="" disabled="" type="checkbox"> automatically generate template
  • <input checked="" disabled="" type="checkbox"> multiple rust crate