# Node Package Manager
###### tags: `NPM` `Yarn`

**Node Package Manager**：簡稱 **NPM**，用於管理 Node.js 在用的套件。

* **Node** : Node.js
* **Package** : 在軟體開發的產業裡，叫做"套件"
* **Manager** : 管理的意思
* ※ **Library、Module、Package**：都是在指 **"套件"**

**可以想像 NPM 就是一個放"很多套件的倉庫"，可以上傳自己的套件、下載別人的套件，全世界都可以使用**

> 安裝過 Node.js，NPM是含在裡面的，要確認的話就在 CML 輸入 npm -v，有出現版本號就代表目前的電腦有 NPM。

## 安裝 NPM 內的套件到操作的流程
這邊用 left-pad 作為範例：

1. 先到 [**NPM**](https://www.npmjs.com/) 網站，可能需要先辦一個帳號
2. 到搜尋欄輸入 left-pad
3. 會顯示安裝指令，以及如何使用這套件
4. 在 CML 輸入 **npm install left-pad** 或是 **npm i left-pad** （install 簡寫變成 i 而已）
* **npm install left-pad** 與 **npm i left-pad**：下載 left-pad 套件

5. 這時你在的位置會出現 2 個檔案（**node_modules 資料夾、package-lock.json**）
他就是開一個資料夾名為 node_modules，將 left-pad 檔案放到資料夾內
> **package-lock.json**：裡面是放你安裝的套件裡面有用到的其他套件資料。
舉例：
我今天要用 A 套件，但 A 套件本身也有使用到 B、C 套件，所以安裝時他會很聰明將 A 套件裡面含有的其他套件一併下載下來。
package-lock.json：裡面就是紀錄 A 套件裡面含有其他套件的資料。
6. 測試是否可以使用 left-pad 功能，這裡測試成功 [**「關於 module 如何操作」**](https://hackmd.io/@bngandan/HkylpnaaL)

7. **npm init**：會創建一個 package.json ，裡面會放你目前這個專案內所有使用到的套件資料，下面的狀況劇有創建後的流程，以及裡面的東西分別是代表甚麼

8.
* **npm install left-pad --save**：下載 left-pad 套件，並且將 left-pad 這個資訊寫到 package.json 的 dependencies 內

> dependencies 就是告訴我們這個專案裡面有含那些 "套件"[color=#db0fab]

* **npm install left-pad --save-dev**：-dev 就是對應到 package.json 內的 devDependencies 將 left-pad 寫入

> devDependencies 是只有開發的時候會使用到的 "套件"，在正式的環境上不會用到的 "套件"[color=#db0fab]

**基本上到這邊就差不多了，下面的狀況劇也要看一下才會更懂**

## 狀況劇
假設我們要用到 100 個套件，那等於我們要安裝 100 個 module，當然也可以 commit 上去 github 給別人用，但其實 commit 上去，不是最好的做法，檔案也會很大。

還有一個重點，我們**使用的"套件"都是 npm 上面的**，那其實所有人都可以從 npm 上面下載下來

### **上傳到 GitHub 最好的解法：**
與其給別人 node_modules 這個大檔案，不如告訴別人你有使用哪些套件，讓他們自己下載

1. 到 CML 輸入 **npm init**：創建一個 package.json 檔案
（用來放入檔案內有使用到的 **"套件資訊"**）
一路狂按 Enter 一直到出現 Is this OK? ，這邊輸入 yes 就可以
2. 這時你會發現多了一個檔案叫 **"package.json"**，這個檔案就是用來描述你目前這個專案的檔案
> json 格式 與 JavaScript 的物件是差不多，差別在於 json 他的 key 一定要用雙引號框起來

3. 你可以看到（上圖）有個名稱為 dependencies，我們可以從這個裡面的內容知道我們使用了那些套件

* **npm install left-pad --save**：下載 left-pad 套件，並且將 left-pad 這個資訊寫到 package.json 的 dependencies 內，同樣下載其他套件只要把 left-pad 改成其他套件的名稱，他一樣會將其他套件資訊存入 package.json
> dependencies 就是告訴我們這個專案裡面有含那些 "套件"[color=#db0fab]

* **npm install left-pad --save-dev**：-dev 就是對應到 package.json 內的 devDependencies 將 left-pad 寫入

> devDependencies 是只有開發的時候會使用到的 "套件"，在正式的環境上不會用到的 "套件"[color=#db0fab]

4. 最後將檔案上傳到 github 就可以不用傳 node_modules，只要有傳 **"package.json"** 與其他檔案，別人就會知道需要下載那些套件

**※ 假設我們專案是 git repository，那我們上傳時就將 node_modules 放入 .gitignore（要忽略的檔案），再進行上傳**

### 那別人要如何下載這些套件呢？如果套件幾百個難道要一個一個下載？

NPM 很貼心他有提供一個功能，只要有 package.json 裡面有說明有那些套件，就能夠幫你下載需要的檔案
* **npm install**：輸入到 CML，它會自動幫你下載 package.json 內有寫到的那些套件
所以別人可以透過上面這個指令，把該安裝的 **"套件"** 下載下來


**※ 記得每次下載新的套件，要將新套件的內容存到 dependencies 內，之後給別人檔案時才能知道有使用了那些 "套件"**
* **npm install left-pad --save**：下載 left-pad 套件，並且將 left-pad 這個資訊寫到 package.json 的 dependencies 內，同樣下載其他套件只要把 left-pad 改成其他套件的名稱，他一樣會將其他套件資訊存入 package.json
> dependencies 就是告訴我們這個專案裡面有含那些 "套件"[color=#db0fab]

* **npm install left-pad --save-dev**：-dev 就是對應到 package.json 內的 devDependencies 將 left-pad 寫入

> devDependencies 是只有開發的時候會使用到的 "套件"，在正式的環境上不會用到的 "套件"[color=#db0fab]

## 查找入口檔案

### 如果今天檔案非常多不知道哪個是入口檔案要怎麼辦？

有兩個方法：
1. **點開 package.json 查看 main 會顯示主要的入口檔案**

2. **我們可以寫一個執行入口檔案的指令**
進入到 package.json，我們可以看到 main 主要入口檔案是 index.js ，我們到底下 scripts 輸入
**"start": "node index.js"**：寫一個 start 指令，內容是執行 index.js 檔案
我們到 CML 輸入 **npm run start**：執行我們剛剛寫的 start 指令

> ※ Script 裡面還可以放很多指令，在 script 寫你要的功能，
> 然後到 CML 輸入 **npm run <指令名稱>** 就能執行你寫的內容[color=#db0fab]

# 這個單元學到甚麼

1. 從 NPM 抓套件來用
2. 用完之後要怎麼給別人我們的專案
3. node_modules 背後原理是甚麼
4. scripts 是甚麼

## 簡單講

1. 安裝 NPM 套指令下 npm insatll <套件名稱>
2. 引入套件 require('套件名稱')
3. 如果要把專案放到 git 的話，記得將 node_modules 放到 .gitignore （將 node_modules 這個資料夾排除在外），因為 node_modules 檔案太大
4. 別人可以透過 npm install 來下載
package.json 會描述目前這個專案有用到的 "套件"
5. 透過查看 package.json 或 scripts 執行入口檔案

### Yarn 是由 FB 開發的（開源的哦）跟 NPM 差不多都是管理 Node.js 在用的套件，安裝跟操作跟 NPM 差不多，有興趣可以到 [Yarn 官網查詢](https://classic.yarnpkg.com/zh-Hant/)