项目创建
webpack
yarn add webpack webpack-cli webpack-dev-server copy-webpack-plugin -D
typescript
yarn add ts-loader typescript -D
sass
yarn add sass css-loader style-loader sass-loader -D
wasm-pack
rust 编译成 webassembly 需要 wasm-pack
# 不建议全局安装
# 如果wasm-pack 有问题， 请删除 `node_modules`重新安装依赖
yarn add wasm-pack -D
# webpack plugin
yarn add @wasm-tool/wasm-pack-plugin -D
# 创建 rust 项目
cargo new wasm --lib
在wasm中的Cargo.toml中添加下面依赖
[lib]
crate-type = ["cdylib", "rlib"]
[dependencies]
wasm-bindgen = "0.2"
[dev-dependencies]
wasm-bindgen-test = "0.3"
[package.metadata.wasm-pack.profile.release]
wasm-opt = ["-Oz", "--enable-mutable-globals"]
// 这个很重要， 预加载wasm_bindgen
use wasm_bindgen::prelude::*;
// #[wasm_bindgen]属性 是把当前函数暴露给js使用
#[wasm_bindgen]
pub fn add(left: usize, right: usize) -> usize {
left + right
}
WebAssembly
使用 rust 编译后的产物wasm/pkg, 在app/index.ts中引入。
// https://developer.mozilla.org/zh-CN/docs/WebAssembly/Loading_and_running
import("../wasm/pkg").then((module) => {
// module.add 就是 .wasm 暴露出来的函数
const add = module.add;
console.log(add(1, 2));
});
