React+TS应用生产构建后走子记谱显示异常如何解决

生产环境构建时，react-scripts 内置的Terser压缩器会自动混淆缩短类、构造函数的名称以减小包体积，你代码中piece.constructor.name === "Pawn"的判断完全依赖构造函数的原始名称，压缩后Pawn类的构造函数名会被替换为e/t这类单字符短标识，导致判断逻辑永远不成立：所有棋子（包括兵）都会走入非兵的记谱分支，自动拼接getPieceCode()返回的兵标识P，最终出现Pe4、Pxd5这类错误记谱。

你之前替换为instanceof写法未生效，通常是因为导入的Pawn类引用和实例化棋子使用的类不一致（比如循环依赖、不同路径重复导出类），但instanceof本身不受代码压缩影响，只要引用正确是可以正常工作的，不过不推荐作为首选方案。

开发环境正常运行效果如下：

优先选择前两种无依赖的稳定方案，不要依赖constructor.name做任何生产环境业务判断：

• 方案1：给棋子基类增加固定类型标识（最稳妥，长期可维护）
  在Piece抽象基类上定义只读的类型字段，每个棋子子类固定返回自身类型字符串，代码压缩不会修改你写死的字符串字面量，判断完全稳定：

  // Piece基类定义
  abstract class Piece {
    abstract readonly pieceType: 'pawn' | 'rook' | 'knight' | 'bishop' | 'queen' | 'king';
    // 保留原有getPieceCode、getPosition等方法
  }
  
  // Pawn兵类实现
  class Pawn extends Piece {
    override readonly pieceType = 'pawn' as const;
    // 保留原有兵的业务逻辑
  }
  
  // 修改记谱方法的判断逻辑
  const getMoveNotation = (piece: Piece, position: Position): string => {
    const captureMove = chessBoard.hasPiece(position);
    const coord = chessBoard.convertPositionToChessCoordinate(position);
    let moveNotation = "";
    // 替换原来的constructor.name判断
    if (piece.pieceType !== "pawn") {
      moveNotation = `${piece.getPieceCode()}${coord}`;
      if (captureMove) {
        moveNotation = `${piece.getPieceCode()}x${coord}`;
      }
    } else {
      if (captureMove) {
        const pawnCoord = chessBoard
          .convertPositionToChessCoordinate(piece.getPosition())
          .charAt(0);
        moveNotation = `${pawnCoord}x${coord}`;
      } else {
        moveNotation = coord;
      }
    }
    return moveNotation;
  };
  

• 方案2：直接复用已有getPieceCode()方法判断（改动最小）
  兵的getPieceCode()本身固定返回'P'，不需要额外加属性，直接用这个返回值做判断即可：

  // 替换原有判断条件即可
  if (piece.getPieceCode() !== "P") {
    // 原有非兵记谱逻辑
  } else {
    // 原有兵的记谱逻辑
  }
  

• 方案3：修正instanceof写法
  如果一定要用instanceof，确保判断时导入的Pawn类和实例化棋子时用的是完全相同的引用，避免循环导入、多路径重复导出类的问题：

  // 确保此处导入的Pawn和new Pawn()使用的是同一个类
  import { Pawn } from './pieces/Pawn';
  
  // 判断逻辑
  if (!(piece instanceof Pawn)) {
    // 非兵逻辑
  } else {
    // 兵的逻辑
  }
  

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