Rust 编译为 wasm
下载安装 rust 相关环境:
rustup
(rust的版本管理工具)、cargo
(rust 依赖管理工具)shell(linux|mac)curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh
下载安装 wasm 相关环境:
wasm-pack
(负责将 rust 编译为 wasm)、cargo-generate
(wasm 项目脚手架)。shell(linux|mac)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
创建一个 wasm 项目
shellcargo generate --git https://github.com/rustwasm/wasm-pack-template
rust 文件内容如下:
rustuse wasm_bindgen::prelude::*; #[wasm_bindgen] extern { fn alert(s: &str); } #[wasm_bindgen] pub fn greet() { alert("Hello, wasm-game-of-life!"); }
编译为 wasm
shellwasm-pack build --target web
编译产物在
pkg
目录下
Vite 中使用 wasm
安装
vite-plugin-wasm
插件并配置vite.config.jsimport wasm from "vite-plugin-wasm"; export default defineConfig({ plugins: [ wasm(), ] });
使用方式一:直接将 pkg 目录下的 wasm 文件和胶水层 js 文件拷贝到项目的 wasm 目录下
javascriptimport init, { greet } from "./pkg/wasm_example.js"; async function run() { await init(); // 初始化 wasm,这里会返回 wasm 对象,也可以通过 wasm对象获取到导出的函数和wasm.memory等 greet(); } run();
使用方式二:pkg 其实是一个npm包,可以直接发布至内网并通过 npm 安装使用, 但此时需要配置 optimizeDeps 选项( 支持 tinyglobby 语法 )避免 wasm 被优化
vite.config.jsimport wasm from "vite-plugin-wasm"; export default defineConfig({ plugins: [ wasm(), ], optimizeDeps: { // [!code ++] // wasm_example 是 wasm 的 npm 包名// exclude: ['wasm_example'] // [!code ++] } // [!code ++] });