在Create React App创建的React应用中通过Webpack将Go编译为WASM的标准方案及报错求助

首先，你遇到的spawn undefined/bin/go ENOENT错误本质是Webpack loader找不到Go语言的可执行文件，我们先一步步解决这个问题，再给你几个更通用的标准方案。

一、修复当前webpack-golang-wasm-async-loader的错误 #

1. 检查Go环境是否正确配置 #

首先确认你的系统已经安装了Go，并且go命令能在终端正常运行：

go version

如果输出Go版本信息，说明安装成功；如果报错，先安装Go并务必将Go的bin目录添加到系统环境变量PATH中：

• Windows：默认路径为C:\Go\bin
• macOS/Linux：默认路径为/usr/local/go/bin 或 $HOME/go/bin

2. 手动指定Go可执行文件路径 #

如果Go已经安装但loader依然找不到，可能是loader无法自动识别Go路径，你可以在config-overrides.js中手动配置：

const path = require('path');
module.exports = function override(config, env) {
 const goExtensionRegExp = /\.go/;
 config.module.rules.push({
 test: goExtensionRegExp,
 use: [
   {
     loader: 'golang-wasm-async-loader',
     options: {
       // 替换成你的Go可执行文件路径，Windows注意转义反斜杠
       goPath: '/usr/local/go/bin/go' // Windows示例：'C:\\Go\\bin\\go.exe'
     }
   }
 ]
 });
 config.node.fs = 'empty'
 return config;
};

3. 确保Go依赖安装完成 #

在项目src目录下（你的main.go所在目录）执行以下命令，确保gobridge依赖被正确下载：

go get github.com/aaronpowell/webpack-golang-wasm-async-loader/gobridge

二、更通用的标准方案（无需依赖特定loader） #

如果上面的方案还是遇到兼容性问题，推荐使用手动编译Go到WASM + CRA自定义配置的方案，这是更稳定的通用做法：

步骤1：编译Go代码为WASM #

在src目录下执行以下命令（要求Go 1.11+版本）：

# macOS/Linux
GOOS=js GOARCH=wasm go build -o main.wasm main.go

# Windows（PowerShell）
$env:GOOS="js"; $env:GOARCH="wasm"; go build -o main.wasm main.go

步骤2：复制Go的WASM运行时文件 #

找到你的Go安装目录下的misc/wasm/wasm_exec.js文件，复制到项目的src目录中。这个文件是Go WASM在浏览器中运行的必要依赖。

步骤3：修改Go代码，直接挂载函数到全局对象 #

不需要依赖第三方gobridge，直接把函数和值挂载到浏览器的window对象：

package main

import "syscall/js"

// add 接收两个整数参数并返回它们的和
func add(this js.Value, args []js.Value) interface{} {
 sum := 0
 for _, arg := range args {
   sum += arg.Int()
 }
 return sum
}

func main() {
 // 挂载函数到window对象
 js.Global().Set("add", js.FuncOf(add))
 // 挂载值到window对象
 js.Global().Set("someValue", "Hello World")

 // 阻塞主线程，保持WASM实例运行
 select {}
}

步骤4：配置CRA支持WASM文件 #

CRA默认不处理WASM文件，我们用@craco/craco来修改Webpack配置（比react-app-rewired更活跃）：

1. 安装依赖：

yarn add --dev @craco/craco

2. 修改package.json的scripts：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }
}

3. 创建craco.config.js文件：

module.exports = {
  webpack: {
    configure: (config) => {
      // 添加WASM文件处理规则
      config.module.rules.push({
        test: /\.wasm$/,
        type: "webassembly/async",
      });
      // 修复fs模块的错误
      config.node = {
        fs: "empty",
      };
      return config;
    },
  },
};

步骤5：在React组件中加载并使用WASM #

修改App.js：

import React from 'react';
import './wasm_exec.js';
import './App.css';

// 初始化Go运行时
const go = new window.Go();

class App extends React.Component {
  async componentDidMount() {
    // 加载WASM文件（注意把main.wasm放到public目录下）
    const response = await fetch('/main.wasm');
    const bytes = await response.arrayBuffer();
    const wasmInstance = await WebAssembly.instantiate(bytes, go.importObject);
    
    // 运行WASM实例
    go.run(wasmInstance.instance);

    // 调用Go导出的函数和值
    const sum = window.add(1, 2);
    console.log('1+2=', sum);
    console.log('someValue=', window.someValue);
  }

  render() {
    return <div>Hello World</div>;
  }
}

export default App;

三、另一个可选方案：使用go-wasm-loader #

如果你还是想用Webpack loader自动编译Go代码，可以试试go-wasm-loader，配置方式类似：

1. 安装依赖：

yarn add --dev @craco/craco go-wasm-loader

2. 修改craco.config.js：

module.exports = {
  webpack: {
    configure: (config) => {
      config.module.rules.push({
        test: /\.go$/,
        use: [
          {
            loader: 'go-wasm-loader',
            options: {
              goPath: '/usr/local/go/bin/go' // 你的Go路径
            }
          }
        ]
      });
      config.node.fs = 'empty';
      return config;
    }
  }
};

3. 在App.js中导入并使用：

import React from 'react';
import loadWasm from './main.go';
import './App.css';

class App extends React.Component {
  async componentDidMount() {
    const wasm = await loadWasm();
    console.log(wasm.add(1,2));
    console.log(wasm.someValue);
  }

  render() {
    return <div>Hello World</div>;
  }
}

export default App;

内容的提问来源于stack exchange，提问作者blueslurpee