golang語言中wasm 環境搭建的過程詳解

Posted on by

golang 安裝

通過官方地址 下載。MacOS 也可通過 brew 快速安裝：

$ brew install golang

$ go version
go version go1.17.2 darwin/arm64

golang 環境測試

新建文件 main.go ，寫入：

package main

import "fmt"

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

執行 go run main.go ，將輸出：

$ go run main.go
Hello World!

如果啟用瞭 GO MODULES ，則需要使用 go mode init 初始化模塊，或設置 GO111MODULE=auto 。

將 golang 打包為 WASM

通常有兩種打包方式，一種是 golang 自帶的，另外是使用 tinygo 。推薦使用 tinygo ，因為編譯出的 wasm 模塊更小。

  • 使用 golang 原生編譯

在編譯 wasm 模塊前，需要設置 golang 交叉編譯參數，目標系統 GOOS=js 和目標架構 GOARCH=wasm ，編譯 wasm 模塊：

// macos
$ GOOS=js GOARCH=wasm go build -o main.wasm

// windows 臨時設置 golang 環境參數（僅作用於當前CMD）
$ set GOOS=js 
$ set GOARCH=wasm
$ go build -o main.wasm
  • 使用 tinygo 編譯

直接按照官方文檔安裝即可，MacOS 如下：

$ brew tap tinygo-org/tools
$ brew install tinygo

$ tinygo version
tinygo version 0.20.0 darwin/amd64 (using go version go1.17.2 and LLVM version 11.0.0)

使用以下命令對 main.go 再次進行打包：

$ tinygo build -o main-tiny.wasm

  • 打包文件大小對比
$ du -sh ./*.wasm
228K    ./main-tiny.wasm
1.9M    ./main.wasm

在瀏覽器中跑起來

要想在瀏覽器中跑 main.wasm ，首先需要 JS 膠水代碼，golang 已經為我們提供瞭，直接復制過來。需要註意的是，使用 tinygo 和 原生編譯的膠水代碼是有差異的，根據具體情況拷貝對應的：

// 原生編譯
$ cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .

// tinygo編譯
$ cp "$(tinygo env TINYGOROOT)/targets/wasm_exec.js" ./wasm_exec_tiny.js

其次，需要一個 HTML 入口文件，創建 index.html 文件，並寫入以下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./wasm_exec_tiny.js"></script>
</head>
<body>
  <script>
    const go = new Go(); // wasm_exec.js 中的定義
    WebAssembly.instantiateStreaming(fetch('./main-tiny.wasm'), go.importObject)
      .then(res => {
        go.run(res.instance); // 執行 go main 方法
      });
  </script>
</body>
</html>

最後，起一個 http server 讓它跑起來吧～

// python
$ python3 -m http.server
$ python2 -m SimpleHTTPServer

// node
$ npm i -g http-server
$ hs

// gp
$ go get -u github.com/shurcooL/goexec
$ goexec 'http.ListenAndServe(`:8080`, http.FileServer(http.Dir(`.`)))'

異常記錄

  • 通過 node 的 http-server 起的服務，加載會報錯:

> TypeError: Failed to execute ‘compile’ on ‘WebAssembly’: Incorrect response MIME type. Expected ‘application/wasm’.

原因是 wasm 文件響應頭的 content-type 為 application/wasm; charset=utf-8 ，應該為 application/wasm 。已知的解決方法為修改 HTML 中 wasm 的初始化方式為：

fetch('./main-tiny.wasm')
  .then(res => res.arrayBuffer())
  .then(buffer => {
    WebAssembly.instantiate(buffer, go.importObject)
      .then(res => {
        go.run(res.instance);
      })
  })

到此這篇關於golang語言中wasm 環境搭建的文章就介紹到這瞭,更多相關golang wasm 環境搭建內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：