luxbe/vite-plugin-wasm-pack

🦀 Vite plugin for rust wasm-pack

🦀 vite-plugin-wasm-pack

🦀 Vite plugin for rust wasm-pack, it's simple.

Quick start

Make sure wasm-pack installed correctly.

Clone this repo or download the zip file, extract the example folder.

example
  |
  |-- my-crate       # rust project folder, there is a Cargo.toml in it
  |-- src            # front end source code
  |   |-- index.ts   # entry point
  |-- index.html     # html entry
  |-- vite.config.ts # vite config file
  |__ package.json   # npm config file

Install npm develop dependencies, in example folder run:

yarn install
# or
# npm install

After that you can build rust project to WebAassembly by using wasm-pack.

wasm-pack build ./my-crate --target web

Now the my-crate module is ready, start vite dev server.

yarn dev
or
#npm run dev

Done, if below is showing.

  vite v2.3.8 dev server running at:

  > Local: http://localhost:3000/

  ready in 169ms.

---

Install manually

yarn add vite vite-plugin-wasm-pack -D
# or
# npm i vite vite-plugin-wasm-pack vite -D

Usage

Add this plugin to vite.config.ts

import { defineConfig } from 'vite';
import wasmPack from 'vite-plugin-wasm-pack';

export default defineConfig({
  build: {
    minify: false
  },
  // pass your crate path to the plugin
  plugins: [wasmPack('./my-crate')]
});

Add script to package.json

"scripts": {
  "dev": "vite",
  "build": "vite build"
}

⚠ Don't forget to build your wasm-pack crate first!

wasm-pack build ./my-crate --target web

Tips: you can add a wasm script to package.json like this:

"scripts": {
    "wasm": "wasm-pack build ./my-crate --target web",
    "dev": "yarn wasm && vite",
    "build": "vite build"
}

Then, run:

yarn dev

This will start dev server, and install my-crate that you built earlier.

Examples

• Quick starter is in ./example folder.
• Game of life [source] [demo]

License

MIT, see the license file