tinygo webassembly 试用-526互联

主要是简单测试下tinygo 的使用，同时基于vite 进行web 的集成构建

wasm 生成

注意只测试标注类型支持比较多，其他的就没添加，其他类型的需要自己处理，这点上wasm-pack 处理的比较好

main.go

package main
 
//go:wasm-module

//export add

func add(x, y uint32) uint32 {

    return x + y + 100

}
 
//go:wasm-module

//export printName

func printName() int {

    return 1111

}
 
// main is required for the `wasi` target, even if it isn't used.

func main() {}

构建

tinygo build -o main.wasm -target=wasi main.go

web 集成

会有wasm 文件的加载，webassembly 实例的初始化，以及方法的导出使用，这点vite 实际上支持支持wasm 文件的初始化
测试中我直接使用了tinygo 官方的示例，实际上可以参考vite 对于webassembly 支持进行调整

package.json

 
{

  "name": "tinygo",

  "version": "1.0.0",

  "type": "module",

  "main": "index.js",

  "license": "MIT",

  "scripts": {

    "build": "vite build",

    "dev": "vite",

    "preview": "vite preview"

  },

  "devDependencies": {

    "vite": "^4.5.0"

  }

}

index.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>Hello World - Go</title>

  </head>

  <body>

    <!-- 

    The wasm_exec.js must come before our Javascript (index.js), 

    as it defines some global objects 

    -->

    <script type="module" src="./wasm_exec.js"></script> // 此文件是从tinygo 安装中拷贝的，比较重要

    <script type="module" src="./index.js"></script>

  </body>

</html>

index.js
实际上就是调用webassembly 初始化工具类的方法

 
// Imports are from the demo-util folder in the repo

// https://github.com/torch2424/wasm-by-example/blob/master/demo-util/

import { wasmBrowserInstantiate } from "./instantiateWasm.js";
 
import wasmUrl from './main.wasm?url'
 
const go = new Go(); // Defined in wasm_exec.js. Don't forget to add this in your index.html.
 
const runWasmAdd = async () => {

  // Get the importObject from the go instance.

  const importObject = go.importObject;
 
  // Instantiate our wasm module

  const wasmModule = await wasmBrowserInstantiate(wasmUrl, importObject);
 
  // Allow the wasm_exec go instance, bootstrap and execute our wasm module

  go.run(wasmModule.instance);
 
  // Call the Add function export from wasm, save the result

  const addResult = wasmModule.instance.exports.add(2433, 24);
 
  const printName = wasmModule.instance.exports.printName();

  // Set the result onto the body

  document.body.textContent = `Hello World! addResult: ${addResult} -- printName: ${printName}`;

};

runWasmAdd();

instantiateWasm.js 是一个工具类
实际上可以使用vite 的记性呢替代

 
export const wasmBrowserInstantiate = async (wasmModuleUrl, importObject) => {

    let response = undefined;
 
    if (!importObject) {

      importObject = {

        env: {

          abort: () => console.log("Abort!")

        }

      };

    }
 
    if (WebAssembly.instantiateStreaming) {

      response = await WebAssembly.instantiateStreaming(

        fetch(wasmModuleUrl),

        importObject

      );

    } else {

      const fetchAndInstantiateTask = async () => {

        const wasmArrayBuffer = await fetch(wasmModuleUrl).then(response =>

          response.arrayBuffer()

        );

        return WebAssembly.instantiate(wasmArrayBuffer, importObject);

      };

      response = await fetchAndInstantiateTask();

    }
 
    return response;

  };