Node.js版本控制與套件管理工具 feat. NVM版本控制

發表於 更新於 分類於 閱讀次數： 文章字數： 3.8k

前言

蠢人如我，在迎接2026的前幾天，不小心強制更新node.js與套件版本，導致原本hexo整個壞掉。雖然舊文章都還在，但hexo就是沒辦法正常執行，在萬念俱灰下選擇重新建立一個hexo專案時，一不小心被我修好🥹。

序

事情是這樣的，近來在更新LeetCode筆記時想說來用一下markdown內建的flowchart，原意是不想要另外畫圖，用MD語法就可以馬上產出流程圖，但hexo本身似乎不支援。✅已解決 2025.01.02

為此查了許多文章，安裝了hexo-filter-mermaid-diagrams套件

1
npm install --save hexo-filter-mermaid-diagrams

結果至今(修好hexo)仍沒辦法使用flowchart，想說也許是npm套件版本問題

1
npm audit fix

接著又使用(真的不要亂用🙅🏻‍♂️)

1
npm audit fix --force # ‼️ 這語法真的沒事別亂用

先是hexo -v直接開始報錯，再來是hexo s指令無效，最後是存取本地端網站顯示Cannot GET /

  1. 首先，hexo -v報錯是因為hexo與node.js版本不相容，有可能是node.js太新，亦有可能是hexo太新，甚至是你用的主題僅適用於舊版本的hexo
  2. hexo s執行時跑出hexo相關指令提示，代表hexo server套件被移除了，從hexo 3開始，server套件被獨立出來，來源。
  3. 訪問localhost:4000顯示Cannot GET /，我認為也是版本相容性的問題，在使用測試過的版本後就可以正常顯示了，這裡有測試過的版本，我目前是使用#5643這個版本。

Node.js版本控制, NVM

node.js目前不是很熟悉…且之前使用hexo時偷懶省略的這個步驟。與python相同，不同專案有可能使用不同版本的node.js導致不相容(本人已深刻體會)，NVM可以控制node.js版本與其套件管理工具的版本(npm)，不同的是python優點是每個專案都有一個.venv虛擬環境可以很直接地知道目前是使用全域的版本還是專案的版本，nvm有.nvmrc放置在專案中，但似乎仍須執行nvm install或nvm use才會套用。

NVM安裝請參考這裡
安裝後仍須設定全域環境變數，才能在不同路徑使用。且區分使用bash或zsh

  • bash
    在~/.bash_profile填入
    1
    2
    3
    4
    export PATH=$PATH:/usr/local/mysql/bin
    export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
    [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
  • zah
    在~/.zshrc填入
    1
    2
    3
    export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
    [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

設定後可查看目前可以安裝的版本nvm list

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
       v16.20.2
->     v20.19.6
       v24.12.0
         system
default -> lts/* (-> v24.12.0)
node -> stable (-> v24.12.0) (default)
stable -> 24.12 (-> v24.12.0) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/krypton (-> v24.12.0)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.12 (-> N/A)
lts/fermium -> v14.21.3 (-> N/A)
lts/gallium -> v16.20.2
lts/hydrogen -> v18.20.8 (-> N/A)
lts/iron -> v20.19.6
lts/jod -> v22.21.1 (-> N/A)
lts/krypton -> v24.12.0

目前使用lts/iron(v20.19.6)版本，若要調整版本可先使用nvm install <version>安裝並自動套用

接著就可以使用nvm use <version>切換版本

Hexo套件管理

hexo建立專案後(hexo init)似乎會使用目前最新的node.js版本安裝相關套件，但這也是一個痛點，hexo的Next主題還未相容最新的node.js版本。
而在hexo專案中有package.json這個檔案是npm安裝套件的依據，我更改成已測試的版本後就沒問題了🥹

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": "7.3.0"
  },
  "dependencies": {
    "hexo": "^7.3.0",
    "hexo-bridge": "^2.0.3",
    "hexo-generator-archive": "^2.0.0",
    "hexo-generator-category": "^2.0.0",
    "hexo-generator-index": "^4.0.0",
    "hexo-generator-tag": "^2.0.0",
    "hexo-renderer-ejs": "^2.0.0",
    "hexo-renderer-marked": "^6.3.0",
    "hexo-renderer-stylus": "^3.0.1",
    "hexo-server": "^3.0.0",
    "hexo-theme-landscape": "^1.0.0"
  }
}

修改後使用npm install安裝套件
最後再hexo clean + hexo g就可以正常產出靜態資源了🎉

Tips
雖然hexo可以部署至github顯示個人網站，但僅部署靜態資源而已，仍須將整包專案加入版控當中😢

在Hexo中顯示markdown flowchart

2025.01.02

  1. 安裝套件npm install --save hexo-filter-mermaid-diagrams
  2. 修改themes/<your_theme>/_config.yml 
    1
    2
    3
    4
    5
    6
    7
    # Mermaid tag
    mermaid:
      enable: true # 開啟
      # Available themes: default | dark | forest | neutral
      theme:
        light: default
        dark: dark

結論

  • 千萬小心使用npm audit fix --force這個指令‼️
  • hexo僅部署靜態資源至github，專案仍須版控
  • markdown可顯示flowchart 2026.01.02