Rust 简单入门

luckeymore

已于 2024-10-20 10:46:35 修改

阅读量2k

点赞数 9

分类专栏： wasm 文章标签： javascript 前端 wasm rust

于 2024-07-24 09:47:51 首次发布

本文链接：https://blog.csdn.net/weixin_45755222/article/details/140652076

版权

wasm 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

目录：
一、安装Rust
        1、在官网下载 rustup-init.exe文件
        2、安装 Microsoft C++生成工具
 二、项目搭建
        1、创建 Rust WebAssembly 项目
        2、安装 wasm-bindgen 工具
                2.1、修改 Cargo.toml 配置项
                2.2、编写 rust 代码（关键）
                2.3、rust 代码打包成 wasm文件
                方法一：使用工具一步到位
                        方法二：手动执行两步完成
        3、构建本地 Web 服务器
        4、安装 Web-pack 及其相关依赖
        5、构建&运行程序

参考：
        在 Windows 上针对 Rust 设置开发环境 | Microsoft Learn
        Rust 编译为WebAssembly 在前端项目中使用 (qq.com)
        编译 Rust 为 WebAssembly - WebAssembly | MDN (mozilla.org)

一、安装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 new ~~add_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'
};