2023/03/20

紀錄從 Yarn 改為 pnpm Node Package Manager

前言

本篇文章簡單紀錄既有開發中的專案原先使用yarn套件管理器，改為使用pnpm做為套件管理器的設定過程。

Migration

一、用npm安裝pnpm

安裝指令

npm install -g pnpm

確認安裝版本

pnpm --version

(也可以為pnpm加入簡短別名pn，設定方式請往下看)

二、刪除node_modules

npx npkill

三、編輯package.json

新增一個腳本

"scripts": {
  "preinstall": "npx only-allow pnpm", 
  ...
}

這可以防止其他開發人員或是自己以後意外安裝帶有pnpm以外的任何依賴項。

建立pnpm-workspace.yaml (非必要，適合monorepo)

*for monorepo

packages:
  # include packages in subfolders (e.g. apps/ and packages/)
  - "apps/**"
  - 'packages/**'
  # if required, exclude some directories
  - '!**/test/**'

四、執行pnpm import

在專案執行 pnpm import
這個指令會產生pnpm-lock.yaml檔案(基於我們專案內的yarn.lock檔案或是packages-lock.json)

安裝之後可能會出現如下錯誤:

 WARN  Issues with peer dependencies found
.
└─┬ eslint-config-next 13.2.4
  ├── ✕ missing peer typescript@>=3.3.1
  └─┬ @typescript-eslint/parser 5.55.0
    ├── ✕ missing peer typescript@"*"
    └─┬ @typescript-eslint/typescript-estree 5.55.0
      ├── ✕ missing peer typescript@"*"
      └─┬ tsutils 3.21.0
        └── ✕ missing peer typescript@">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
Peer dependencies that should be installed:
  typescript@>=3.3.1  
pericode@MSI:~/dev-projects/react-portfolio$ 

這告訴我專案缺少一些peer dependencies，當然我可以手動安裝缺少的peer dependencies，例如安裝typescript@>=3.3.11。
我選擇設定pnpm的auto-install-peers選項為true，這樣pnpm會自動安裝peer dependencies。
Fix
在專案根目錄新增.npmrc檔案，新增內容:

auto-install-peers=true

五、刪除 yarn.lock 檔案 (or packages-lock.json)

刪除專案根目錄裡的yarn.lock 或是 packages-lock.json

六、安裝依賴項

執行安裝指令:

pnpm i 

七、以 pnpm (pn) 指令取代 npm run (or yarn)

修改package.json或其他有關檔案的Script，確保專案以pnpm指令管理。
例如執行pnpm dev 命令部署開發專案，確定正常執行。

使用較短的別名: pn

覺得字數太多的話，我們可以設定改用比較短的別名pn來取代pnpm。
例如在 POSIX系統中(ex: Linux)加入永久別名，以記事本開啟.bashrc文件，
將下面這行命令貼上儲存。

# pnpm shorthand
alias pn=pnpm

之後可以用較簡短的pn dev指令來執行本地部署開發。

參考

• https://dev.to/andreychernykh/yarn-npm-to-pnpm-migration-guide-2n04
• https://stackoverflow.com/questions/72468635/pnpm-peer-dependencies-auto-install
• https://pnpm.io/installation