用rust实现第一个wasm

文件结构

1
wasm-project/
2
│
3
├── Cargo.toml                  # Rust包的配置文件
4
├── package.json                # npm项目配置文件
5
├── webpack.config.js           # Webpack配置文件
6
├── src/                        # 源代码目录
7
│   ├── lib.rs                  # Rust代码，导出到WebAssembly
8
│   ├── index.js                # JavaScript代码，调用WebAssembly模块
9
│   └── index.html              # 简单的HTML页面，用于测试WebAssembly
10
├── pkg/                        # wasm-pack生成的WebAssembly相关文件
11
│   ├── package.json            # WebAssembly模块的npm配置
12
│   ├── wasm.d.ts              # TypeScript类型定义文件
13
│   ├── wasm.js                # WebAssembly模块的JavaScript接口
14
│   ├── wasm_bg.js             # WebAssembly模块的绑定代码
15
│   ├── wasm_bg.wasm           # 编译生成的WebAssembly二进制文件
16
│   └── wasm_bg.wasm.d.ts      # WebAssembly二进制文件的TypeScript声明
17
└── dist/                       # Webpack打包生成的文件
18
    ├── main.js                 # 打包后的JavaScript文件
19
    ├── pkg_wasm_js.js         # WebAssembly模块的打包文件
20
    └── 22e4d62519dd44a7c412.module.wasm  # 各种生成的WebAssembly模块文件

一、安装必要软件

安装Rust 确保你已安装Rust环境，可以通过以下命令来确认是否安装成功：
Terminal window
```
1
rustc --version
```
安装wasm-pack wasm-pack用于将Rust代码编译为WebAssembly格式。通过以下命令安装：
Terminal window
```
1
cargo install wasm-pack
```
安装npm npm是JavaScript包管理工具，确保安装最新版本。

二、编写代码

构建一个新的Rust包 在项目目录下创建一个新的Rust库项目：
Terminal window
```
1
cargo new --lib wasm
```

配置 Cargo.toml 修改Cargo.toml来添加WebAssembly的依赖和输出配置：

1
[package]
2
name = "wasm"
3
version = "0.1.0"
4
edition = "2021"
5

6
[dependencies]
7
wasm-bindgen = "0.2.95"
8

9
[lib]
10
crate-type = ["cdylib", "rlib"]

编写Rust文件 src/lib.rs 使用wasm-bindgen库将Rust函数暴露给JavaScript。编写如下代码：

1
extern crate wasm_bindgen;
2
use wasm_bindgen::prelude::*;
3

4
#[wasm_bindgen]
5
extern {
6
    pub fn alert(s: &str);
7
}
8

9
#[wasm_bindgen]
10
pub fn greet(name: &str) {
11
    alert(&format!("Hello, {}!", name));
12
}

将Rust代码编译为WebAssembly 使用wasm-pack进行编译：
Terminal window
```
1
wasm-pack build
```
编译后的WebAssembly文件将生成在pkg/目录下。

三、打包代码

初始化npm项目 创建一个package.json文件：
Terminal window
```
1
npm init -y
```
安装Webpack及相关工具 安装Webpack及开发服务器，用于打包和本地运行JavaScript与WebAssembly：
Terminal window
```
1
npm install --save-dev webpack webpack-cli webpack-dev-server
```
编写JavaScript调用代码 src/index.js 在index.js中，调用由Rust编译出的WebAssembly模块：
```
1
const js = import("../pkg/wasm");
2

3
js.then((js) => {
4
    js.greet("world");
5
});
```

编写Webpack配置文件 webpack.config.js 该配置文件用于打包项目并支持WebAssembly异步加载：

1
module.exports = {
2
    entry: './src/index.js',
3
    mode: 'development',  // 开发模式，可切换为'production'
4
    experiments: {
5
        asyncWebAssembly: true,  // 异步加载WebAssembly
6
    },
7
    module: {
8
        rules: [
9
            {
10
                test: /\.wasm$/,
11
                type: "webassembly/async"  // 使用异步加载WebAssembly
12
            }
13
        ]
14
    },
15
};

打包JavaScript文件 使用Webpack打包项目：
Terminal window
```
1
npx webpack
```

四、运行代码

编写HTML文件 src/index.html 在HTML文件中引入打包后的main.js：

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>WebAssembly Example</title>
7
</head>
8
<body>
9
<h1>WebAssembly Example</h1>
10
<script src="../dist/main.js"></script>
11
</body>
12
</html>

运行HTML文件 打开src/index.html，在浏览器中运行此文件，应该会看到弹窗显示”Hello, world”。

用rust实现第一个wasm

文件结构

一、安装必要软件

二、编写代码

三、打包代码

四、运行代码

文章目录

同类文章

Ms17 010（永恒之蓝）漏洞复现

vscode配置

3x-ui配置