mod utils;
use wasm_bindgen::prelude:😗;
// 这里暴露web的api供rust调用
#[wasm_bindgen]
extern “C” {
fn alert(s: &str);
}#[wasm_bindgen]
pub fn greet() {
alert(“Hello, wasm!”);
}## wasm-bindgen
wasm-bindgen能够让js和rust之间进行交互。
[wasm-bindgen文档]( )
## 下载依赖
cd进项目,然后执行`cargo check`安装依赖
## 打包wasm文件
`wasm-pack build --target web`
[wasm-pack文档地址]( )
![在这里插入图片描述]()
这个命令做了以下几件事:
wasm-pack build 将做以下几件事:
1. 将你的 Rust 代码编译成 WebAssembly。
2. 在编译好的 WebAssembly 代码基础上运行 wasm-bindgen,生成一个 JavaScript 文件将 WebAssembly 文件包装成一个模块以便 npm 能够识别它。
3. 创建一个 pkg 文件夹并将 JavaScript 文件和生成的 WebAssembly 代码移到其中。
4. 读取你的 Cargo.toml 并生成相应的 package.json。
5. 复制你的 README.md (如果有的话) 到文件夹中。
## 发布npm
`cd pkg`
`npm publish --access=public`
将我们的wasm包发布npm前端直接下载
## 前端引入wasm
### 创建项目
vite的项目`pnpm create vite vite-wasm --template react-ts`
webpack的项目这里我用的rspack,`pnpm create rsbuild@latest`
然后安装依赖即可
### 安装wasm依赖
将我们刚刚rust生成的pkg复制到项目中,然后执行`pnpm i ./pkg`
`pnpm i ./pkg`安装wasm的依赖
### 使用方式
1.在rspack项目中import ‘./App.css’;
import wasm from ‘wasm’const App = () => {
wasm().then(wasm_fn => {
wasm_fn.greet()
swift rust 性能 知乎
转载文章标签 swift rust 性能 知乎 前端 面试 学习 WebAssembly 文章分类 Swift 移动开发
上一篇:credis和codis区别
-
中文编码方式 加密 python
<8.5-8.10&
中文编码方式 加密 python 运算符 字符串 下划线