webpack5-rust-wasm-template
v1.0.1
Published
![build](https://github.com/freeshineit/webpack5-rust-wasm-template/workflows/build/badge.svg)
Downloads
3
Maintainers
Readme
webpack5-rust-wasm-template
Use
# install dependency
yarn install
# development
# 如果运行时 rust没有编译 , 请移除node_modules重新安装
yarn run dev
# production
yarn run build
# https://github.com/http-party/http-server
# version >= 14
cd docs && http-server -p 8080 .
创建
webpack
yarn add webpack webpack-cli webpack-dev-server copy-webpack-plugin -D
typescript
yarn add @swc/core swc-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"
# `wee_alloc` is a tiny allocator for wasm that is only ~1K in code size
# compared to the default allocator's ~10K. It is slower than the default
# allocator, however.
wee_alloc = { version = "0.4.5", optional = true }
[features]
default = ["wee_alloc"]
[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::*;
// When the `wee_alloc` feature is enabled, use `wee_alloc` as the global
// allocator.
#[cfg(feature = "wee_alloc")]
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
// #[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));
});