如何在Turborepo Monorepo中编写导入语句？求路径别名使用建议

针对你在Turborepo搭建的Monorepo中，同一package内模块导入的三种写法，下面分析各自优劣并给出通用实践建议：

三种写法的优劣分析 #

• 相对路径写法（import { Button } from "../Button"）
  无需任何额外配置，TS和打包工具原生支持，新手能快速理解文件层级关系。但当目录结构复杂、层级较深时，会出现../../../../Button这类冗余路径，一旦调整目录结构，就得批量修改导入语句，维护成本高。

• 包名前缀别名（import { Button } from "@ui/Button"）
  路径指向清晰，直接关联package名称，而且和跨package导入（比如从业务包导入@ui组件）的语法风格统一，目录结构调整时无需修改导入路径。缺点是需要在TS和打包工具中同步配置别名解析，有一定的初始配置成本。

• 根路径别名（import { Button } from "@/Button"）
  写法简洁，以当前package根目录为基准，不用在意文件层级。但在多package的Monorepo场景下，多个package若都用@作为根别名，容易混淆模块所属的package，跨package导入时语法风格不统一，增加团队认知负担。

通用实践建议 #

1. 优先采用包名前缀别名方案
   这是Monorepo生态中的通用做法，和Turborepo的设计理念契合——通过package名称来管理模块依赖。统一的导入风格能降低团队协作的认知成本，后续维护也更省心。
   配置示例（以ui包为例）：

   • 在packages/ui/tsconfig.json中添加：

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

   • 若使用Vite、Webpack等打包工具，需要同步配置别名解析（以Vite为例）：

     // packages/ui/vite.config.ts
     import { defineConfig } from 'vite';
     import path from 'path';
     
     export default defineConfig({
       resolve: {
         alias: {
           '@ui': path.resolve(__dirname, './')
         }
       }
     });
     

2. 若团队初期对配置成本敏感，可暂时使用相对路径，但建议配合ESLint插件（如eslint-plugin-import）规范路径，避免出现层级过深的相对导入。

3. 不推荐使用@/xxx这类根路径别名，容易在多package场景下造成混淆，破坏Monorepo的模块边界认知。

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