# NPM 套件管理工具
###### tags:`JavaScript 必修篇 - 前端修練全攻略`
- 前端開發Vue、React、Webpack 都是用NPM做管理
- NPM是 Node.js 的應用
- Node.js 是獨立的 JS 引擎，可以獨立執行 JS 檔案，不需要透過瀏覽器，是利用 Chrome V8 引擎來執行 JS。
## npm init 專案初始化

1. 檢查 Node.js 版本： node -v
2. 檢查 NPM 版本： npm -v
3. 專案初始化：npm init
4. 專案初始化，並提供預設值： npm init -y

1. npm init 然後一直按 enter，其中在 author 可輸入自己的名字
設定好 nmp 預設值了（有個物件，裡面有許多屬性）
之後安裝各種套件，都會同步紀錄在`package.json`
2. 直接輸入 npm init -y 就可完成初始化並提供預設值
## npm install 環境安裝教學
到網站 [npmjs.com](https://www.npmjs.com/)
安裝模組指令： npm install 模組名稱

會出現 package-lock.json 檔案，紀錄詳細的資訊。
## npm 全域安裝 -g
npm install 套件 -g
- 套件會安裝在**根目錄**下：usr/local/lib/node_modules/套件名稱
- 用全域的時機：jest寫測試、mocha、express...
- 但是用全域空間的機會比較低，建議先將套件安裝在某特定資料夾底下就好（因為每個專案所需的版本號不同）
## webpack
- 會幫忙編譯變成可執行的檔案
- 例如：.sass 經過 webpack 打包壓縮 -> .css

（左邊是**開發階段**所使用的套件，右邊是**上線階段**所使用的套件檔案）
- 更多介紹都在下一章節：[webpack 壓縮打包工具管理](https://hackmd.io/@IQ_nZDdnQuGVpomu0RUj_w/Hym0tIWgK)
## --save、--save-dev 指令差異
1. **development (開發)依賴模組**（開發階段）
- `nmp install 套件 --save` 放在 dependencies 屬性底下
- `nmp install 套件` 預設也是放在 dependencies 屬性底下
- 新版的npm，`--save` 可加可不加
2. **production (上線)依賴模組**（上線階段）
- `nmp install 套件 --save-dev`
- 是放在 devDependencies 屬性之下

## 常見指令補充
- 移除套件：`npm uninstall 套件名稱 (-g)`
- 更新套件：`npm update 套件名稱`