如何配置Stockfish.js？React+Vite项目使用问题求助

编译问题：无需自行用 Emscripten 编译 #

Stockfish.js 仓库已经提供了预编译好的成品文件，直接下载对应版本的stockfish.js或带 WASM 的版本即可，不需要自己折腾 Emscripten 编译——除非你要修改 Stockfish 源码做定制开发。

Vite 中 Worker 的路径问题 #

你把stockfish.js放在 public 目录下，引用时要写绝对路径/stockfish.js，而非相对路径./stockfish.js。Vite 中 public 目录的资源部署在根路径下，相对路径会导致 Worker 加载失败。

修正后的组件代码（含生命周期清理） #

你的原代码未做 Worker 清理，多次触发 useEffect（比如 game 变化）会创建多个 Worker 实例，引发内存泄漏和逻辑混乱。以下是修正后的版本：

import { useEffect, useRef, useState } from 'react';

const ChessComponent = ({ game }) => {
  const engineWorker = useRef(null);
  const [msg, setMsg] = useState('');

  useEffect(() => {
    // 终止旧 Worker（如果存在）
    if (engineWorker.current) {
      engineWorker.current.terminate();
    }

    // 创建新 Worker，使用根路径引用
    engineWorker.current = new Worker('/stockfish.js');

    // 监听错误，方便排查问题
    engineWorker.current.onerror = (error) => {
      console.error('Stockfish Worker 错误:', error);
      setMsg('引擎加载失败，请检查文件路径');
    };

    // 监听引擎返回消息
    engineWorker.current.onmessage = (event) => {
      const message = event.data;
      console.log('引擎返回:', message); // 打印所有消息辅助调试
      if (message.startsWith('bestmove')) {
        const bestMove = message.split(' ')[1];
        const move = game.move(bestMove);
        if (move) { // 校验走法合法性，避免无效操作报错
          setMsg('最佳走法: ' + bestMove);
        } else {
          setMsg('走法无效，请检查当前局面');
        }
      }
    };

    // 发送 UCI 指令
    engineWorker.current.postMessage('uci');
    engineWorker.current.postMessage('ucinewgame');
    engineWorker.current.postMessage(`position fen ${game.fen()}`);
    engineWorker.current.postMessage('go depth 10');

    // 组件卸载时清理 Worker
    return () => {
      if (engineWorker.current) {
        engineWorker.current.terminate();
        engineWorker.current = null;
      }
    };
  }, [game]);

  return <div>{msg}</div>;
};

export default ChessComponent;

额外排查步骤 #

• 打开浏览器控制台「网络」标签，确认stockfish.js是否成功加载（HTTP 状态码 200），若为 404 说明路径仍有问题。
• 查看控制台「控制台」标签，检查是否有 Worker 相关报错（如跨域、语法错误）。
• 如果使用带 WASM 的 Stockfish 版本，需确保 WASM 文件也放在 public 目录下，且路径正确（引擎会自动加载同目录的 WASM 文件）。

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