如何实现服务端与客户端共同访问同一份项目代码文件？

你遇到的问题本质是浏览器端React代码、Node端Socket.io服务代码环境隔离导致的公共逻辑无法复用，不需要手动复制同步文件，有两种成熟可落地的方案实现同一份文件被两端共同引用：

方案一：平级共享目录（最推荐，配置简单无侵入） #

• 先调整项目目录结构，将React客户端项目、Socket.io服务端项目设为平级目录，在两者的同级根位置新建shared文件夹，所有前后端通用的代码（比如Tile类定义、游戏核心计算逻辑、枚举值、数据结构、通用校验方法）全部放到这个文件夹中。注意：共享目录内的代码不能依赖浏览器专属API（如window/document）或Node专属API（如fs/os），必须是纯运行时逻辑。
• 配置CRA+TypeScript客户端：打开React项目下的tsconfig.json，添加路径映射：

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@shared/*": ["../../shared/*"]
    }
  }
}

4.0及以上版本的react-scripts原生支持该路径配置，不需要eject或手动修改webpack配置，配置完成后客户端代码可直接通过import Tile from '@shared/tile'引入共享代码。

• 配置Node+TypeScript服务端：打开服务端项目下的tsconfig.json，添加同样的路径映射：

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@shared/*": ["../../shared/*"]
    }
  }
}

如果服务端用ts-node启动，启动命令追加-r tsconfig-paths/register参数即可正常识别路径别名，不需要额外调整。

• 开发阶段只需要修改shared目录下的文件，客户端和服务端会同步读取最新代码，完全不需要手动同步复制。

方案二：客户端内单独编译共享代码（不调整现有目录可选） #

如果你不想改动现有客户端、服务端的存放位置，可以直接在React项目内把公共代码单独编译给服务端引用：

• 在React项目根目录新建tsconfig.shared.json，配置如下：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "CommonJS",
    "outDir": "./dist-shared",
    "noEmit": false
  },
  "include": ["src/game/**/*.ts"] // 此处填写所有需要共享的文件路径，比如存放Tile类的tile.ts所在目录
}

• 在React项目的package.json里添加运行脚本：

{
  "scripts": {
    "build:shared": "tsc -p tsconfig.shared.json --watch"
  }
}

• 开发时先运行npm run build:shared，修改共享代码时会自动编译输出到dist-shared目录，服务端直接引入该目录下的编译产物即可，不需要手动复制文件。

之前启动服务端失败的原因说明 #

你之前尝试在React项目内部启动服务端失败，核心原因是把Node环境运行的服务端代码混进了React客户端的构建流程：CRA默认的构建流程只会打包运行在浏览器的代码，服务端代码需要用独立的Node进程启动，不能直接打包进浏览器端bundle，只要做好环境隔离，完全可以把服务端代码放在React项目内，通过单独的启动脚本运行。

不推荐手动复制文件的方案：后期迭代很容易出现两边代码不同步的问题，排查逻辑不一致的bug会浪费大量时间。

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