【NPM、GitHub】解決 npm 版本落後 GitHub 版本的問題

回覆文章分享
【NPM、GitHub】解決 npm 版本落後 GitHub 版本的問題

本篇重點

  • 如果發現 npm 套件的版本有 bug，但 GitHub 上的版本已修正，應該如何安裝修正版套件？
  • 怎麼處理 npm 版本落後於 GitHub 版本的狀況
  • 怎麼使用 npm 安裝 GitHub 套件的指定版本？
  • 怎麼使用 npm 更新 GitHub 套件？
  • hexo-generator-sitemap 的 3.0.1 版本存在 bug，導致沒有指定 sitemap 檔案，影響網站 seo

本網站使用 hexo-generator-sitemap 自動生成站點地圖（sitemap.xml），但透過 npm 安裝後，套件沒有正常運作，檢查後發現 npm 套件的版本存在 bug，而套件的 GitHub 儲存庫已修正問題，但修正版尚未發佈至 npm。

本篇文章將以 hexo-generator-sitemap 為例，分享如何處理 npm 版本落後於 GitHub 版本的狀況。

使用 npm 安裝 GitHub 套件指定版本

在 GitHub 找到相對應的套件，查找正確的版本（特定分支或 commit id 或 tag 版號）

方法一：使用 npm 指令安裝套件

npm
1
2
3
4
5
6
7
8
# 安裝指定 branch 版本
npm install <github-username>/<repository-name>#<branch>

# 安裝指定 commit 版本
npm install <github-username>/<repository-name>#<commit-hash>

# 安裝指定 tag 版本
npm install <github-username>/<repository-name>#<tag>

健忘筆記

也可以使用 npm install git+https://github.com/<github-username>/<repository-name>.git，這同等於 npm install <github-username>/<repository-name>。會使用 git+https://... 的情境可能是如果儲存庫在自建 Git 伺服器上或非 GitHub 平台，需要更高的靈活性或精確指定完整 URL。

範例

npm
1
2
3
4
5
6
7
8
# 安裝最新的 master 分支版本
npm install hexojs/hexo-generator-sitemap#master

# 安裝指定 commit 版本
npm install hexojs/hexo-generator-sitemap#3ac80ce7a3c2506e99b7bf69010ac00b363e6222

# 安裝指定 tag 版本
npm install hexojs/hexo-generator-sitemap#v3.1.0

健忘筆記

如果沒有指定版本 npm install hexojs/hexo-generator-sitemap，預設安裝該 GitHub 儲存庫 default branch 的最新提交（通常是 main 或 master 分支）

方法二：修改 package.json 檔案並安裝

將套件的寫入 package.json 並指定版本

1
2
3
4
// 安裝指定 branch 或 tag 或 commit 版本
"dependencies": {
  "<package-name>": "github:<username>/<repository>#<tag-or-commit>"
}

執行 npm install 安裝套件

npm
1
npm install

範例

1
2
3
4
// 安裝指定 branch 或 tag 或 commit 版本
"dependencies": {
  "hexo-generator-sitemap": "github:hexojs/hexo-generator-sitemap#master"
}
npm
1
npm install

健忘筆記

如果沒有指定版本 "hexo-generator-sitemap": "github:hexojs/hexo-generator-sitemap#master"，預設安裝該 GitHub 儲存庫的 default branch 的最新提交（通常是 main 或 master 分支）

使用 npm 更新 GitHub 套件

重新安裝覆蓋原本的版本

npm
1
2
# 安裝儲存庫預設分支的最新版本
npm install <github-username>/<repository-name>

範例

npm
1
2
# 安裝 hexojs/hexo-generator-sitemap 的最新版本
npm install hexojs/hexo-generator-sitemap

如果 package.json 的設定是 "hexo-generator-sitemap": "github:hexojs/hexo-generator-sitemap"，可以直接使用 npm install 就會安裝套件的最新版本！

健忘筆記

npm update 只針對 package.json 中指向 NPM 註冊表的套件進行檢查與更新，所以無法使用 npm update 來更新 GitHub 安裝的套件。

hexo-generator-sitemap 3.0.1 版本的 bug

錯誤說明

套件的 lib/rel.js 負責將 <link rel="sitemap" href="..." /> 插入到 HTML 檔案的 <head> 標籤內。

lib/rel.jsnpm套件
1
2
3
// 將 sitemap 設定插到 <head> 的最後面
const relSitemap = `<link rel="sitemap" type="application/xml" title="Sitemap" href="${url_for.call(this, path)}">`;
data.replace(/<head>(?!<\/head>).+?<\/head>/, str => str.replace('</head>', `${relSitemap}</head>`));

當前正規表達式只能匹配到 <head> 標籤單行存在的狀況

html
1
<head>...</head>

如果 <head> 標籤是多行排列時，正規表達式無法正確匹配，導致 sitemap 設定未寫入，影響網站 seo

html
1
2
3
4
// 正規表達式無法匹配
<head>
    <meta charset="utf-8">
</head>

修正錯誤

hexo-generator-sitemap 的 GitHub 儲存庫已修正 <head> 標籤多行排列，正規表達式無法正確匹配的錯誤。

lib/rel.jsGitHub修改紀錄
1
2
- return data.replace(/<head>(?!<\/head>).+?<\/head>/, str => str.replace('</head>', `${relSitemap}</head>`));
+ return data.replace(/<head>(?!<\/head>).+?<\/head>/s, str => str.replace('</head>', `${relSitemap}</head>`));

啟用修飾詞 s 讓特殊字元 . 可以匹配所有字元，包括換行符（\n 或 \r\n）。

結論

在開發過程中發現 hexo-generator-sitemap 的錯誤，進一步了解到 NPM 套件版本有時無法完全跟上 GitHub 上的最新版本。為了解決這個問題，可以直接從 GitHub 安裝最新修正的版本，讓套件正常運行。但需要注意的是這種方法只是暫時性的解決方案，未來還是需要關注 NPM 的正式版本更新，確保專案的長期穩定性和可維護性。如果你有其他解決方法或建議，也歡迎在下方留言分享～

延伸閱讀

【NPM 官方文件】npm install 介紹
【NPM】hexo-generator-sitemap 套件
【GitHub】hexo-generator-sitemap 套件
【Fooish 程式技術】Regex 正規表示法 - 修飾詞

【NPM、GitHub】解決 npm 版本落後 GitHub 版本的問題

https://forgetfulengineer.github.io/Other/NPM/Resolving-the-Issue-of-npm-Version-Lagging-Behind-the-GitHub-Version/

作者

健忘工程師

發表於

2024-12-31

更新於

2024-12-31

許可協議

你可能也想看

【Git、Hexo】deploy github 檔名大小寫問題
【Hexo】多台電腦佈署 GitHub page 的問題
【Git】了解 git config 設定

評論

follow.it

歡迎訂閱電子報！追蹤【健忘工程師】的最新資訊～

廣告

最新文章

廣告

×
複製完成