turbo迁移vite+(vite-plus)实践

Selicens
16 阅读3分钟

Turbo 是一个高性能的构建系统，结合 pnpm monorepo 使用非常流行。它通过任务调度与缓存机制，大幅提升多仓库开发体验。

vite+（vite-plus） 则提供了一套统一的工具链（vite、vitest、oxlint、oxfmt、rolldown、tsdown、vite task 等），将所有配置集中到 vite.config 中进行管理，从而解决生态碎片化问题。

从 Turbo 迁移到 vite+ 的核心收益也在于此：不仅可以实现与 Turbo 类似的任务调度与缓存能力，还能无缝融入 Vite 生态。从长期来看，这一方向具备很大的发展潜力。

一、移除 Turbo 相关配置

首先，清理项目中所有 Turbo 相关内容：

  1. 移除依赖：pnpm remove turbo

  2. 删除配置文件：turbo.json

  3. 删除缓存目录：.turbo（包括根目录及各 packages 子目录）

  4. 清理 .gitignore 中的相关配置: .turbo

二、安装与配置 vite+

1. 安装 vite+

# Windows（PowerShell）
irm https://vite.plus/ps1 | iex

# macOS / Linux
curl -fsSL https://vite.plus | bash

⚠️ 由于当前项目是基于 Turbo 做任务调度的，因此无法直接使用 vp migrate 自动迁移，需要手动调整配置。

2. 依赖迁移

情况一：使用 workspace 的 catalog / catalogs 管理依赖

catalog:
- vite: ^8.0.0
+ vite: npm:@voidzero-dev/vite-plus-core@latest

- vitest: ^4.1.0
+ vitest: npm:@voidzero-dev/vite-plus-test@latest

+ vite-plus: ^0.1.12

# catalogs 同理

+ overrides:
+   vite: npm:@voidzero-dev/vite-plus-core@latest
+   vitest: npm:@voidzero-dev/vite-plus-test@latest

情况二：直接在 package.json 中管理依赖

{
  "devDependencies": {
-   "vite": "^8.0.0",
-   "vitest": "^4.1.0",
+   "vite": "npm:@voidzero-dev/vite-plus-core@latest",
+   "vite-plus": "latest",
+   "vitest": "npm:@voidzero-dev/vite-plus-test@latest"
  },
  "pnpm": {
+   "overrides": {
+     "vite": "npm:@voidzero-dev/vite-plus-core@latest",
+     "vitest": "npm:@voidzero-dev/vite-plus-test@latest"
+   }
  }
}

3. vite.config 配置

- import { defineConfig } from 'vite'
+ import { defineConfig } from 'vite-plus'

export default defineConfig({
  run: {
    tasks: {...}, // 任务调度
    cache: {...}, // 缓存
  },
  fmt: {...},   // 使用 oxfmt，替代 prettier
  lint: {...},  // 使用 oxlint，替代 eslint
  test: {...},  // vitest
  pack: {...},  // tsdown（库打包，类似 tsup / rollup）
  staged: {...} // 替代 lint-staged
})

三、任务调度与缓存

由于本文实践是 从 Turbo 迁移到 vite+，这里重点说明任务调度与缓存的实现方式。

项目结构

apps/
  └─ playground

packages/
  ├─ module-a
  └─ module-b

Turbo 原配置

{
  "$schema": "https://turborepo.com/schema.json",
  "tasks": {
    "build": {
      "outputs": ["dist/**"]
    },
    "dev": {
      "persistent": true,
      "cache": false,
      "dependsOn": ["^build"],
      "interactive": false
    }
  }
}

vite+ 实现方式

💡 注意： 在 vite+ 目前版本中，package.json 的 scripts 名称不能与 tasks 重名。 例如：scripts 中有 dev，那么 tasks 中就不能再叫 dev，否则会报错。

方式一：自定义任务编排（最灵活）

export default defineConfig({
  run: {
    tasks: {
      task1: {
        command: [
          'vp run --filter "@my-app/*" build',
          'vp run --filter ./apps/playground dev'
        ].join(' && '),
        input: [{ auto: true }, '!**/*.tsbuildinfo']
      }
    },
    cache: {
      scripts: true, // 默认 false，开启后缓存 scripts
      tasks: true    // 默认 true
    }
  }
})

方式二：递归执行（按依赖顺序）

tasks: {
  task2: {
    command: 'vp run -r build',
    input: [{ auto: true }, '!**/*.tsbuildinfo']
  }
}

方式三：手动控制执行顺序

tasks: {
  task3: {
    command: [
      'vp run --filter "@my-app/c" build',
      'vp run --filter "@my-app/a" build',
      'vp run --filter "@my-app/b" build',
      'vp run --filter ./apps/playground dev'
    ].join(' && '),
    input: [{ auto: true }, '!**/*.tsbuildinfo']
  }
}

package.json scripts 调整

{
  "scripts": {
-   "dev": "turbo run dev --filter=\"./apps/*\"",
+   "dev": "vp run task1",
+   "dev2": "vp run task2 && pnpm -F ./apps/playground dev"
  }
}

四、总结

从 Turbo 迁移到 vite+，本质是从「多工具拼装」走向「统一工具链」：

  • ✅ 任务调度能力：≈ Turbo
  • ✅ 缓存机制：≈ Turbo
  • ✅ 工具链整合：明显更优（fmt / lint / test / build 一体化）
  • ✅ 配置集中：全部收敛到 vite.config

如果你的项目正在被 eslint / prettier / tsup / turbo 等工具割裂，vite+ 是一个值得尝试的统一方案。

avatar
文章
阅读
粉丝