简体中文

WebAssembly 教程

WebAssembly - 将WAT转换为WASM

你好，有抱负的程序员们！今天，我们将踏上一段激动人心的旅程，进入WebAssembly的世界，特别是关注将WebAssembly文本（WAT）转换为WebAssembly二进制（WASM）。别担心，如果这些术语对你来说听起来很陌生——我们会一步步地解释所有内容。在本教程结束时，你将能够像专业人士一样将WAT转换为WASM！

WebAssembly - Convert WAT to WASM

什么是WebAssembly？

在我们深入了解转换过程之前，让我们花点时间了解下WebAssembly是什么。想象你正在建造一座沙堡。WebAssembly就像一个神奇的桶，可以立即创建完美的沙结构，使你的沙滩创作更快、更令人印象深刻。

在网页开发的世界中，WebAssembly是一种低级语言，允许用C++或Rust等语言编写的代码在网页浏览器中以接近本地速度运行。它被设计为与JavaScript一起工作，增强网页应用程序的性能。

WAT与WASM：基础知识

现在，让我们来谈谈WAT和WASM。将WAT视为你的沙堡蓝图，它是一种人类可以阅读的语言。而WASM则像是最终的沙堡——它是计算机理解并能快速执行的形式。

  • WAT（WebAssembly文本格式）：人类可读，类似于汇编语言
  • WASM（WebAssembly二进制格式）：机器可读，紧凑的二进制格式

WAT到WASM转换：过程

将WAT转换为WASM就像将我们的沙堡蓝图翻译成实际的沙结构。让我们一步步走这个过程。

第一步：编写你的WAT代码

首先，我们需要创建我们的WAT代码。以下是一个简单的例子：

(module
(func $add (param $a i32) (param $b i32) (result i32)
local.get $a
local.get $b
i32.add)
(export "add" (func $add))
)

这个WAT代码定义了一个包含一个函数的模块，该函数将两个32位整数相加。别担心你不理解每一个细节——我们会分解它：

  1. (module ...): 这包含了我们的整个WAT代码。
  2. (func $add ...): 定义了一个名为"add"的函数。
  3. (param $a i32) (param $b i32): 指定两个32位整数参数。
  4. (result i32): 表示函数返回一个32位整数。
  5. local.get $a 和 local.get $b: 获取函数参数。
  6. i32.add: 将两个数相加。
  7. (export "add" (func $add)): 使得函数可以从模块外部访问。

第二步：保存你的WAT文件

将这段代码保存在一个以.wat扩展名命名的文件中，例如，add.wat。

第三步：使用WAT到WASM转换器

现在来到神奇的部分——将WAT转换为WASM。我们将使用一个名为wat2wasm的工具，它是WebAssembly二进制工具包（WABT）的一部分。

以下是如何使用它的方法：

  1. 安装WABT（如果你还没有安装）：
  • 在macOS上：brew install wabt
  • 在Ubuntu上：sudo apt-get install wabt
  • 对于其他系统，请查看WABT GitHub仓库

  1. 打开你的终端并导航到包含你的WAT文件的目录。

  2. 运行以下命令：

wat2wasm add.wat -o add.wasm

这个命令告诉wat2wasm将我们的add.wat文件转换为名为add.wasm的WASM文件。

第四步：验证你的WASM文件

恭喜你！你刚刚创建了你的第一个WASM文件。但我们如何知道它起作用了呢？让我们使用另一个WABT工具wasm2wat将我们的WASM转换回WAT，看看它是否与我们的原始代码匹配：

wasm2wat add.wasm -o add_verified.wat

现在，在一个文本编辑器中打开add_verified.wat。它应该看起来与我们的原始WAT代码非常相似，尽管它可能有一些小的格式差异。

使用你的WASM文件

现在我们有了WASM文件，我们如何在网页应用程序中使用它呢？以下是一个简单的HTML和JavaScript示例：

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly加法函数</title>
</head>
<body>
<h1>WebAssembly加法函数</h1>
<p>结果: <span id="result"></span></p>
<script>
(async () => {
const response = await fetch('add.wasm');
const bytes = await response.arrayBuffer();
const { instance } = await WebAssembly.instantiate(bytes);
const result = instance.exports.add(5, 3);
document.getElementById('result').textContent = result;
})();
</script>
</body>
</html>

这个HTML文件加载我们的WASM模块并调用我们的add函数，参数为5和3。结果（8）随后显示在页面上。

结论

就是这样！我们已经从编写WAT代码到转换它为WASM，最后在网页中使用它。记住，这只是一角冰山。WebAssembly为高性能网页应用程序打开了一个世界。

在你继续编程冒险的过程中，继续尝试不同的WAT函数并探索WebAssembly的能力。谁知道呢？你可能会创造出下一个改变世界的突破性网页应用程序！

祝你好运，未来的WebAssembly巫师们！

Credits: Image by storyset

上一教程:
WebAssembly - 文本格式
下一教程:
WebAssembly - 动态链接