Golang Wasm Webpack插件更新指南

Golang Wasm Webpack插件更新指南 适用于 Golang v1.13 WebAssembly 的 Webpack 插件，包含 CLI（NodeJS）和 Web（React 或 Svelte）的示例。

我已 Fork 并更新了适用于 Golang v1.13 的 webpack Go wasm 插件，并添加了一个 Svelte 示例：

GitHub

happybeing/webpack-golang-wasm-async-loader

Avatar

一个 webpack loader，用于生成 Golang WebAssembly 包，采用异步交互模型从 JavaScript 调用 Golang 代码 - happybeing/webpack-golang-wasm-async-loader

这是我一个巧妙计划的一部分，旨在创建一个去中心化的 git 门户（替代 github），它可以在浏览器中从 p2p 存储运行（因此是静态 HTML 且无服务器）。如果有兴趣，请参见这里。


更多关于Golang Wasm Webpack插件更新指南的实战教程也可以访问 https://www.itying.com/category-94-b0.html

1 回复

更多关于Golang Wasm Webpack插件更新指南的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


针对你更新的 webpack-golang-wasm-async-loader 插件，这里提供在 React 和 Svelte 项目中集成 Golang WebAssembly 的示例代码。

React 示例

import React, { useEffect, useState } from 'react';
import loadWasm from 'golang-wasm-async-loader!./main.go';

function App() {
  const [wasm, setWasm] = useState(null);
  const [result, setResult] = useState('');

  useEffect(() => {
    loadWasm().then(instance => {
      setWasm(instance);
    });
  }, []);

  const handleClick = async () => {
    if (wasm) {
      const res = await wasm.exports.add(5, 3);
      setResult(`5 + 3 = ${res}`);
    }
  };

  return (
    <div>
      <button onClick={handleClick}>调用 Go 函数</button>
      <p>{result}</p>
    </div>
  );
}

export default App;

Svelte 示例

<script>
  import { onMount } from 'svelte';
  import loadWasm from 'golang-wasm-async-loader!./main.go';
  
  let wasm = null;
  let result = '';
  
  onMount(async () => {
    wasm = await loadWasm();
  });
  
  async function callGoFunction() {
    if (wasm) {
      const res = await wasm.exports.multiply(4, 7);
      result = `4 × 7 = ${res}`;
    }
  }
</script>

<button on:click={callGoFunction}>执行乘法</button>
<p>{result}</p>

Go WebAssembly 代码示例

// main.go
package main

import "syscall/js"

func add(this js.Value, args []js.Value) interface{} {
    return args[0].Int() + args[1].Int()
}

func multiply(this js.Value, args []js.Value) interface{} {
    return args[0].Int() * args[1].Int()
}

func main() {
    c := make(chan struct{}, 0)
    js.Global().Set("add", js.FuncOf(add))
    js.Global().Set("multiply", js.FuncOf(multiply))
    <-c
}

Webpack 配置

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.go$/,
        use: 'golang-wasm-async-loader'
      }
    ]
  }
};

构建命令

# 安装依赖
npm install webpack-golang-wasm-async-loader

# 构建 WebAssembly
GOOS=js GOARCH=wasm go build -o main.wasm main.go

# 运行开发服务器
npm run dev

这些示例展示了如何在现代前端框架中加载和调用 Golang WebAssembly 模块。插件通过异步加载机制优化了 wasm 模块的初始化过程，避免了阻塞主线程。

回到顶部