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()