一、安装Rust
1、官网下载 rustup-init.exe****文件
傻瓜式安装即可。该文件含有编译器rustc、包管理工具cargo…，装完后它会自动配好环境变量
检验安装：在Win+R的cmd中输入：
**rustup -V **
rustup 1.26.0 (5af9b9484 2023-04-05) ------ successful
只安装 rust 是没办法运行 rust 程序的，还需要安装 Microsoft C++ 生成工具才行
2、**安装 ****Microsoft C++**生成工具
此工具是 rust 官方强烈建议安装的，安装此工具，起码能避免后续操作中95%以上的不知名报错
官方建议选择以下几个 Windows 工作负载
检验安装：直接跑一个简单的rust程序即可，新建一个文件夹，在该文件夹中的cmd中输入：
** ****cargo new hello_rust
cd hello_rust
cargo run ** ** **
Hello, world! ------ successful
二、项目搭建
在桌面新建个存放项目的文件夹，进入此文件夹后，在空白处，鼠标右键打开 cmd 工具
1、创建 Rust WebAssembly 项目
** ** cargo newadd_demo --lib （若忘记加 lib，那就手动把 src 文件下的 main.rs 改为 lib.rs）
此时会生成一个文件夹，其目录结构是这样的：
+-- Cargo.toml 用于管理项目的依赖和配置
+-- src 项目的Rust源代码文件
+-- lib.rs ------- successful
2、**安装 ****wasm-bindgen **工具
此工具是一个用于促进 Wasm 模块和 JavaScript 之间高级交互的 Rust 库和 CLI 工具。
** ** cargo install wasm-bindgen-cli
如何使用（后面的第3、4、5步，就是使用此工具的过程）：
第一步：在 Cargo.toml 文件中添加
wasm-bindgen
依赖，指定所需的版本
第二步：在 Rust 代码中使用相关的宏（如
#[wasm_bindgen]
），来标记要导出到 JS 中的函数
第三步：通过 **
wasm-pack
等工具将 Rust 代码打包成 Wasm 文件**，并生成相应的 JS 绑定文件
注：wasm 是二进制格式，不能直接被 JS调用。为了能在 JS 中使用 wasm ，需要借助相关工具将 wasm 代码与 JavaScript 进行绑定，生成相应的 JavaScript 绑定文件。这个绑定文件中包含了一些 JS 代码，用于加载、实例化 wasm 模块，并提供了与 wasm 中定义的函数进行交互的接口。
2.1、**修改 ****Cargo.toml **配置项
在 Cargo.toml 文件中添加
wasm-bindgen
依赖，指定所需的版本
[lib]
crate-type = ["cdylib"] /**指定生成的库的类型“动态链接库”，能被其他编程语言调用*/
[dependencies]
wasm-bindgen = "0.2" /**说明项目依赖于wasm-bindgen库，且指定版本为0.2*/
2.2、编写 rust 代码
在 Rust 代码中使用相关的宏（如
#[wasm_bindgen]
），来标记要导出到 JS 中的函数
use wasm_bindgen::prelude::*; // 导入了wasm_bindgen库的预导出模块的内容
#[wasm_bindgen] // 标记要导出到 JS 中的函数，只能标记 **
pub
公共函数**
*****pub rust函数 *****
2.3、rust 代码打包成 wasm文件
方法一：使用工具一步到位
** cargo install wasm-pack ** ** ** // 安装wasm-pack工具
** wasm-pack build --target web // 在rust源代码所在的文件夹中的cmd**中运行该命令
通过 **
wasm-pack
**工具，将 Rust 代码打包成 Wasm 二进制文件，并生成相应的 JS 绑定文件
此时会生成** pkg 和 Cargo.lock **文件夹，pkg 包含了打包后的产物，前端可调用 Rust 编写的函数
方法二：手动执行两步完成
**cargo build --target wasm32-unknown-unknown** //将 Rust 代码打包成 Wasm 文件
** **如果没有安装对应的库，则命令行会提示
help：consider downloading the target with rustup target add wasm32-unknow
** 安装即可：rustup target add wasm32-unknown-unknown**
** 再运行： cargo build --target wasm32-unknown-unknown**
Finished dev [unoptimized + debuginfo] targe…, in 10.62s ------ successful
** wasm-bindgen target/wasm32-unknown-unknown/debug/demo.wasm --out-dir ./pkg**
注：此命令可以生成相应的 JavaScript 绑定文件（胶水代码）以及相关的打包配置操作
3、**构建本地 ****Web **服务器
构建 本地的web服务器 ，主要是方便后面测试 JS程序 调用wasm模块的效果
我们需要创建三个文件：index.js、package.json、webpack.config.js
**（1）新建 index.js **文件（关键）：编写 js 代码，调用编译后的 JS 绑定文件
const rust = import('./pkg/add_demo.js'); // 直接引入，刚才编译后的 **JS 绑定文件**
rust
** .**then(({ add }) => { // 对应 rust 代码中的函数
var result = add(5, 6);
alert("wasm sum 5 + 6 = " + result);
console.log(result);
})
** .**catch(console.error);
注1：wasm 是二进制格式，不能直接被 JS调用。为了能在 JS 中使用 wasm ，需要借助相关工具将 wasm 代码与 JavaScript 进行绑定，生成相应的 JavaScript 绑定文件。这个绑定文件中包含了一些 JS 代码，用于加载、实例化 wasm 模块，并提供了与 wasm 中定义的函数进行交互的接口。
注2：rust.then(({ add }) => { ... }) 中的 ({ add }) 是解构赋值的语法： 从导入的模块对象中提取出名为 add 的函数，以便在后面的JavaScript 代码中调用
注3：用 catch 捕获rust 失败的异步操作（模块导入失败，或其他操作） 然后通过console.error会将相关的错误信息打印到控制台
（2）新建 package.json 文件：npm init -y
该文件是项目的配置文件，包含项目的基本信息，列出了项目所依赖的模块
在生成的 package.json 文件中，新增红色代码：
"scripts": {
"build": "webpack",
"serve": "webpack-dev-server"
},
"devDependencies": {
"@wasm-tool/wasm-pack-plugin": "0.4.2",
"text-encoding": "^0.7.0",
"html-webpack-plugin": "^3.2.0",
** "webpack": "^4.29.4", **** /**指定
webpack
** 作为依赖项*/
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.0"
},
（3）新建 webpack.config.js****文件：Web-pack 工具的配置文件，用于定义打包的行为
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
module.exports = {
entry: './index.js', // 入口
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
},
plugins: [
new HtmlWebpackPlugin(),
new WasmPackPlugin({
crateDirectory: path.resolve(__dirname, ".")
}),
//让这个示例在，不包含`TextEncoder`或`TextDecoder`的Edge浏览器中正常工作
new webpack.ProvidePlugin({
TextDecoder: ['text-encoding', 'TextDecoder'],
TextEncoder: ['text-encoding', 'TextEncoder']
})
],
mode: 'development'
};
4、*安装 Web-pack 及其相关依赖*
**npm install**
Web-pack 模块打包器，能将多个模块(如 JS、CSS、图片等)打包成一个静态资源，供浏览器使用
**注：npm install**
本身不会自动安装**
webpack
工具。但如果在项目的
package.json
文件中明确指定
webpack
** 作为依赖项，然后运行**
npm install
**，它会自动安装 **
webpack
** 及其相关依赖。
5、构建**&**运行程序
构建add_demo程序：**npm run build ** // 打包项目，此步会生成 dist 文件夹
运行add_demo程序：npm run serve
在浏览器中打开 localhost:8080（这个地址不是固定不变的），将看到实际的效果！！！
版权归原作者 luckeymore 所有， 如有侵权，请联系我们删除。