Go 之美：将编译后的代码转换成 WebAssembly（二）

2024-02-24 19:27:22







## 前言

在上一篇文章中，我们介绍了如何使用 Go 语言编写代码，并将其编译成 WebAssembly (Wasm) 模块。然后，我们可以在 JavaScript 中使用这些模块来构建前端应用程序。

在本文中，我们将继续探讨 Go 语言前端开发的主题，重点关注将编译后的代码转换成 Wasm 的过程。我们将讨论 Wasm 的优势，并逐步指导您完成构建简单前端应用程序的步骤。

## WebAssembly 简介

WebAssembly 是一种二进制格式，旨在为 Web 提供一种高效且安全的执行环境。它是一种低级语言，可以被编译成各种不同的平台，包括 Web 浏览器、服务器和嵌入式设备。

Wasm 具有以下优势：

* **高性能：**  Wasm 代码可以被高效地执行，因为它是一种编译语言。这使得它非常适合需要高性能的应用程序，例如游戏、视频编辑器和 3D 建模工具。
* **安全性：**  Wasm 代码是沙箱化的，这意味着它不能访问宿主环境的内存或资源。这使得它非常适合构建安全可靠的应用程序。
* **可移植性：**  Wasm 代码可以在各种不同的平台上运行，包括 Web 浏览器、服务器和嵌入式设备。这使得它非常适合构建跨平台应用程序。

## 将 Go 代码编译成 WebAssembly

要将 Go 代码编译成 WebAssembly，可以使用 Go 官方提供的 wasm 工具链。该工具链包括以下工具：

* **go tool wasm：**  用于将 Go 代码编译成 Wasm 模块的命令行工具。
* **go-wasi-sdk：**  用于提供 Wasm 运行时环境的 SDK。
* **wasm_exec.js：**  用于在 Web 浏览器中执行 Wasm 模块的 JavaScript 文件。

要使用 wasm 工具链，您需要在您的计算机上安装 Go 语言和 wasm 工具链。您可以在 Go 官网上下载并安装 Go 语言，并在 GitHub 上下载并安装 wasm 工具链。

安装好 Go 语言和 wasm 工具链后，就可以开始将 Go 代码编译成 Wasm 模块了。首先，您需要创建一个新的 Go 项目。可以在命令行中使用以下命令创建一个新的 Go 项目：

go mod init


其中，`<project-name>` 是您项目的名称。

创建好项目后，就可以在项目中编写 Go 代码了。例如，以下代码是一个简单的 Go 程序，它将在控制台输出 "Hello, World!"：

package main

import "fmt"

func main() {
fmt.Println("Hello, World!")
}


将 Go 代码编写好后，就可以使用 wasm 工具链将其编译成 Wasm 模块了。可以在命令行中使用以下命令将 Go 代码编译成 Wasm 模块：

go tool wasm -o .wasm .go


其中，`<input-file>.go` 是您要编译的 Go 代码文件，`<output-file>.wasm` 是您要生成的 Wasm 模块文件。

编译好 Wasm 模块后，就可以在 JavaScript 中使用它了。可以在 JavaScript 中使用以下代码来加载并执行 Wasm 模块：

const go = new Go();
WebAssembly.instantiateStreaming(fetch(".wasm"), go.importObject).then((result) => {
go.run(result.instance);
});


其中，`<wasm-module-file>.wasm` 是您要加载的 Wasm 模块文件。

加载并执行好 Wasm 模块后，就可以在 JavaScript 中调用 Wasm 模块导出的函数了。例如，以下代码调用了 Wasm 模块导出的 `sayHello` 函数：

go.importObject.env.sayHello();


调用 Wasm 模块导出的函数后，就可以在控制台输出 "Hello, World!" 了。

## 构建简单前端应用程序

现在，我们已经了解了如何将 Go 代码编译成 Wasm 模块，并如何在 JavaScript 中使用它。接下来，我们将构建一个简单的前端应用程序，它将在页面上显示 "Hello, World!"。

首先，我们需要创建一个新的 HTML 文件。可以在文本编辑器中创建一个新的 HTML 文件，并将其保存为 `index.html`。在 `index.html` 文件中，我们可以添加以下代码：

Hello, World!

<script src="wasm_exec.js"></script>
<script src="main.wasm"></script>
<script>
    const go = new Go();
    WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => {
        go.run(result.instance);
    });
</script>

```

在 index.html 文件中，我们加载了 wasm_exec.js 和 main.wasm 文件。然后，我们使用 Go 类来加载并执行 main.wasm 模块。最后，我们调用了 main.wasm 模块导出的 sayHello 函数，并在页面上显示了 "Hello, World!"。

保存好 index.html 文件后，就可以在浏览器中打开它了。在浏览器中打开 index.html 文件后，就可以看到 "Hello, World!" 显示在页面上了。