如何在React + Vite项目中使用C++ WebAssembly？

嘿，看来你在把C++编译的WebAssembly集成到React + Vite项目时碰了壁——模块识别出问题确实挺头疼的，我来给你捋捋靠谱的解决办法，结合你的现有配置调整👇

先说说你当前配置的问题 #

你现在在index.html里直接全局引入了triangle.js，这种方式在Vite的ES模块系统里容易踩两个坑：
一是Vite的模块隔离机制可能让React组件抓不到全局挂载的Wasm对象；二是Wasm初始化是异步的，React组件加载时可能Wasm还没准备好，调用函数时直接报错。

靠谱的解决方案 #

方案1：在React组件中动态加载Wasm模块（适配带胶水代码的场景）

如果你的triangle.js是Emscripten生成的胶水代码，可以直接在组件里用异步加载的方式，同时处理好初始化时序：

import { useEffect, useState } from 'react';

// 给Wasm模块定义TS类型（可选，但能让TS不报错）
interface TriangleModule {
  _triangle_area: (base: number, height: number) => number;
  // 这里根据你C++导出的函数补充类型
}

const App = () => {
  const [wasmReady, setWasmReady] = useState(false);
  const [triangleModule, setTriangleModule] = useState<TriangleModule | null>(null);

  useEffect(() => {
    const loadWasm = async () => {
      try {
        // 动态引入Wasm胶水代码，路径根据你的文件结构调整
        const module = await import('../cpp/triangle.js');
        
        // 不同胶水代码的初始化逻辑可能不同：
        // 如果是ES模块导出的初始化函数
        if (module.default && typeof module.default === 'function') {
          const initializedModule = await module.default();
          setTriangleModule(initializedModule as TriangleModule);
        } 
        // 如果是全局挂载的Module对象（老版Emscripten默认生成的）
        else if ((window as any).Module) {
          setTriangleModule((window as any).Module as TriangleModule);
        }

        setWasmReady(true);
      } catch (err) {
        console.error('加载Wasm模块失败:', err);
      }
    };

    loadWasm();
  }, []);

  // 调用Wasm导出的C++函数
  const calculateTriangleArea = (base: number, height: number) => {
    if (!wasmReady || !triangleModule) return 0;
    return triangleModule._triangle_area(base, height);
  };

  return (
    <div className="App">
      <h1>Wasm 三角形面积计算</h1>
      {wasmReady ? (
        <div>
          <p>底5，高3的三角形面积：{calculateTriangleArea(5, 3)}</p>
        </div>
      ) : (
        <p>Wasm模块加载中...</p>
      )}
    </div>
  );
};

export default App;

方案2：直接加载Wasm二进制文件（无胶水代码场景）

如果你的C++编译后直接生成了.wasm文件（没有胶水代码），可以通过Vite的配置配合原生WebAssembly API加载：

首先调整vite.config.ts，解决跨域和预优化问题：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    exclude: ['triangle.wasm'], // 告诉Vite不要预优化Wasm文件
  },
  server: {
    headers: {
      'Cross-Origin-Embedder-Policy': 'require-corp',
      'Cross-Origin-Opener-Policy': 'same-origin',
    },
  },
});

然后在组件中直接加载二进制文件：

import { useEffect, useState } from 'react';

const App = () => {
  const [wasmInstance, setWasmInstance] = useState<WebAssembly.Instance | null>(null);

  useEffect(() => {
    const loadWasm = async () => {
      try {
        const response = await fetch('../cpp/triangle.wasm');
        const bytes = await response.arrayBuffer();
        const instance = await WebAssembly.instantiate(bytes);
        setWasmInstance(instance);
      } catch (err) {
        console.error('加载Wasm失败:', err);
      }
    };

    loadWasm();
  }, []);

  const calculateArea = (base: number, height: number) => {
    if (!wasmInstance) return 0;
    // 注意：C++导出的函数名会自动加下划线，比如你写的triangle_area会变成_triangle_area
    return (wasmInstance.exports._triangle_area as Function)(base, height) as number;
  };

  return (
    <div>
      {wasmInstance ? (
        <p>底10，高5的三角形面积：{calculateArea(10, 5)}</p>
      ) : (
        <p>Wasm模块加载中...</p>
      )}
    </div>
  );
};

export default App;

额外的注意事项 #

1. 路径问题：确保Wasm文件/胶水代码的路径正确——如果放在public目录下，路径要写成/cpp/triangle.js（根路径）；如果放在项目源码目录下，路径要相对于当前组件文件。
2. Emscripten编译优化：如果用Emscripten编译C++，可以加-s EXPORT_ES6=1 -s MODULARIZE=1参数，生成ES模块格式的胶水代码，这样在Vite里引入会更顺畅，不需要依赖全局变量。
3. TypeScript类型：给Wasm模块定义类型接口，能避免TS的类型报错，写代码时还能有自动提示。

备注：内容来源于stack exchange，提问作者Michael Brunner