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

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+

bash 复制代码
# Windows(PowerShell)
irm https://vite.plus/ps1 | iex

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

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


2. 依赖迁移

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

diff 复制代码
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 中管理依赖

diff 复制代码
{
  "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 配置

diff 复制代码
- 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+,这里重点说明任务调度与缓存的实现方式。

项目结构

bash 复制代码
apps/
  └─ playground

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

Turbo 原配置

json 复制代码
{
  "$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,否则会报错。


方式一:自定义任务编排(最灵活)

ts 复制代码
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
    }
  }
})

方式二:递归执行(按依赖顺序)

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

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

ts 复制代码
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 调整

diff 复制代码
{
  "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+ 是一个值得尝试的统一方案。

相关推荐
小雨下雨的雨3 小时前
井字棋AI机器人实现详解 - Minimax算法实战-鸿蒙PC Electron框架完成
前端·人工智能·算法·华为·electron·鸿蒙
ZC跨境爬虫6 小时前
跟着 MDN 学JavaScript day_7:数学运算与逻辑判断实战测试
开发语言·前端·javascript·学习·ecmascript
fangdengfu1236 小时前
ES分析系统各个服务日志占用量
java·前端·elasticsearch
凌云拓界7 小时前
文件管理:让AI安全操作你的电脑 ——CogitoAgent开发实战(三)
javascript·人工智能·架构·开源·node.js
凌云拓界7 小时前
联网能力:让AI看见更广阔的世界 ——CogitoAgent开发实战(四)
javascript·人工智能·架构·node.js·创业创新
JustHappy8 小时前
古法编程秘籍(六):程序到底是怎么跑起来的?从 IO 到中断,一次讲明白
前端·后端·全栈
HYCS8 小时前
用pixi.js实现fabric.js(六):从线性代数的角度理解编辑器交互
前端·javascript·canvas
卷帘依旧9 小时前
useImperativeHandle的作用
前端
卷帘依旧9 小时前
Hooks在Fiber上的存储原理
前端