小編精選 - 技術文章翻譯 · 03月23日

大神 Evan You 再次出手，前端工具鏈整合 — 本文為對 vite plus 官方 README 文件的翻譯

===================================================

viteplus-dark.Cy6PBzfr.svg

**Web 統一工具鏈**執行時與套件管理、建立、開發、檢查、測試、建置、打包以及單一倉庫（monorepo）任務快取，全部整合在一個套件中

Vite+ 是本地 Web 開發的統一入口。它將 Vite、Vitest、Oxlint、Oxfmt、Rolldown、tsdown 與 Vite Task 整合到一個零組態工具鏈中，同時還管理執行時與套件管理器的工作流程：

vp env： 全域與專案層級管理 Node.js
vp install： 自動偵測套件管理器並安裝相依套件
vp dev： 執行 Vite 的快速原生 ESM 開發伺服器，支援即時熱重載
vp check： 一鍵執行格式化、程式碼檢查與型別檢查
vp test： 透過內建的 Vitest 執行測試
vp build： 使用 Vite + Rolldown 建置生產環境應用
vp run： 執行單一倉庫任務，支援快取與相依感知排程
vp pack： 建置用於 npm 發佈的函式庫或獨立應用二進位檔
vp create / vp migrate： 建立新專案並遷移既有專案

所有這些都可以從專案根目錄進行設定，並可在 Vite 的框架生態中運作。Vite+ 以 MIT 授權釋出且完全開源。

開始使用

全域安裝 Vite+，命令會建立 vp：

Linux 或 macOS：

curl -fsSL https://vite.plus | bash

Windows（PowerShell）：

irm https://viteplus.dev/install.ps1 | iex

vp 處理完整的開發生命週期，包括套件管理、開發伺服器、程式碼檢查、格式化、測試與生產建置。

設定 Vite+

Vite+ 可以使用專案根目錄下的單一 vite.config.ts 進行設定：

import { defineConfig } from 'vite-plus';

export default defineConfig({
  // 用於開發/建置/預覽的標準 Vite 設定。
  plugins: [],

  // Vitest 設定。
  test: {
    include: ['src/**/*.test.ts'],
  },

  // Oxlint 設定。
  lint: {
    ignorePatterns: ['dist/**'],
  },

  // Oxfmt 設定。
  fmt: {
    semi: true,
    singleQuote: true,
  },

  // Vite Task 設定。
  run: {
    tasks: {
      'generate:icons': {
        command: 'node scripts/generate-icons.js',
        envs: ['ICON_THEME'],
      },
    },
  },

  // `vp staged` 設定。
  staged: {
    '*': 'vp check --fix',
  },
});

這樣，您可以將開發伺服器、建置、測試、程式碼檢查、格式化、任務執行器與暫存檔案工作流的設定集中於一處，並提供型別安全的設定與共用的預設值。

使用 vp migrate 遷移到 Vite+。它會將特定工具的設定檔（例如 .oxlintrc*、.oxfmtrc* 與 lint-staged 設定）合併到 vite.config.ts 中。

CLI 工作流程（`vp help`）

啟動

create - 從範本建立新專案
migrate - 將既有專案遷移到 Vite+
config - 設定 hooks 與 proxy 整合
staged - 對暫存檔案執行程式碼檢查
install (i) - 安裝相依套件
env - 管理 Node.js 版本

開發

dev - 執行開發伺服器
check - 執行格式化、程式碼檢查與型別檢查
lint - 程式碼檢查
fmt - 格式化程式碼
test - 執行測試

執行

run - 執行單一倉庫任務
exec - 從本地的 node_modules/.bin 執行命令
dlx - 執行套件二進位檔而無需安裝為相依
cache - 管理任務快取

建置

build - 生產環境建置
pack - 建置函式庫
preview - 預覽生產建置

管理相依套件
Vite+ 會根據 packageManager 與鎖定檔自動包裝您的套件管理器（pnpm、npm 或 Yarn）：

add - 將套件加入相依
remove (rm, un, uninstall) - 從相依中移除套件
update (up) - 將套件更新到最新版本
dedupe - 去除重複相依
outdated - 檢查過時的套件
list (ls) - 列出已安裝的套件
why (explain) - 顯示為何安裝了某個套件
info (view, show) - 從註冊表檢視套件的 metadata
link (ln) / unlink - 管理本地套件連結
pm - 將命令轉發給套件管理器

維護

upgrade - 將 vp 自身更新到最新版本
implode - 移除 vp 與所有相關資料

建立您的第一個 Vite+ 專案

使用 vp create 建立新專案：

vp create

您也可以在專案內部執行 vp create，以向專案新增新的應用或函式庫。

遷移既有專案

您可以將既有專案遷移到 Vite+：

vp migrate

GitHub Actions

使用官方的 setup-vp action 在 GitHub Actions 中安裝 Vite+：

- uses: voidzero-dev/setup-vp@v1
  with:
    node-version: '22'
    cache: true

手動安裝與遷移

若您正在手動將專案遷移到 Vite+，請先安裝下列開發相依：

npm install -D vite-plus @voidzero-dev/vite-plus-core@latest

您需要對 vite 與 vitest 在套件管理器中加入覆蓋（overrides / resolutions / overrides in pnpm）以確保其他相依 Vite 與 Vitest 的套件使用 Vite+ 的版本：

package.json（範例，使用 overrides）：

"overrides": {
  "vite": "npm:@voidzero-dev/vite-plus-core@latest",
  "vitest": "npm:@voidzero-dev/vite-plus-test@latest"
}

若您使用 pnpm，請在 pnpm-workspace.yaml 中加入：

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

或者，如果您使用 Yarn，可以在 package.json 中使用 resolutions：


"resolutions": {
  "vite": "npm:@voidzero-dev/vite-plus-core@latest",
  "vitest": "npm:@voidzero-dev/vite-plus-test@latest"
}

---

原文出處：https://juejin.cn/post/7619245854759780367