一、安装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 所有, 如有侵权,请联系我们删除。