CRA搭建的React前端与Firebase Functions共享代码的实现方法

方案1：根目录共享文件夹（零额外依赖，优先选择） #

这是兼容CRA 5.0、零额外依赖、配置成本最低的方案，完全不需要修改CRA内置编译规则：

• 在项目根目录新建/shared文件夹，将所有需要两端复用的类型定义、枚举、工具函数、参数校验逻辑全部从原functions目录迁移到该文件夹下，最终目录结构如下：

  /my-project
    /shared
      types/
      enums/
      utils/
    /functions
      index.ts
    /src
      App.tsx
      index.tsx
  

• 修改React项目根目录的tsconfig.json，在include配置项中新增共享目录的匹配规则，让TS编译器识别该目录下的代码：

  {
    "include": [
      "src/**/*",
      "shared/**/*"
    ]
    // 其余原有配置保持不变
  }
  

• 修改/functions/tsconfig.json，同样在include配置中加入共享目录：

  {
    "include": [
      "**/*",
      "../shared/**/*"
    ]
    // 其余原有配置保持不变
  }
  

• 修改根目录的firebase.json，调整Functions部署的忽略规则，保证Firebase CLI部署时能正确打包共享目录的代码（新版Firebase CLI默认支持引用functions目录外的本地文件，只要不被ignore规则排除即可）：

  {
    "functions": {
      "ignore": [
        "node_modules",
        ".git",
        "*.log"
      ]
    }
  }
  

• 代码中直接通过相对路径引用共享代码即可，例如React端写import { UserRole } from '../../shared/enums'，Functions端写import { UserRole } from '../shared/enums'，枚举、类型、普通TS逻辑都能正常编译，不存在软链接的转译问题。

方案2：本地私有包（适合共享代码量较大的场景） #

如果后续需要共享的逻辑较多，不想维护冗长的相对路径，可以用npm/yarn本地文件依赖的方式实现：

• 在项目根目录新建/packages/shared目录，在目录内初始化package.json，声明包名为@project/shared，配置好类型和入口文件。
• 分别在根目录（React端）和functions目录下执行依赖安装命令，将本地包添加到依赖中：

  # React端执行
  npm install file:./packages/shared
  # Functions端执行
  npm install file:../packages/shared
  

• 两端统一通过包名导入共享代码，例如import { UserRole } from '@project/shared/enums'，不需要额外配置webpack或者TS规则，CRA和Firebase Functions都能正常识别本地依赖，部署时也会自动将依赖代码打进产物。

避坑说明 #

• 不要继续使用软链接方案：CRA内置的webpack配置默认对src目录外的软链接文件有转译限制，枚举、装饰器这类需要编译处理的语法很容易出现运行时错误，版本升级时兼容性极差。
• 不要使用已停止维护的CRA配置hack工具：旧版react-app-rewired、customize-cra、craco均不兼容CRA 5.0的内置webpack配置，强行使用会出现各种编译报错，后续升级维护成本极高。
• 不要执行npm run eject暴露CRA配置：eject操作不可逆，暴露后无法跟随CRA官方升级，会大幅增加项目的维护负担。

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