# wasm-vite开发模板

**Repository Path**: ba/wasm-vite-template

## Basic Information

- **Project Name**: wasm-vite开发模板
- **Description**: 使用vite架构进行wasm开发的一个模板，便于快速构建vite架构打包的wasm应用，使用vanilla-ts架构（这是个梗，自行了解）
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-07-07
- **Last Updated**: 2021-07-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# About this template

[参考幕布](https://mubu.com/explore/3li3uyXet9o)

This is a template for building `wasm` project with `vite` framework using `ts/vanilla`.
There has already been templates like that for using `wasm` in `vite/vue-ts` framework.
But according to some demand, it's not convenient to `vue` framework in a project.
So I made this template for people who meet the similar situations.

see those references for more information...
- [vite.js guide](https://vitejs.dev/guide/)
- [mozilla rust wasm guide](https://developer.mozilla.org/en-US/docs/WebAssembly/Rust_to_wasm)

### First: clone this repository

```bash
git clone git@github.com:cmistories/wasm-vite-template.git
```

### Then: replace those with your own infos

Those infos in those files and file-names are just for example.
Don't forget to replace those with your own info when developing.
Such as: `your_wasm_app_name` `yourname@example.com` in the **`wasm/Cargo.toml`** file.

### `npm` scripts

```bash
# following commands extends from vite framework
npm run dev   # serve in dev mode
npm run build # build the project
npm run serve # serve the build up project

# script for building wasm
npm run wasm  # compile wasm into a npm package
```
Note that this command is **specially** for the `./wasm` folder.
If you've replaced the folder name,
don't forget to replace the npm script in **`package.json`** either.
Like that:

```json
"script": {
    "wasm": "cargo install wasm-pack && wasm-pack build ./the_path/ --target web"
}
```

The `cargo install wasm-pack` command will check and install `wasm-pack` for you.
But you need to make sure that you've already
installed `rust` including `cargo` on your device.
If you have already installed `wasm-pack` on your device,
the `cargo install wasm-pack` command can be omitted here.

---

## When building `wasm`

> Note that this method might contain mistakes.
> This is not an official guide.
> This is just a tricks I've tried and succeed while building some projects.
> This is for your reference only, please be careful.

> And attention that all those following steps are only necessary
> when building the project into the output directory
> (such as the `dist` folder here).
> It's **not necessary** to do those **when developing**.
> Just run the `npm run dev` script when developing.

`npm run build` command,
which is provided by raw `vite` framework,
still cannot build `wasm` into the final output yet.
There are still some things need to be done manually.
The following steps tells how to do that.

### **First: copy file**

Copy the **`your_wasm_app_name_bg.wasm`** file
into the output **`dist/assets`** folder:

``` bash
# tree structure of the output folder
+ (project root)
|   + dist
|   |-  + assets # <- copy the xxx_bg.wasm file into this folder
|   |   |-- * favicon.hashcode123.svg
|   |   |-- * index.hashcode123.js
|   |   |-- * index.hashcode123.css
|   |   |-- * vendor.hashcode123.js
|   |-- * index.html
```
> Note that the `"hashcode123"` is just an example.
> There will be a hash code in the names
> of the output files when building via `vite`.
> For example: **`index.8dfe30ca.js`**.

### **Then: replace path**

> Note that there might be two output `.js` files:
> **`index.hashcode123.js`** and **`vendor.hashcode123.js`**.
> We only need to do those in the **`index.hashcode123.js`** file,
> which might also be much smaller in file size.

There will be one or more than one code string like that in the **`index.hashcode123.js`** file:
```js
r=new URL("your_wasm_app_name_bg.wasm",e.url)
```

After copying the **`your_wasm_app_name_bg.wasm`** file
into the **`dist/assets`** folder,
replace all code string like this into:
```js
r="/assets/your_wasm_app_name_bg.wasm"
```

After this process, the output file will be able to call things from wasm
when running `npm run serve` or directly open **`index.html`** file in browser.