0


Rust 简单入门

一、安装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(这个地址不是固定不变的),将看到实际的效果!!!

标签: javascript 前端 wasm

本文转载自: https://blog.csdn.net/weixin_45755222/article/details/140652076
版权归原作者 luckeymore 所有, 如有侵权,请联系我们删除。

“Rust 简单入门”的评论:

还没有评论