Rust编译的 wasm 在 Vite 中使用

Rust 编译为 wasm

1. 下载安装 rust 相关环境: rustup(rust的版本管理工具)、cargo(rust 依赖管理工具)

   curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh

2. 下载安装 wasm 相关环境：wasm-pack(负责将 rust 编译为 wasm)、cargo-generate(wasm 项目脚手架)。

   curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
   
   # 要求有OpenSSL环境
   cargo install cargo-generate
   # 如果没有OpenSSL环境可以使用下面的命令安装
   cargo install cargo-generate --features vendored-openssl

3. 创建一个 wasm 项目

   cargo generate --git https://github.com/rustwasm/wasm-pack-template

4. rust 文件内容如下：

   use wasm_bindgen::prelude::*;
   
   #[wasm_bindgen]
   extern {
       fn alert(s: &str);
   }
   
   #[wasm_bindgen]
   pub fn greet() {
       alert("Hello, wasm-game-of-life!");
   }

5. 编译为 wasm

   wasm-pack build --target web

6. 编译产物在 pkg 目录下

Vite 中使用 wasm

1. 安装 vite-plugin-wasm 插件并配置

   import wasm from "vite-plugin-wasm";
   
   export default defineConfig({
     plugins: [
       wasm(),
     ]
   });

2. 使用方式一：直接将 pkg 目录下的 wasm 文件和胶水层 js 文件拷贝到项目的 wasm 目录下

   import init, { greet } from "./pkg/wasm_example.js";
   
   async function run() {
     await init(); // 初始化 wasm，这里会返回 wasm 对象，也可以通过 wasm对象获取到导出的函数和wasm.memory等
   
     greet();
   }
   
   run();

3. 使用方式二：pkg 其实是一个npm包，可以直接发布至内网并通过 npm 安装使用, 但此时需要配置 optimizeDeps 选项（ 支持 tinyglobby 语法 ）避免 wasm 被优化

   import wasm from "vite-plugin-wasm";
   
   export default defineConfig({
     plugins: [
       wasm(),
     ]，
     optimizeDeps: { // [!code ++]
       // wasm_example 是 wasm 的 npm 包名//
       exclude: ['wasm_example']  // [!code ++]
     } // [!code ++]
   });