以下是繁體中文翻譯，使用Markdown格式：

WebAssembly - Convert WAT to WASM

# WebAssembly - 將 WAT 轉換為 WASM

你好，有志者們！今天，我們將踏上一段令人興奮的旅程，進入 WebAssembly 的世界，特別聚焦於將 WebAssembly 文本（WAT）轉換為 WebAssembly 二進制（WASM）。別擔心這些術語對你來說很陌生——我們會一步一步拆解一切。在這個教程結束時，你將能夠像專家一樣轉換 WAT 至 WASM！

## WebAssembly 是什麼？

在我們深入了解轉換過程之前，讓我們花一分鐘了解 WebAssembly 是什麼。想像你正在建造沙堡。WebAssembly 就像一個神奇的桶子，能夠立即創造出完美的沙結構，讓你的海灘創作更快且更令人印象深刻。

在網頁開發的世界裡，WebAssembly 是一種低級語言，讓用 C++ 或 Rust 等語言編寫的代碼能在網絡瀏覽器中以接近本地速度運行。它被設計為與 JavaScript 一起工作，提升網頁應用的性能。

## WAT vs WASM：基礎知識

現在，讓我們來談談 WAT 和 WASM。將 WAT 想像成你的沙堡藍圖，這是一種人類可以閱讀的語言。另一方面，WASM 則像是最終的沙堡——這是計算機理解並能快速執行的形式。

- WAT（WebAssembly 文本格式）：人類可讀，類似於組合語言
- WASM（WebAssembly 二進制格式）：機器可讀，緊湊的二進制格式

## WAT 至 WASM 轉換：過程

將 WAT 轉換為 WASM 就像將我們的沙堡藍圖翻譯成實際的沙結構。讓我們一步一步走過這個過程。

### 步驟 1：編寫你的 WAT 代碼

首先，我們需要創建我們的 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 位整數相加的函數。別擔心如果你不理解每個細節——我們會一一拆解：

(module ...)：這包裹了我們整個 WAT 代碼。
(func $add ...)：定義名為 "add" 的函數。
(param $a i32) (param $b i32)：指定兩個 32 位整數參數。
(result i32)：表示函數返回一個 32 位整數。
local.get $a 和 local.get $b：獲取函數參數。
i32.add：將兩個數字相加。
(export "add" (func $add))：使函數從模塊外部可訪問。

步驟 2：保存你的 WAT 檔案

將這段代碼保存為一個以 .wat 結尾的檔案，例如 add.wat。

步驟 3：使用 WAT 至 WASM 轉換器

現在來到神奇的部分——將 WAT 轉換為 WASM。我們將使用一個叫做 wat2wasm 的工具，它是 WebAssembly Binary Toolkit（WABT）的一部分。

以下是使用方法：

安裝 WABT（如果你還沒有安裝）：
- 在 macOS 上：brew install wabt
- 在 Ubuntu 上：sudo apt-get install wabt
- 其他系統，請查看 WABT GitHub 儲存庫
打開終端並導航到你存放 WAT 檔案的目錄。
執行以下命令：

wat2wasm add.wat -o add.wasm

這個命令告訴 wat2wasm 將我們的 add.wat 檔案轉換為名為 add.wasm 的 WASM 檔案。

步驟 4：驗證你的 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