NPM 筆記

What is NPM?

NPM 全名為 Node Package Manager，為Node.js預設的套件管理工具，安裝完Node.js就可以使用這套管理工具，透過 NPM 下載它人撰寫的 library，讓撰寫程式變得更簡單

NPM Registry

NPM 是怎麼知道第三方套件的資訊(名稱以及版本)呢？

NPM Registry 為 JavaScript library 資料庫，所以執行 npm install(下載)的時候，會從 NPM Registry 下載安裝指定的 library

專案初始化並安裝套件

執行 npm init，會產生一個 package.json，初始化的 package.json 如下

{
  "name": "npm_tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

接著開始下載套件，舉例來說：想要下載 bootstrap

再專案執行npm install bootstrap，看到 package.json 多了一個 dependencies 的 key，裡面存放所需的 library 名稱及版本號

其中看到 bootstrap 的版本號為^4.3.1，即可以使用>=4.3.1 到 < 5.0.0 的版本

{
  "name": "npm_tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^4.3.1"
  }
}

再下載一個 css-loader 的套件，執行npm install --save-dev css-loader

發現 package.json 多了一個 devDependencies 的 key，裡面也是存放所需的 library

{
  "name": "npm_tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^4.3.1"
  },
  "devDependencies": {
    "css-loader": "^3.2.0"
  }
}

dependencies、devDependencies

一樣都是套件，為什麼一個放在 dependencies，而另一個放在 devDependencies

簡單來說

(1) dependencies：使用在發怖環境，當開發完成後將 Project 發佈到 Server，但是再 Server 也需要這個第三方套件，就會歸類到這裡。

舉例來說：使用 Bootstrap 不可能只在開發會需要，當發佈的時候，也會需要這個 library，不然 user 或 QA 可能會來找你

(2) devDependencies：使用在開發環境，在開發時期才需要的套件，發布到 Server 之後就不需要用到該 library。

舉例來說：css-loader 為 webpack 的 plugin 之一，它將 css 語法轉為 webpack 看得懂的 JavaScript 語法。

再 Project 打包完之後，也不需要 css-loader 這個 library 了，所以歸類再 devDependencies

專案結構

再下載完套件後，目前專案如下

npm_tutorial
|   node_modules
|   package.json
|   package-lock.json

可以看到多了兩個檔案分別是 package-lock.json 及 node_modules

package 及 package-lock 及 node_modules

package.json：定義的是套件版本的範圍(e.g：^4.3.1)代表可以兼容新版本，不同時間下載，會有不同的結果(NPM Registry 有新版本就有可能發生)，裡面所定義的依賴關係樹，也可以稱為邏輯樹(Logical tree)

node_modules：第三方套件所存放的資料夾，執行 npm install 時 npm 實際安裝的東西，稱為實體樹(Physical tree)

package-lock.json：當 npm 有異動到 node_modules 或是 package.json的任何操作，都會自動產生一份 package-lock.json，這個檔案會紀錄當下第三方library確切的來源、依賴、版本號，保證再之後重新安裝的時候，可以得到相同的依賴

參考資料：

Coding Diary