Vite+ 1.0 发布:一个 vp 管起前端工具链
XPoet 自由程序猿

新建一个前端项目,真正麻烦的往往不是写第一行代码,而是先把工具链拼起来。

Node.js 用哪个版本?包管理器选 pnpm、npm 还是 Bun?ESLint、Prettier、测试、构建、Git Hooks、CI 又该怎么配?

单个项目还好。一旦项目多起来,这些选择就会散落在 package.json、各种配置文件和 CI 脚本里。时间久了,不同项目的版本、命令和规范也很容易逐渐失控。

所以我看一套新工具链,首先关心的不是:

“它能不能让我更快创建项目?”

而是:

“它能不能让我以后少维护一些东西?”

9 月 28 日,VoidZero 正式发布了 Vite+ 1.0。

它给出的方案很直接:

用一个 vp,统一前端项目从环境、开发、检查、测试到构建的工具链。

Vite+ 不是新版 Vite

看到名字里的 Vite,很容易把 Vite+ 理解成“更强的 Vite”。

其实不是。

Vite+ 既不是新框架,也不是新的包管理器,更不是 Vite 的替代品。

它把 Vite、Vitest、Rolldown、Oxlint、Oxfmt、tsdown 和 Vite Task 等工具组合成一套经过统一管理的工具链,再通过 vp 提供一致的命令入口。

简单理解就是:

以前我们自己组装:

Vite + Vitest + ESLint + Prettier + tsup + Node 版本管理 + Task Runner……

现在 Vite+ 想把这些东西收进一套工具链里。

日常开发基本可以围绕这些命令展开:

  • vp create:创建项目、组件库或 Monorepo
  • vp install:使用项目现有包管理器安装依赖
  • vp dev:启动开发服务
  • vp check:格式化、Lint,并按配置执行 TypeScript 类型检查
  • vp test:运行测试
  • vp build:构建应用
  • vp pack:构建组件库或独立可执行文件
  • vp run:运行支持缓存和依赖分析的项目任务
  • vp env:管理 Node.js 版本

而这些工具的大部分配置,可以集中到项目根目录的 vite.config.ts。

这才是 Vite+ 最值得关注的地方:

它想统一的不是某一个构建工具,而是整个前端开发流程。

一个 vp,解决的是工具链碎片化

前端工程化这些年越来越强,但副作用也很明显:工具越来越多。

每个工具都有自己的依赖、配置文件、命令、版本和升级指南。

一个成熟项目里,很容易出现这样的组合:

1
2
3
4
5
6
7
8
9
Vite
Vitest
ESLint
Prettier
tsup
lint-staged
Husky
nvm / fnm
Turbo

这些工具本身都很好。

问题在于:需要有人长期维护它们之间的组合。

比如:

Lint 和格式化规则冲突;

本地和 CI 执行的命令不一样;

A 项目已经升级两代,B 项目还停留在旧版本;

新成员接手项目,还得先理解一整套内部工程约定。

对于一个项目可能问题不大,但对于维护多个项目的平台团队来说,这就是持续存在的成本。

Vite+ 的思路,是把常见能力尽量组合成一套经过测试的版本,再给团队一个稳定的命令入口。

以后不管进入哪个项目:

1
2
3
vp check
vp test
vp build

含义都基本一致。

从团队工程化角度看,这比单纯“构建快一点”更有价值。

1.0 补齐了不少工程能力

从今年 7 月的 Beta 到 1.0,Vite+ 又补了一批更偏工程落地的能力。

首先是迁移。

vp migrate 继续扩展,现在可以处理 tsup 等更多工具的迁移,并持续完善 Vite 插件和不同框架的兼容性。

其次是 CI 和分发。

1.0 增加了 GitLab CI/CD 的 setup-vp,同时提供 Homebrew 和 Docker 的安装方式。

还有一些比较实用的工程命令:

1
vp toolchain

可以查看当前 Vite+ 使用的具体工具版本。

1
vp env doctor

可以排查 Node.js、包管理器以及运行环境的解析问题。

另外还有:

1
2
vp hooks
vp staged

分别用于管理 Git Hooks,以及只检查 Git 暂存区中的文件。

这些变化说明,Vite+ 开始从“能不能用”进入到另一个阶段:

已有项目怎么迁进来,以及团队怎么长期维护。

这两件事,其实比创建一个新项目更重要。

不过也要注意,官方目前仍把:

  • Remote Cache
  • 更深入的 Monorepo 诊断
  • vp release
  • vp docs

列为后续规划。

这些能力还不能算进 Vite+ 1.0 当前的选型收益里。

老项目别急着一键迁移

如果已经有一套稳定运行的 Vite 项目,我不建议上来就把 ESLint、Prettier、Vitest、tsup 全部替换掉。

官方迁移文档建议,未使用 Vite+ 的项目先升级到:

1
2
Vite 8+
Vitest 4.1+

然后再执行:

1
vp migrate

它会尝试:

更新相关依赖;

调整部分源码导入;

修改项目脚本;

合并部分工具配置到 vite.config.ts;

迁移 ESLint、Prettier、tsup 等相关配置。

但官方也明确提醒:

多数项目执行 vp migrate 之后,仍然需要人工检查和调整。

这很正常。

真正的生产项目往往还有自定义 ESLint 规则、特殊测试环境、Vite 插件、构建脚本、Git Hooks 和 CI 流程。

这些东西很难靠一个迁移命令全部自动处理。

所以对于已有项目,我更建议找一个风险较低、方便回退的项目先试。

保留原来的依赖和 Lockfile,运行:

1
vp migrate

检查改动后,再依次验证:

1
2
3
4
vp install
vp check
vp test
vp build

如果是组件库,则最后使用:

1
vp pack

先确认真实项目中的检查、测试和构建结果,再决定是否扩大迁移范围。

Vite+ 真正值得关注的地方

Vite+ 1.0 最吸引我的,并不是“又出现了一套新的前端工具”。

恰恰相反。

它想解决的是:

前端工具已经太多了,能不能少维护一点?

过去我们讨论前端工程化,经常关注单个工具:

哪个 Bundler 更快?

哪个 Linter 性能更高?

哪个 Formatter 更好用?

但对于团队来说,还有一个更现实的问题:

这些工具到底由谁来组合、升级和维护?

Vite+ 给出的答案,是把 Vite、Vitest、Oxc、Rolldown、tsdown 等能力整合到一套统一工具链里,通过一个 vp 提供稳定的使用方式。

这套思路对新项目尤其有吸引力。

新项目完全可以直接从:

1
vp create

开始体验。

已有项目则没必要为了“统一”而强行迁移,先评估现有工程配置,再通过真实项目验证迁移成本。

对我来说,判断 Vite+ 是否值得使用的标准其实很简单:

下一次升级前端工具链时,团队需要自己维护的东西,是否真的变少了?

如果答案是肯定的,那可能才是 Vite+ 1.0 最大的价值。

 REWARD AUTHOR
 Comments
Comment plugin failed to load
Loading comment plugin