将 Go 编译为 WebAssembly

WebAssembly (Wasm) 是一种新型的、轻量级的虚拟机，可以运行在任何支持 Wasm 的平台上。Go 语言从版本 1.11 开始支持将代码编译成 WebAssembly。本章将详细介绍如何使用 Go 语言编写并编译 WebAssembly 模块，并展示如何在网页上加载和使用这些模块。

安装必要的工具

首先，确保你的开发环境已经安装了 Go 语言的最新版本。你可以通过以下命令检查已安装的 Go 版本：

go version

如果尚未安装 Go，请访问 Go 官方网站 下载并安装适合你操作系统的版本。

接下来，安装 wasm-tools，这是一个用于生成和操作 WebAssembly 文件的工具集。你可以使用以下命令安装：

go install mvdan.cc/wasm/tools/cmd/wasm-tools@latest

此外，还需要一个 Web 服务器来测试和部署你的 WebAssembly 应用程序。这里推荐使用 http-server，一个简单易用的 Node.js 静态文件服务器。如果你还没有安装 Node.js 和 npm，请先安装它们，然后使用以下命令安装 http-server：

npm install -g http-server

编写一个简单的 Go 程序

创建一个新的 Go 项目目录，并在其中创建一个名为 main.go 的文件。在这个文件中，我们将编写一个简单的 Go 函数，稍后将其编译为 WebAssembly 模块。

// www.javascriptcn.com code example
// main.go
package main

import "fmt"

// Exported function that can be called from JavaScript
func Greet(name string) string {
    return fmt.Sprintf("Hello, %s!", name)
}

这个例子中定义了一个 Greet 函数，该函数接收一个字符串参数 name 并返回一个问候语。

编译 Go 程序为 WebAssembly

使用 Go 工具链将上述 Go 程序编译为 WebAssembly。在项目目录中执行以下命令：

GOARCH=wasm GOOS=js go build -o main.wasm

这将生成一个名为 main.wasm 的 WebAssembly 文件。

创建 HTML 页面来加载 WebAssembly 模块

为了在浏览器中运行我们的 WebAssembly 模块，我们需要创建一个 HTML 页面来加载它。创建一个名为 index.html 的文件，并添加以下内容：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Go WebAssembly Example</title>
</head>
<body>
    <h1>Go WebAssembly Example</h1>
    <p id="greeting"></p>

    <script type="module">
        import init from './main.js';

        async function run() {
            await init();
            const greeting = greet('World');
            document.getElementById('greeting').textContent = greeting;
        }

        run();
    </script>
</body>
</html>

注意，这个 HTML 文件引用了 main.js 脚本，该脚本是由 Go 编译器生成的 JavaScript 包装器。你需要确保 main.js 文件存在于与 index.html 相同的目录下。

生成 JavaScript 包装器

Go 编译器会为 WebAssembly 模块生成一个 JavaScript 包装器。这个包装器提供了初始化和调用 WebAssembly 函数的方法。为了生成这个包装器，需要运行以下命令：

GOARCH=wasm GOOS=js go build -o main.wasm

上面的命令实际上已经在前面完成了。现在，你需要使用 wasm-bindgen 工具生成 JavaScript 包装器。首先，确保已经安装了 wasm-bindgen：

cargo install wasm-bindgen-cli

然后，使用 wasm-bindgen 生成 JavaScript 包装器：

wasm-bindgen main.wasm --out-dir . --target web

这将在当前目录下生成 main.js 文件。

启动本地服务器

最后一步是启动本地服务器来预览你的应用程序。打开终端，导航到项目目录，并运行以下命令：

http-server .

这将启动一个 HTTP 服务器，默认监听 8080 端口。打开浏览器，访问 http://localhost:8080 即可看到你的 WebAssembly 应用程序。

总结

通过本章的学习，你应该已经掌握了如何使用 Go 语言编写并编译 WebAssembly 模块，并且了解了如何在网页上加载和使用这些模块。下一章将深入探讨更复杂的 WebAssembly 应用场景。