###### tags: `前端技能樹`

# 哆啦A夢有百寶袋，我有套件管理工具npm

前端的社群發展愈來愈蓬勃，延伸出各式各樣基於 HTML、CSS、JS 的開源套件，像是 Bootstrap、React、Vue、Styled-components 等等，幫助我們能使用這些工具加速開發。而為了管理這些大量的套件，並且方便引入專案，就有了像是 npm、Yarn 這類的套件管理工具出現。

## 套件管理工具 — npm
npm (Node Package Manager)，是 Node.js 發展的一個套件管理器，幫助開發人員方便的共享開源套件，可以輕鬆引入套件道專案中使用。

>Node.js 是讓電腦能以 Command line 的方式在伺服器端執行 JavaScript 的開放原始碼。

### 安裝npm

Step1：直接透過[官網](https://nodejs.org/en/)下載 Node.js，裡面會直接包含 npm


Step2：開啟終端機(Terminal)，所有 npm 指令會在這裡執行


Step3：輸入 ```node -v```、```npm -v```，如果有出現版本資訊就是安裝成功囉！


### 下載套件

終端機會有一個預設的路徑，但我們是要在專案中新增套件，所以要先將路徑指到指定的專案資料夾才能輸入 npm 指令；或者是你也可以直接利用 Vscode 開啟專案資料夾，Vscode 內建的 Terminal 會自動幫你指向該路徑。


>Vscode 內建的 Terminal 會自動指向該專案的路徑

首先輸入 ```npm init```，它會要你輸入一些專案的資訊，然後就會創建 package.json 文件，用來列出專案使用的所有套件包括版本資訊。

npm init

接著就可以透過 ```npm install``` 指令下載指定的套件，會被放在專案中的 node_modules 資料夾中。讓我們先觀察一下，下載套件後 package.json 所記錄的套件資訊：


套件分別被記錄在兩個區塊 dependencies 與 devDependencies，那者兩者有什麼差別？

- **dependencies**：在開發完專案發佈到伺服器上後仍然會使用到的套件。
- **devDependencies**：只用在開發環境中的套件。

為了將想要的套件安裝在指定的環境中，在使用 ```npm install``` 下載套件時，加上 ```--save``` 代表會同時安裝到 dependencies 和 devDependencies；而加上 ```--save -dev``` 則是只會安裝在開發環境devDependencies下。

// dependencies 和 devDependencies
npm install --save package;

// devDependencies
npm install --save-dev package;

***
## 小結

知道如何使用 npm 後，我們就可以開始使用便利的套件加速該發，在下一章就會提到打包工具 webpack，將這些套件能夠引入程式碼中使用，並且轉換成瀏覽器看得懂的文件。

如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱喔❤️

### 參考資料
- [npm](https://www.npmjs.com/)
- [從零開始: 使用NPM套件](https://medium.com/html-test/%E5%BE%9E%E9%9B%B6%E9%96%8B%E5%A7%8B-%E4%BD%BF%E7%94%A8npm%E5%A5%97%E4%BB%B6-317beefdf182)
- [NPM是什麼？了解Node Package Manager套件管理機制](https://tw.alphacamp.co/blog/npm-node-package-manager)
- [Node.js 是什麼？NPM又是什麼？為什麼前端與後端都需要用它們呢？](https://progressbar.tw/posts/291)
- [弄懂 npm install 的 –save 與 –save-dev](https://chriskang028.wordpress.com/2017/07/05/%E5%BC%84%E6%87%82-npm-install-%E7%9A%84-dependencies-v-s-devdependencies/)