🦀 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:

`bash
yarn install


or

npm install

`

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

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

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

`bash
yarn dev
or
#npm run dev
`

Done, if below is showing.

`bash
vite v2.6.5 dev server running at:

> Local: http://localhost:3000/

ready in 169ms.
`

---

Install manually

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

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

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

Add script to package.json

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

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

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

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

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

Then, run:

`bash
yarn dev
`

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

Use wasm-pack package installed via npm

If you want use a package from npm that built with wasm-pack, like this one test-npm-crate

you have to pass the package name to the second param of our plugin.

wasmPack(['./my-local-crate'],['test-npm-crate'])

full example is in ./npm-crate-example folder.

notice, we only support package build with --target web for now , if a package you use is built without --target web`, you should rebuild it.

like this example [[Photon-vite]](http://github.nshen.net/photon-vite/) [[source]](https://github.com/nshen/photon-vite)

Cache Problem

I'm not sure if anybody have met the problem that after modified your package, your package don't update.

That's becasue vite pre bundling your package, you can follow vite guide to solve the problem.

If you met the problem , or any problems. feel free to create an issue, let me see if I can do something to help you, thanks.

Examples

- Quick starter is in ./example folder.
- Game of life [[demo]](http://github.nshen.net/vite-wasm-game-of-life/dist/) [[source]](https://github.com/nshen/vite-wasm-game-of-life)
- Photon-vite [[demo]](http://github.nshen.net/photon-vite/) [[source]](https://github.com/nshen/photon-vite)

License

MIT, see the license file