Node Package Manager Explained By Directing A Movie

藉由導演一部電影來解釋 Node Package Manager

@ 技術討論

套件 = 演員

寫程式就像在拍攝一部電影，你可以親自上陣設計並打理演員，也可以聘請別人設計好的，NPM🔗 就像一個平台可以在上面找到很多現成的演員，這些演員就是套件（Package），上面大多套件是免費開源的，可以幫助專案快速有效率的達成想要的功能。

現代分工詳細的環境下，演員背後通常有一整個團隊的人在支撐，比如化妝師、美髮師、經紀人……等，他們可以被稱作是這個專案的依賴（Dependency），當你聘請一位演員時 NPM 也會順帶的把演員所需的所有團隊的人都找來，畢竟要讓一個演員發揮實際上是需要一整個團隊支撐的。

這樣說下來，是不是開發軟體就像在培養一位演員呢？是的，你開發的軟體也可以發布到 NPM 上，供全世界各地的人演出使用。

Terminal window
npm init

下載 Node.js + NPM🔗 並執行 init 指令開始找尋你想使用的套件吧！

node_moduels = 演員休息室

要添加一個新的套件到專案中只需要在終端下達npm install 套件名稱，NPM 就會自動幫你下載並安裝到專案中，具體來說所有本地專案的套件都會被放到 node_moduels 資料夾裡面，舉例安裝 React 套件：

Terminal window
# 安裝 React 套件
npm install react

也可以將該套件移除，就像是開除演員一樣：

Terminal window
# 移除 React 套件
npm uninstall react

package.json = 演員名冊

拍電影時導演會有一本「演員名冊」，而使用 NPM 的專案也會有類似的檔案，紀載專案的名稱、版本與依賴的套件，package.json 其中的 dependencies 欄位就記載了整個專案中使用到的套件：

{
  "name": "my-project",
  "version": "1.0.0",
  "dependencies": {
    "react": "^17.0.2"
  }
}

package-lock.json = 超詳細的演員名單

在 package.json 雖然已經有紀錄專案的依賴，但它記錄的版本號是「概略」的，並沒有紀錄依賴所依賴的套件的版本，由於軟體迭代下來時常會發生無法與舊版本兼容的問題，這時候就需要 package-lock.json 它會詳細的紀錄套件們的：

  1. 確切版本號
  2. 從哪個網址下載
  3. 雜湊值
  4. 是被哪個函式庫所要求

這個檔案是每次更新套件都會被重新生成的，所以不需要手動編輯它，有必要時可以刪除讓 NPM 再重新生成一次。

dependencies vs devDependencies 就像舞台上的演員與幕後工作人員

目前前面的解釋只有說明到專案的依賴，但 devDependencies 是什麼東西？想像你的專案並不一定會在生產狀態時使用到的套件，比如預處理工作、打包工作、測試工作……等，這些工作都是在開發時才會使用到的，所以這些套件就可以被歸類到 devDependencies 中，這些套件就像是舞台上的演員與幕後工作人員，他們都是專案的依賴，但是在不同的時機才會被使用到。

{
  "devDependencies": {
    "webpack": "^5.38.1"
  }
}

參考資料