使用 PNPM 高效管理 Node.js 與 Bun 專案｜實用 Workspace 與 Catalog 技巧

使用 PNPM 做 Node 及 Bun 專案管理的幾個小 tips

在現今的開發環境中，Node.js 和 Bun 已經成為流行的選擇，尤其是在構建高效的 JavaScript 應用程式時。PNPM 作為一個高效的套件管理工具，能夠幫助開發者更好地管理這些專案。以下是幾個使用 PNPM 進行 Node.js 和 Bun 專案管理的小技巧。

快速安裝與更新套件

PNPM 以其獨特的方式來管理套件，使用符號連結來減少重複安裝的檔案。這不僅節省了磁碟空間，還提高了安裝速度。要安裝新的套件，可以使用以下指令：

pnpm add <package-name-a> <package-name-b>

若要更新已安裝的套件，則可以使用：

pnpm up <package-name-a> <package-name-b> --latest

這樣可以確保你的專案始終使用最新的套件版本。

pnpm up <package-name-a> --filter <app-name-a>

使用 Workspace 管理多個專案

對於大型專案或多個相關專案的開發(monorepo)，PNPM 的 Workspace 功能非常有用。使用 Workspace，可以在同一個專案中管理多個套件，並且能夠輕鬆地在它們之間共享依賴。

要開始使用 Workspace，首先在根目錄下創建一個 pnpm-workspace.yaml 文件，然後指定你的子專案：

packages:
  - 'apps/*'
  - 'packages/*'

這樣就可以在 packages 及 apps 目錄下管理多個子專案了。

透過 Catalogs 管理 Workspace 套件版本

catalog 是一個 Workspace 的功能，用於將依賴項版本範圍定義為可重複使用常數。

你可以在 pnpm-workspace.yaml 定義 catalog

catalog:
  "@tanstack/react-query": ^5.51.24
  "@trpc/client": ^11.0.0-rc.482
  "@trpc/react-query": ^11.0.0-rc.482
  "@trpc/server": ^11.0.0-rc.482
  "@trpc/next": ^11.0.0-rc.482
  eslint: ^9.9.0
  typescript: ^5.5.4

並在要引用的 workpace package.json 中下 catalog:

{
  "name": "@acme/app",
  "dependencies": {
    "@tanstack/react-query": "catalog:",
    "@trpc/client": "catalog:",
    // ...
  }
}

你也可以配合 alias 的方式指定多個版本

catalogs:
  # Can be referenced through "catalog:react18"
  react18:
    react: ^18
    react-dom: ^18

  # Can be referenced through "catalog:react19"
  react19:
    react: ^19
    react-dom: ^19

透過 Aliases 來客製化套件名稱

有時候若想在同一個專案內安裝多個版本的套件時，可以用 alias 的方式來整定特定名稱跟版本

例如上次我們有個專案用到 @mui/x-date-pickers 這個套件，但由於以前用的是舊版本，後來有些地方要用新版的元件但又不想讓過去的地方有 BREAKING CHANGE，這時候 alias 就可以解決這問題

{
  "name": "@acme/app",
  "dependencies": {
    "@mui/x-date-pickers": "^7.6.2",
    "@mui/x-date-pickers-legacy": "npm:@mui/[email protected]",
    // ...
  }
}

並在要 import 的地方改用對應的 alias 做區分即可

import { DateTimePicker } from "@mui/x-date-pickers-legacy/DateTimePicker";

import { DesktopDateTimePicker } from "@mui/x-date-pickers/DesktopDateTimePicker";

整合 Bun 進行更高效的開發

Bun 是一個新興的 JavaScript 執行環境，與 PNPM 結合使用可以進一步提升開發效率。你可以利用 PNPM 管理 Bun 的依賴，並使用 Bun 的快速啟動和執行性能來加快開發流程。

要開始使用 Bun，只需安裝 Bun 並根據需要添加依賴即可。這樣，無論是使用 Node.js 還是 Bun，你都可以享受 PNPM 帶來的高效管理體驗。

結論

使用 PNPM 來管理 Node.js 和 Bun 專案可以顯著提升開發效率。透過上述幾個小技巧，你可以更輕鬆地安裝和更新套件，管理多個專案，以及整合新興的開發工具。希望這些技巧能幫助你在專案開發中取得更好的成果！