老專案從yarn遷移到pnpm的心得記錄
步驟如下：
1. 安裝pnpm
2. 重新安裝node_modules
3. 遷移後的各種問題
4. 刪除yarn相關
1. 安裝pnpm
我一開始是依照網路上的方法
執行corepack enable，然後執行pnpm import
這樣做會直接安裝最新版本的pnpm
但如果專案是舊版本node.js，會因為版本不符而安裝失敗
強制安裝舊版本pnpm，去pnpm的github上挑了一個對應node版本的舊版本pnpm
npm install -g pnpm@8.15.8 --force
2. 重新安裝node_modules
建立一個.npmrc檔
輸入內容
enable-pre-post-scripts = true
讓package.json裡的pre和post的文本可以執行
預設是true，但不知道為什麼從yarn轉到pnpm就變成false
原本有設workspace的，也就是一個專案裡有很多個專案
要另外開一個檔案
pnpm-workspace.yaml
內容可以參考官方網站：
https://pnpm.io/pnpm-workspace_yaml
執行pnpm import，
會依據原本的yarn.lock和package.json產生pnpm-lock.yaml
如果碰到package.json的resolutions裡一些特殊字元造成解析失敗
可以嘗試刪掉特殊字元或是問AI要怎麼改
有了pnpm-lock.yaml之後，把現有node_modules刪除，然後用pnpm重新安裝一次
pnpm install
之後要檢查幾個點：
1. 安裝完後，pnpm dev啟動專案，看有沒有碰到問題
2. 用pnpm tsc檢查typescript型別，看有沒有碰到問題
3. pnpm build輸出網站，看有沒有碰到問題
3. 遷移後的各種問題
問題1：
幽靈依賴(ghost dependencies)的問題
簡單的說，就是A包依賴B包，但實際上只有安裝A包
所以在使用B包資源時會出現找不到的問題
這個問題有三種解法：
一、設定 public-hoist-pattern[] (推薦做法)
在.npmrc裡設定public-hoist-pattern[] = <包的名字>
把需要的包拉進node_modules，例如：
public-hoist-pattern[] = gatsby-react-router-scroll
就是把gatsby-react-router-scroll這個包拉進來
另一個常用的例子：
public-hoist-pattern[] = *type*
*type*代表所有名字中包含type的包，經常會用到
再舉一個例子，ant-design的type全都在rc開頭的包裡，所以rc開頭的包都要拉進來
public-hoist-pattern[] = rc*
可以參考官方網頁：
https://pnpm.io/npmrc#public-hoist-pattern
二、設定shamefully-hoist=true
在.npmrc裡設定shamefully-hoist=true
把全部的包都拉進node_modules，但這樣就變成和yarn、npm一樣
失去了使用pnpm的優勢
三、安裝缺少的packages
這樣做會碰到版本問題
例如說A包依賴B包，A包升級了，B包也要跟著升級
如果A包依賴了很多包，全部都要手動升級會很累
問題2：
ant-design/icons出現型別問題，說缺了translate這個屬性
後來發現是@types/react版本問題
因為package.json裡resolution那邊是16.9.11
所以pnpm產生的pnpm-lock.yaml也是16.9.11
自然就是安裝16.9.11，然後就會出錯
後來才發現原本專案裡的@types/react是16.14.0
不知道為什麼沒有被resolution限制在16.9.11，真神奇
解決方法：先在package.json裡resolution版本改成16.14.0
然後重新pnpm import和pnpm install
問題3：
我要commit的時候，出現以下錯誤：
ERR_PNPM_FETCH_404 GET https://registry.npmjs.org/--no-install: Not Found - 404
--no-install is not in the npm registry, or you have no permission to fetch it.
No authorization header was set for the request.
解決方法：pnpm dlx husky install
我也不懂為什麼，好像是husky的問題
參考網址：
https://github.com/pnpm/pnpm/issues/4790
4. 刪除yarn相關
最後確定都沒問題後，移除yarn相關：
1. 刪除yarn.lock
2. 移除.gitignore裡yarn相關
3. 移除lerna，執行pnpm remove lerna
4. README.md改寫
以上
留言列表
