本節大綱

• 前言
• 懶人包工具安裝順序
• 基本環境設置
• 參考資料
• 結論

前言

接下來的 Day 6 開始，會以 React 前端框架為主，這是因為這是本人目前工作主要在用的技能，又另一個原因是，參加 iT 鐵人賽，說實在的不分享一點 code，也太說不過去。

通常一個要使用框架開發的工程師，除了直接使用 codepen、JS Bin 並且直接匯入 CDN 的方式來做開發，但是這個方式，只適合做單頁面(單頁面，後面章節會再解釋)簡單的應用。

承上所說，如果是複雜一點的應用，則還是直接在本機端，安裝相關的套件來直接開發，這時候開始就會提到相關工具，如 Node.js、NPM、Yarn 等等...，哪也就是今天所要分享的。

懶人包工具安裝順序

這裡簡單列出您要安裝套件的順序：

• 安裝 NVM。
• 利用 NVM 工具，來安裝 Node.js。
• Node.js 安裝好後，會自動附加 NPM 這個工具。
• 使用 NPM 建立 React 專案。
• 使用 NPM 安裝 Yarn 工具，來建立 React 專案。

基本環境設置

Node Version Manager (NVM)

基本介紹

Node Version Manager 簡稱 NVM，它是用來管理 Node.js 版本的工具，它允許我們透過 command 指令快速安裝和使用不同版本的 Node.js。

以本人為例，公司專案使用的 Node.js 版本為 v14.17.4，如果要使用新一點版本的 Node.js，來獲得新支援或新增的功能語法，哪勢必我的電腦，會因為有類似這樣的需求要做版本的切換，但實際上這是行不通的。

這個時候 NVM 就派上用場了，它很類似管理 Ruby 的 RVM，它可以讓我們在一個系統上安裝多個 Node.js 版本，去對應不同專案的需求。

如果您的電腦裡，已經有安裝任一 Node.js 版本，這裡建議先卸載掉，以免發生意外中的問題 (反之，若無此狀況，可略過)。

安裝 NVM 環境

在 NVM 官網的 Install & Update Script 這裡，有提到有兩種方式 cURL 或 Wget command 可以安裝及更新，請各位打開你的終端機或自行另外安裝的終端機(舉例：iTerm)等工具，接著輸入以下的指令。

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

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

接下來還有一點是非常重要的，要讓您的終端機可以正常執行 NVM 的話，依照您所安裝終端機工具的不同，哪就要去對照您的配置檔是以下哪一種 ~/.bash_profile、~/.zshrc、~/.profile、~/.bashrc。

把以下配置指令，放在對您的文件內容即可。

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

• bash (預設)：新增 .bash_profile 文件。
• zsh：新增 .zshrc 文件。

以上都設定完成以後，按下 NVM 就會跳出相關指令，代表安裝成功，如下圖。

常用 NVM 指令

• nvm install [node 版本號] - 安裝特定版本的 NVM。
• nvm list - 列出已安裝清單。
• nvm use [node 版本號] - 切換到特定 Node.js 版本(只限有安裝的版本)。

Node.js

參考維基百科所說，Node.js 是能夠在伺服器端運行 JavaScript 的開放原始碼、跨平台執行環境。

這裡簡單的列幾個優點：

• Node.js 是透過 JavaScript 來開發，所以是個前進後端的好選擇。
• 以目前來講 JavaScript 目前也是最流行的開發語言之一，故擁有豐富的生態系。
• 其採用 Google 開發的 V8 執行程式碼，故能輕易網路服務在不同發展階段對效能的要求。

這裡因為是針對前端框架 React 要介紹，故這裡單純介紹要安裝的版本及說明。

以 9 月份為例子，進入到 Node.js 的官網，可以看到左及右是 16.17.0.LTS 跟 18.8.0 Current 這兩個版本。

• LTS：是 Long Term Support 的縮寫，又稱為長期維護版本也可以看作穩定版本。
• Current：則是當前最新的版本，雖然裡面可能會有新功能，但是這些功能最後不見得會留下來，想要嚐鮮使用 Node.js 最新的功能，使用這版本就對了。

NPM

NPM 全名為 Node Package Manager，即 Node.js 套件管理器。透過這個工具可以安裝及管理我們想要使用的套件。

這裡將會介紹如何使用 NPM 下載我們所需的套件，對於 NPM 套件，我們不用想的很複雜，說穿了大概也只會用到安裝、解除安裝、更新這幾個指令。

常用 NPM 指令

• npm init：是 NPM 初始化 Node.js 的指令。
• npm install -g [package1]：其中 -g 的意思是，安裝到全域環境裡，意思是打開終端機後，不管在哪個路徑，都可以使用這個套件。
• npm install [package1] [package2]：這意思是如果要同時安裝多個套件時，不用一直重複敲打 npm install 指令，只要每個套件都隔著一個空白即可。其中 npm install 可簡化為 npm i。
• npm i --save-dev [package1]：這是指把某套件安裝在開發環境中，通常 --save-dev 可簡化為 -D 取代。
• npx [package1]：npx 又是什麼呢 !? npx 是用來當我們要安裝某個套件時，又不想要安裝到全域環境裡，只想做一次性的使用。所以 npx 跟 npm 兩者的差別是，npx 會去看全域環境有無該套件，沒有的話，會下載安裝，接著就刪掉，npm 的話，則是就會直接安裝到我們指定的全域或區域環境裡。

Yarn

參考維基百科， Yarn 是 Facebook 在 2016 年為 Node.js 及JavaScript 運行時環境開發的套件管理器。

Yarn 是 NPM 套件管理器的替代產品，其目的為用來解決，早先在 NPM 推出時，被人詬病的安全性和性能問題。

但，就在 2020 年的 3 月中，微軟收購了 NPM，從哪時候至今 NPM 被人詬病的缺點，也沒有當初推出時的哪麼差了。

這幾年又推了 PnPm 這個工具，因此，現在的您有 NPM、Yarn、PnPm 這三種工具依您喜好做選擇。

常用 Yarn 指令

• yarn init：是 Yarn 初始化 Node.js 的指令。
• yarn：這指令很常用，是用來檢查或更新套件。
• yarn add -D [package]：安裝套件，其一樣也是有分是否要安裝在開發環境。
• yarn remove [package]：移除套件。

同場加映，自己常用到的一個好方法

有時候覺得移除套件還要打指令嫌麻煩的話，哪可以打開 package.json 檔案，把某個套件移除掉，這時候再重新輸入 yarn，它就會去更新目前的套件列表清單。

參考資料

• Node Version Manager (NVM)
• Node.js
• NPM
• Yarn

結論

這裡介紹到基本環境的設置，講到了身為前端工程師的您，應該安裝哪些基本套件，才可以開始建立 React 專案。

關於打包工具最近有個朋友，喜歡使用 PnPm 大過 NPM 或 Yarn，關於其中好處，希望也是愛用者的您，可以跟我分享，最後感謝您的觀看。