---
# System prepended metadata

title: node.js -NPM

---

六角體驗營
# node.js : NPM、安裝 npm install 模組、執行npm
> 全名 **Node Package Manager**
> npm是Node.js預設的、用JavaScript編寫的軟體套件管理系統

常用指令

| 指令 | 說明 | 
| -------- | -------- | 
| npm -v     | 觀看 NPM 版本     | 
| npm -init     | 新增 package.json     | 
| npm install [模組名稱][安裝位置]    | 安裝 NPM 模組，安裝位置常用屬性如下    | 
| npm install [模組名稱] --g    | 全域安裝    | 
| npm install [模組名稱] --save     | 安裝模組並寫入 package.json 的 "dependencies"    | 
| npm install [模組名稱] --save-dev     | 安裝模組並寫入 package.json 的 "devDependencies"     | 
|npm list     | 顯示安裝的 NPM 列表     |
|npm uninstall [模組名稱]     | 刪除專案裡的 NPM     |

<br>

## npm -v

  透過cmd觀察安裝版本號
![](https://hackmd.io/_uploads/rywELhsW6.png =50%x)


<br> 

## package.json
* #### STEP 1. cmd中新增專案
```cmd
cd 檔案位置
```
![](https://hackmd.io/_uploads/Hkmq_3sb6.png =80%x)

* #### STEP 2. **npm init** 針對專案設定
產生package.json檔案
```cmd
檔案位置>npm init
```

![](https://hackmd.io/_uploads/HJnau3s-6.png =80%x)

* #### STEP 3. 設定package.json資料

  * package name: 專案名稱
  * version : 版本號 
  * description : 專案描述
  * entry point : 主要執行的切入檔案(如app.js)
  * test command : 測試程式碼
  * git repository : 數據庫位置
  * keywords : 關鍵字可查詢到此專案(repository或此npm)
  * author : 專案作者
  * license(ISC) : 是否開源opensource
  
  ![](https://hackmd.io/_uploads/SkIncnjbp.png)
* #### STEP 4. 專案資料夾中會多一個package.json檔案
  ![](https://hackmd.io/_uploads/B1rfiho-p.png =80%x)

<br>
<br>

## npm install: 安裝 npm 模組流程 (express)
> [node.js官網搜尋express](https://www.npmjs.com/search?q=express) 
> [載點參考](https://www.npmjs.com/package/express)
> 
### 依據文件安裝
* #### STEP 1. 專案 npm init 進行專案設定(產生package.json檔案)
* #### STEP 2. cmd在專案資料夾中安裝 express
```cmd=
//官方文件
$ npm install express

----------------------------

//開發者端
npm install express --save
```
* #### STEP 3. 安裝完後觀察package.json檔案
  * 3-1 會多一行express的版本號
  * NPM 版本號介紹
    * ^4.18.2
      > 4: 主要版本號
      > 18:次要版本號 (可能有新增功能)
      > 2: bug修正
      > ^: 自動安裝後面更新版本，大版本不變動 4.X.X
      > ~: 安裝bug更新後版本，大阪本及次版本不變動 4.18.X
      > latest: 永遠載入最新版本(少見)
       
   
    ```json=
    {
      "name": "npm_test",
      "version": "1.0.0",
      "description": "",
      "main": "app.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "chien",
      "license": "ISC",

        //會多一行express的版本號
      "dependencies": {
        "express": "^4.18.2"  
      }

    }
    ```
 
   * 3-2 專案中會多一個node_modules資料夾，當中會是express附加的套件
   ![](https://hackmd.io/_uploads/SyzZipsba.png)
       * 使用express附加的module的方法
       
           在app.js中
           ```js=
           var express = require('express');
           
           //可印出觀察express相關語法
            console.log(express);
           ```
           > [補充說明 : require、module exports 模組設計](https://hackmd.io/A4434jg4Q2q3Ez63ZwdyhA?view#require%E3%80%81module-exports-%E6%A8%A1%E7%B5%84%E8%A8%AD%E8%A8%88)
           
* **重點** : 通常附加套件的資料夾(node_modules)並不會版控，因此要透過**npm install**安裝
  * npm install 會透過package.json中的"dependencies"判斷要安裝的套件列表
  * 如下範例，若刪掉專案中node_modules資料夾，在terminal中執行 **npm install**，會重新安裝的是"express": "^4.18.2"
  
  ![](https://hackmd.io/_uploads/Sy-eQm2W6.png)

<br>
<br>

## npm install --save、--save-dev、-g差異
> 安裝模組方式: **npm install 模組名稱 --save**
> ex. npm install nodemon --save

* **npm install 模組名稱 --save**  團體開發盡量使用
  * 開發上線使用模組。
  * 產生node_modules資料夾。
  * 會在package.json中產生 **dependencies**。
  
  
* **npm install 模組名稱 --save-dev** 
  * 開發過程測試使用模組(如下) :
    * jsint : 檢測 js 程式錯誤
    * mocha : js 測試框架 
  * 產生node_modules資料夾。
  * 會在package.json中產生 **devDependencies**。
  
* **npm install 模組名稱 -g**
  *  全域: 安裝在底層資料夾(自己電腦中)，本地端不須額外安裝，不會產生node_modules資料夾。
  *  對團體開發比較不友善，因為不會顯示在package.json中，其他成員不知道需載入該模組。
  *  可能會在的位置 C:\Users\user\AppData\Roming\npm\node_modules。

![](https://hackmd.io/_uploads/SJohzV2-p.png)

<br>
<br>

## 執行 NPM 內容流程
* nodemon 模組 : 可採全域方式安裝，可自動監視app.js檔案，文件變更時自動重新執行程式，可即時看到變更成果
 
全域安裝 
```json=
npm install nodemon -g
//安裝到C:\Users\user\AppData\Roaming\npm\node_modules
```
執行 nodemon 檔案名稱
```mdn=
//terminal專案檔案中執行
nodemon app.js  
```
![](https://hackmd.io/_uploads/S17HIEnbT.png)


