🦀 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.6.5 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({
// pass your local 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.
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] [source]
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
License
MIT, see the license file
