NODE_ENV=production下yarn build跳过devDependencies出现TS报错如何解决

• 你将NODE_ENV设为production执行yarn install时，yarn会自动跳过安装devDependencies，而你的类型声明包、storybook相关依赖都存在devDependencies中
• Create React App的生产构建默认会对整个src目录下的所有TS文件执行类型校验，哪怕这些文件不会被打包进最终产物，所以会扫描到.stories.tsx、.test.tsx这类文件，触发依赖缺失报错

方案1：调整TS配置忽略非业务代码（最推荐） #

1. 先把业务代码必须依赖的通用类型包从devDependencies移动到dependencies，包括@types/react、@types/react-dom等业务代码直接用到的类型声明，这类包是TS类型校验的必需依赖，不属于仅开发场景使用的依赖
2. 修改项目根目录的tsconfig.json，在exclude字段中添加非业务代码的匹配规则，示例配置：

{
  "compilerOptions": {
    // 原有配置保持不变
  },
  "exclude": [
    "node_modules",
    "src/**/*.stories.tsx",
    "src/**/*.stories.ts",
    "src/**/*.test.tsx",
    "src/**/*.test.ts",
    "src/**/*.spec.tsx",
    "src/**/*.spec.ts"
  ]
}

配置完成后TS校验会自动跳过这类文件，不会再检测它们的依赖是否存在，同时这些文件本身也不会被打包进生产产物，不会影响最终构建结果。

方案2：CI构建前直接删除非业务代码 #

如果不想修改项目配置，可以在CI的yarn build步骤前增加删除非业务代码的命令，直接物理移除不需要参与构建的文件：

rm -rf src/**/*.stories.* src/**/*.test.* src/**/*.spec.*

方案3：仅安装必要的生产 + 类型依赖 #

如果不想调整依赖的存放位置，可以在CI的yarn install --production执行完成后，单独安装生产构建必需的类型包：

yarn add @types/react @types/react-dom --prod

这个方案只会多装几个体积很小的类型包，相比安装全量devDependencies还是能节省大量CI时间。

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