xuek9900 / vite-plugin-wasm-pack

🦀 Vite plugin for rust 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.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

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

License

MIT, see the license file