筆者原本選用「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 版本切換之苦～

工欲善其事，必先利其器

為什麼寫這篇文章？

因為我自己在剛接觸程式時最痛恨的就是環境設定
不知道是我跟電腦不合還是怎樣，每次我學新東西的時候總是在環境設定這個環節卡的不要不要的
為了避免讀者在之後實戰的文章中一邊看一邊心理罵:「為什麼我們程式一模一樣但我的就是會錯?」這樣的憾事發生，所以我決定詳細的說明這個專案所需安裝的一切環境，並附上我本機安裝的工具版本，讓大家在日後的文章中可以順利操作與學習

你們實際操作時通常都有新的版本了，如果最新版本有問題可以切換到筆者的版本來操作

需要安裝哪些工具

說明包含 windows/mac 兩個系統的設定

1. Node.js
2. NVM
3. git
4. yarn
5. VSCode

開發環境介紹 & 設定

1. Node.js 官網

能夠在 server 端運行 JavaScript 的開放原始碼、跨平台 JavaScript 的執行環境。前端工程師的福音

筆者安裝的版本：v16.19.1 (使用nvm安裝，後面會介紹)

2. nvm 官網

由於 Node.js 更新速度是非常快的，而許多套件有 Node.js 版本的相依性，透過NVM你可以輕鬆切換 Node.js 版本來符合不同專案的使用環境

windows 安裝步驟

1. 先進入windows下載頁面
2. 選擇最新版本的下載 nvm-setup.zip(筆者版本為1.1.7，你看到這篇文章時可能有提供更新的版本)

3. 下載後一路瘋狂下一步即可

4. 安裝後開啟命令提示字元(CMD)

5. 在 CMD 輸入指令確認 nvm 是否安裝成功

mac 安裝步驟

1. 打開終端機(Terminal)，以下步驟皆在終端機操作
2. mac 建議先下載 Homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

3. 下載後安裝 nvm

brew install nvm

4. 在終端機輸入指令確認 nvm 是否安裝成功

用 NVM 安裝 node.js

• 指令：nvm install [version]
• 請切記要安裝一個 Node.js 版本(請選用LTS版本)，不然你寫的程式會沒有可以運行的環境

nvm install 16.19.1

筆者nvm安裝版本：0.39.3

3. git 官網

這是對於程式版本控制的工具，透過他你可以輕鬆回到過去，並且在多人協作時也能有效管控
windows下載頁面、mac下載頁面

我有朋友使用 windows 怎麼樣都無法正常安裝 git，如果你也遇到了這個不幸，你還是有Git桌面板可以選擇的

常用指令

• 抓取遠端數據庫(僅確認有什麼更新，不合併)

git fetch

• 抓取遠端數據庫更新

git pull

• 更新遠端數據庫

git push

筆者windows git安裝版本：2.27.0.windows.1

4. yarn

這是專門安裝套件的軟體，站在巨人的肩膀上你才能看得更遠，妥善運用別人提供的套件，程式的路能走得更遠
下載頁面

常用指令

• 依據 package.json 安裝所有套件

yarn

• 安裝到 dependencies

yarn add [package]

• 安裝到 devDependencies

yarn add [package] –save-dev

• 全域安裝套件(使該套件可在電腦任何位置被呼叫)

yarn global add [package]

筆者yarn安裝版本：1.19.2

5. VScode 官網

現在已經過了用記事本在打程式的年代了，透過 IDE(整合開發環境)可以大幅增加你撰寫程式的速度
VScode下載頁面