# 虎年行大運 ~ NodeJS 學習 - NVM、Yarn、Node 環境安裝

## 【前言】
最近因緣際會碰了 NodeJS 這一塊完全沒有經驗的領域，趁機學習如何建置NVM、NPM、Node 環境，並嘗試用知名的 Express 框架建立 API。

這邊連動的 DB 是 Firebase，一款 Google 非常知名的雲端資料倉儲服務，其實也已經支援非常多功能了，因此就瞬邊碰碰當作經驗。

## 【NVM 安裝】
**NVM** 全名 **Node Version Manager**

即為 Node 版本控制，這會與將要使用哪一種版本的 NodeJS 進行開發完全相關，也因為 NPM 逐漸被 Yarn 取代了，因此這裡不會介紹如何安裝 NPM 的部分。

[NVM Github](https://github.com/nvm-sh/nvm)
請到上述連結進行相關環境的 NVM 檔案下載，Kai 因為是用 Windows 環境進行開發，因此另外提供適用於 Windows 的連結在此 [NVM for Windows](https://github.com/coreybutler/nvm-windows/releases)

安裝好後，可以在終端機透過以下指令確認相關訊息

nvm

> 圖示就是 NVM 環境安裝好的
> 若無法取得相同結果，請檢查
> 1. 環境參數是否有正確設置
> 2. 嘗試用系統管理者權限開啟終端機
> 3. 又或者是安裝在非 C 槽環境的話，記得去 /nvm/settings.txt 將內容改成以下
> ```
> root: D:nvm
> path: D:\nvm\nodejs
> ```
> 這樣環境指令才能正確抓到哦!

可以透過以下指令進行 NVM 的控制
| Command | Info |
| ------- | ---- |
| nvm ls-remote | 會列出目前可以下載的 NodeJS 版本 |
| nvm install [version] | 下載安裝 NodeJS，若無輸入 version 則會下載最新的版本 |
| nvm ls | 列出本地端安裝過的 NodeJS 版本 |
| nvm use [version] | 設定使用的 NodeJS 版本 |
| nvm current | 顯示目前使用的 NodeJS 版本 |

## 【Yarn】
裝好 NodeJS 的時候，其實會連同 NPM 一起裝好，但 Kai 不打算使用 NPM 協助處理套件的版本管理，因此在開好任何一個 NodeJS 專案後，在專案本地端的終端機使用以下指令進行安裝

npm install yarn [--g]

> 要不要使用 --g 裝成 Global 就看各位選擇了

未來所有的套件都可以使用 Yarn 進行處理，這時候原先採用 NPM 的檔案 **package-lock.json** 就可以刪掉改成只使用 **yarn.lock** 了

那到底 Yarn 與 NPM 差異在哪裡? 為什麼要改用 Yarn 而非沿用 NPM 就好?

Yarn 是一個比 NPM 更專門的 Package 管理服務，避免了 NPM 管理會日益肥大的問題，並有著更安全的處理模式，避免危險程式碼侵入，同時也提供更加簡單易懂的指令集。

以下分享兩者常用的指令差異

|Yarn|NPM|Info|
|----|----|----|
| yarn install | npm install | 下載所有依賴，若無輸入則會將 package.json 全數下載 |
| yarn add [package] | npm install --save [package] | 下載特定依賴，並儲存在 package.json 中的 dependecies |
| yarn add [package] --dev | npm install --save-dev [package] | 下載特定依賴，並儲存在 package.json 中的 devDependecies |
| yarn global add [package] | npm install --global [package] | 下載特定依賴，並儲存在電腦全域 |
| | npm uninstall | 移除所有套件，Yarn 不支援移除所有套件功能 |
| yarn remove [package] | npm uninstall --save [package] | 移除特定套件 |
| yarn upgrade | rm -rf node_modules && npm install | 更新 node_modules |

## 【建立 Node Express 專案】
在建立 Express 專案的時候，可能還是要先透過 NPM 進行。

// 下載 Express 套件
npm install express-generator 

// 建置專案
express --view=ejs [Project Name]

創建後 Express 的檔案結構如下，其中 index.js 和 users.js 是預設的兩個 API 服務內容，讓新手可以快速理解如何架設 API 服務。

├── app.js 
├── bin 
│   └── www 
├── package.json 
├── public 
│   ├── images 
│   ├── javascripts 
│   └── stylesheets 
│       └── style.css 
├── routes 
│   ├── index.js 
│   └── users.js 
└── views     
    ├── error.ejs     
    └── index.ejs

此時可以透過 Yarn 進行 NodeJS API 服務的啟動

yarn start

這個指令設立在 package.json 中，會建議加上以下 dev-start 這一條

"scripts": {
    "start": "node ./bin/www",
    "dev-start": "set DEBUG=[Project Name]:* & yarn start"
  }

這樣未來就可以使用以下指令啟動開發者模式測試了

yarn dev-start 

## 【結語】
是第一次碰 NodeJS 系列的開發，非常新鮮，後續有學到不同的東西再寫上來分享。

首頁 [Kai 個人技術 Hackmd](/2G-RoB0QTrKzkftH2uLueA)

###### tags: `NodeJS`