学习rust 构建 WebAssembly 的官方教程，教程中是使用 webpack 作为 Javascript 打包器和开发服务器的（注意，使用 Rust 和 WebAssembly 不要求 webpack 或者其他类似工具，只是为了开发方便）。但不太喜欢 webpack 配置太过繁琐，而以前常用的 Parcel 对 WebAssembly 支持不太友好，而 Vite 正好可以满足需要，所以使用了Vite， 下面记录的配置。

在学习一段时间zig来构建wasm后，发现 zig 语言本身用起来的是很舒服，可也有些问题，主要还是语言还没有发布1.0版本，语言生态 环境还不够完善，就连 build.zig 构建 API 也在频繁变动中，Github.com 上的相关包在 zig 最新版本也无法顺利通过构建。其他的相关包，就更少了。 相比于此， rust 社区在2018开始就将 WebAssembly 作为，注重改善编程体验几个不同领域之一（其他还有Command Line、Networking， Embedded）。用 rust 来开发 WebAssembly 过程要舒适非常多，相关的生态也非常完备，社区活跃度也很高。

wasm-pack build 命令支持多个 --target 参数，这里选择的是 web, 输出可以在浏览器中作为ES模块原始导入的JS，其他几个参数可以相见官方文档Deploying Rust and WebAssembly。

Vite 5.0 版本对 WebAssembly 的 ES 模块集成提案 尚未支持。 请使用 vite-plugin-wasm 或其他社区上的插件来处理。

package.json 添加 wasm package

将构建出来的本地wasm package 添加到 package.json 中：

1
2
3

  "dependencies": {
        "wasm-game-of-life": "file:../pkg"
    },

添加 vite 依赖

1

yarn add --dev vite@5.0.0

新增 vite 配置项

根目录下添加配置文件vite.config.js:

1
2
3
4
5

import { defineConfig } from 'vite'
import wasm from "vite-plugin-wasm";
import topLevelAwait from "vite-plugin-top-level-await";

export default defineConfig({});

添加 vite-plugin-wasm 插件

1
2

yarn add --dev vite-plugin-wasm
yarn add --dev vite-plugin-top-level-await
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import wasm from "vite-plugin-wasm";
import topLevelAwait from "vite-plugin-top-level-await";

export default defineConfig({
    plugins: [
        wasm(),
        topLevelAwait()
    ],
    optimizeDeps: {
        exclude: ["wasm-game-of-life"],
    },
});

完整代码

完成代码放在Github。