使用 nvm + .nvmrc 讓 Node.js 版本在不同的專案間自動切換

林鼎淵 — Wed, 26 Oct 2022 23:01:53 +0800

Node.js 版本更新速度極快，但未必所有套件都能相容於新的版本，這造成每個專案的 Node.js 版本不盡相同；即使 nvm 可以幫我們快速切換 Node.js 版本還是不太方便，所以今天要介紹如何透過 .nvmrc 搭配 zsh or bash script 讓你在專案間自動切換 Node.js 版本。

筆者原本選用「avn」這個套件，但它真的已經年久失修了無法使用連結

STEP 1：建立兩個 Node.js 專案

在終端機複製貼上下方指令即可。

mkdir project-a
cd project-a
npm init -y
cd ..
mkdir project-b
cd project-b
npm init -y
cd ..

STEP 2：安裝特定的 Node.js 版本以供測試

尚未 nvm 安裝的讀者，可以先透過如下指令安裝，更新的版本請參考連結。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash

安裝完後建議重開終端機讓它生效，接著透過它安裝 Node.js 特定版本：

nvm install 12
nvm install 16

STEP 3：在兩個 Node.js 專案中加入「.nvmrc」並指定 Node.js 版本

接下來我們就分別在兩個專案中新增「.nvmrc」的檔案，並個別指定 12、16 版本方便測試（讀者在終端機複製貼上下方指令即可）。

cd project-a
touch .nvmrc
echo "12" >> .nvmrc
cd ..
cd project-b
touch .nvmrc
echo "16" >> .nvmrc
cd ..

筆者為了方便 Demo 而指定大版本，「.nvmrc」檔案是能吃「x.y.z」版本號的。

STEP 4：調整 zsh script

在終端機輸入 vi ~/.zshrc（每個人的路徑可能不同），到最後一行貼上下方 script：

# place this after nvm initialization!
autoload -U add-zsh-hook
load-nvmrc() {
  local node_version="$(nvm version)"
  local nvmrc_path="$(nvm_find_nvmrc)"
  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")
    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$node_version" ]; then
      nvm use
    fi
  elif [ "$node_version" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}
add-zsh-hook chpwd load-nvmrc
load-nvmrc

儲存後再輸入 source ~/.zshrc 即可讓 script 生效。

這邊簡單說明 script 運行邏輯：

資料夾下有「.nvmrc」的檔案：若指定的 Node.js 版本已安裝就透過「nvm use」切換，假使該版本尚未安裝就會執行「nvm install」。
資料夾下沒有「.nvmrc」的檔案：切換回 Node.js 默認的版本。

唯一要注意的是，記得把這段 script 放在 nvm 初始化後的位置（或是直接放在最後面也可以）。

上面的 script 參考自 nvm 官網，如果讀者使用的是 bash script 請參考連結。

STEP 5：實測是否有效

筆者在開頭故意切換到 Node.js 18 的版本，然後再依序切換到「project-a」以及「project-b」的資料夾，從下圖大家可以看到 Node.js 的版本都順利切換嚕！

希望這篇文章，有幫大家解決不同專案的 Node.js 版本切換之苦～

Zsh｜林鼎淵 Dean Lin