Rust编程语言，使用wasm-pack编译wasm的范例

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

.wasm是webassembly的文件后缀，它可以由多种高级编程语言生成，并不是某一种编程语言的固定产物。本文中，苏南大叔演示的是：使用rust编程语言写一个非常简单入门的wasm文件，并且在www容器里面运行起来。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码编程经验总结。测试环境：win10，rustc 1.84.1，cargo 1.84.1，rustup 1.27.1 (54dd3d00f 2024-04-24)，wasm-pack@0.13.1。

rust，cargo

rust和cargo是必须安装的基础软件。参考文章：

• https://newsn.net/say/rust.html
• https://newsn.net/say/rustup.html
• https://newsn.net/say/cargo-config-toml.html
• https://newsn.net/say/cargo-mirror.html

wasm-pack

rust并不是专门用于生成webassembly的，但是rust想要在web前端方面做些事情，唯一的媒介就是webassembly。这个时候，就需要wasm-pack工具，来做这个事情了。

rust最开始进入苏南大叔的视野，就是安装编译人工智能的transformer库的时候。所以，rust能做的事情很多的。

官方文档：

• https://rustwasm.github.io/wasm-pack/installer/

wasm-pack是一个用于构建和处理Rust生成的WebAssembly的工具。它简化了将Rust代码编译为WebAssembly并与 JavaScript集成的过程。在这篇文章中，我们将介绍 wasm-pack 的基本使用方法，并展示如何使用它来构建一个简单的 WebAssembly项目。

它的优点就是，不但把rust的代码编译成了.wasm文件，同时还生成了用于页面调用的js代码，可以用于导入.wasm文件里面的函数。

安装 wasm-pack

通过以下命令安装 wasm-pack：

cargo install wasm-pack

安装完成后，可以通过运行以下命令来验证安装是否成功：

wasm-pack --version

创建新项目

使用 cargo 创建一个新的Rust项目，名叫sunan-wasm：

cargo new sunan-wasm --lib

在 sunan-wasm/Cargo.toml 文件中添加 wasm-bindgen 依赖项：

[package]
name = "wasm_example"
version = "0.1.0"
edition = "2024"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

Rust项目根目录下面的Cargo.toml文件，和Node项目根目录下面的package.json文件很相似。

编写 Rust 代码

在 sunan-wasm/src/lib.rs 文件中编写以下代码：

use wasm_bindgen::prelude::*;
use wasm_bindgen::JsValue;
#[wasm_bindgen]
extern "C" {
    fn alert(s: &str);
}
#[wasm_bindgen]
pub fn greet() {
    alert("Hello, wasm-pack!");
}
#[wasm_bindgen]
pub fn add(left: i32, right: i32) -> i32 {
    left + right
}
#[wasm_bindgen]
pub fn greet2() -> String {
    "Hello, WebAssembly!".to_string()
}

构建项目

使用 wasm-pack 构建项目，在根目录下面执行：

wasm-pack build --target web

注意这里的参数--target web，这个是重点！！！！否则后面的一切流程都跑不起来。

构建完成后，在项目目录中看到一个 pkg 文件夹，其中包含生成的 WebAssembly 文件和 JavaScript 包装器。

引入执行

在容器里面，建立个测试的html文件：

<button id="greetButton">Greet</button>
<button id="addButton">Add</button>
<button id="greet2Button">Greet</button>
<script type="module">
    import init, { greet, add, greet2 } from './pkg/wasm_example.js';
    async function runWasm() {
        await init();
        document.getElementById('greetButton').addEventListener('click', () => {
            greet();
        });
        document.getElementById('addButton').addEventListener('click', () => {
            const result = add(5, 3);
            console.log('Result from add:', result);
        });
        document.getElementById('greet2Button').addEventListener('click', () => {
            const result = greet2();
            console.log('Result from greet2:', result);
        });
    }
    runWasm();
</script>

参考文章：

• https://newsn.net/say/wasm.html
• https://rustwasm.github.io/wasm-pack/book/commands/build.html

结论

通过以上步骤，苏南大叔成功使用 wasm-pack 构建了一个简单的WebAssembly项目。wasm-pack 极大地简化了将Rust代码编译为WebAssembly并与JavaScript集成的过程，使得开发WebAssembly应用变得更加容易。

更多苏南大叔的wasm经验文章，请点击：

• https://newsn.net/tag/wasm/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。