非Next.js项目中能否使用Turborepo？求具体实现方案

Turborepo本身不依赖Next.js，只是Vercel官方文档侧重展示Next.js场景。下面是纯非Next.js monorepo的配置步骤：

1. 初始化Turborepo项目 #

跳过Next.js模板，选择空模板或手动搭建结构：

• 用官方初始化工具：

  npx create-turbo@latest
  # 选择 "Empty" 模板，按提示完成初始化
  

• 或手动创建目录结构：

  your-monorepo/
  ├── .gitignore
  ├── package.json
  ├── turbo.json
  ├── apps/          # 存放业务项目（React/Vite/Node.js等）
  └── packages/      # 存放共享包（UI组件、工具函数等）
  

2. 配置根目录核心文件 #

根package.json #

设置workspaces并安装turbo：

{
  "name": "your-monorepo",
  "private": true,
  "workspaces": ["apps/*", "packages/*"],
  "devDependencies": {
    "turbo": "^1.10.16"
  },
  "scripts": {
    "build": "turbo run build",
    "dev": "turbo run dev",
    "lint": "turbo run lint"
  }
}

turbo.json #

定义通用任务流水线，适配非Next.js项目：

{
  "$schema": "https://turbo.build/schema.json",
  "globalDependencies": ["**/.env.*local"],
  "pipeline": {
    "build": {
      "dependsOn": ["^build"], // 先构建所有依赖的共享包
      "outputs": ["dist/**", "build/**"] // 指定需要缓存的构建产物目录
    },
    "dev": {
      "cache": false, // 开发模式不缓存，保持实时更新
      "persistent": true // 持续运行开发服务
    },
    "lint": {
      "outputs": [] // lint无产物，不需要缓存
    }
  }
}

3. 添加非Next.js子项目 #

以Vite React项目和Node.js服务为例：

示例1：Vite React应用 #

在apps/目录下执行：

npm create vite@latest react-app -- --template react

修改apps/react-app/package.json的脚本，与turbo流水线对齐：

{
  "name": "react-app",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint ."
  }
}

示例2：Node.js后端服务 #

在apps/node-service/下创建package.json：

{
  "name": "node-service",
  "scripts": {
    "dev": "nodemon index.js",
    "build": "tsc", // 若使用TypeScript
    "lint": "eslint ."
  }
}

4. 配置共享包（可选） #

比如创建共享UI组件包packages/ui，在其package.json中指定入口：

{
  "name": "@your-monorepo/ui",
  "main": "./dist/index.js",
  "scripts": {
    "build": "tsc",
    "dev": "tsc --watch"
  }
}

之后可在react-app中直接引用：import { Button } from '@your-monorepo/ui'

5. 运行任务 #

• 启动所有项目的开发服务：npm run dev
• 构建所有项目：npm run build
• 全量代码检查：npm run lint

关键注意事项 #

• 确保子项目的脚本名称（dev/build/lint）与turbo.json中定义的流水线任务名一致
• 若使用TypeScript，可在根目录创建tsconfig.json，子项目通过extends继承配置
• Turbo的缓存机制会自动识别文件变化，无需额外配置Next.js专属规则

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