Turbo/Monorepo中UI包按原子设计导出子路径的报错问题

核心思路 #

通过配置UI包的package.json字段，直接映射原子设计的目录结构（atoms/molecules/organisms等），无需在根index文件逐个导出组件，同时让TypeScript识别这些子路径。

具体步骤 #

1. 配置UI包的package.json #

在packages/ui/package.json中添加exports和typesVersions字段，指定每个子路径的入口映射：

{
  "name": "ui",
  "version": "0.0.0",
  "exports": {
    ".": "./src/index.ts",
    "./atoms": "./src/atoms/index.ts",
    "./molecules": "./src/molecules/index.ts",
    "./organisms": "./src/organisms/index.ts"
    // 按需添加更多原子设计层级路径
  },
  "typesVersions": {
    "*": {
      "atoms": ["./src/atoms/index.ts"],
      "molecules": ["./src/molecules/index.ts"],
      "organisms": ["./src/organisms/index.ts"]
    }
  }
}

• exports负责告诉Node.js和打包工具（如Vite、Webpack）如何解析ui/atoms这类子路径
• typesVersions确保TypeScript能正确识别这些子路径的类型定义

2. 优化UI包目录结构 #

在packages/ui/src下按原子设计创建对应目录，每个目录下单独建index.ts导出该目录的组件：
比如src/atoms/index.ts：

export { Button } from './Button';
export { Input } from './Input';
// 仅导出当前原子目录下的组件

每个目录的index.ts只处理自身组件导出，不用在UI包根目录的index.ts里统一导出所有组件。

3. 配置根目录tsconfig.json #

在项目根目录的tsconfig.json中添加路径映射，让TypeScript开发时能直接解析子路径：

{
  "compilerOptions": {
    "paths": {
      "ui/*": ["packages/ui/src/*"]
    }
  }
}

4. 测试导入 #

在apps/main_/src/App.tsx中直接使用子路径导入组件：

import { Button } from 'ui/atoms';
import { Card } from 'ui/molecules';

此时不会再出现导入报错，且无需维护根目录的全量导出。

常见问题排查 #

• 若出现类型报错，检查typesVersions配置是否和exports路径完全对应
• 若打包时模块找不到，确认Turbo的turbo.json未限制UI包文件导出，同时UI包的package.json中files字段包含src目录（或编译后的产物目录）

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