{%hackmd /au2gfdvHR0mEjvR_NzROqA?both %}

###### tags: `Node.js`

[Node.js] node.js 指令操作
===

[TOC]

## 怎麼用 VSCode 終端機來操作 node.js

1. 安裝 node.js LTS版本
2. 創建一個資料夾，用來當作 VSCode 的工作環境
> 
> <small>將資料夾 npm-demo 設為 VSCode 的工作環境</small>
3. 啟動終端機(Terminal)
> 
> <small>檢視 > 終端</small>
> 
> <small>VSCode 的下方會出現終端機(Terminal)</small>

## node.js 的指令

### 檢查版本

- `node -v` ： 檢查 Node.js 版本
- `npm -v` ： 檢查 NPM 版本

> 
> <small>Node.js 版本為 12.19.0 ，NPM 版本為 6.14.8</small>

### `npm init` - 專案初始化

:::info
指令為 `npm init`，透過這個指令來進行初始化

期間會問許多問題來設定 `package.json`
:::

- package name: (npm-demo)
- 打算建立一個npm專案，自行輸入專案名稱
- 預設會是 資料夾名稱(npm-demo)
- version: (1.0.0)
- 這個專案的版本號為何
- 可以自行依據專案來決定
- description:
- 專案描述
- entry point: (index.js)
- 專案進入點
- test command:
- 有沒有測試的 code
- git repository:
- 有沒有使用到 git
- keywords:
- 有沒有關鍵字
- 有太多 NPM，所以放一些關鍵字在上頭，讓使用者更快找出使用
- author:
- 創作者是誰
- license: (ISC)
- 有沒有版本號
- 預設為 ISC
- 產生出來的版本

    {
      "name": "npm-demo",
      "version": "1.0.0",
      "description": "NPM Webpack demo",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "anderson",
      "license": "ISC"
    }

- 輸入 yes 後會產生一個 `package.json` 檔
> 
> <small>左側欄位自動產生一個 `package.json`</small>

#### `npm init -y` - 專案初始化，並提供預設值

:::info
指令為 `npm init -y`
:::

- npm 會自動產生一個 `package.json`，裡面有預設好的值

> 
> <small>利用預設值自動產生一個 `package.json`</small>

{
  "name": "npm-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

### `package.json` 的內容

{
  "name": "npm-demo",
  "version": "1.0.0",
  "description": "NPM Webpack demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "anderson",
  "license": "ISC"
}

### `package.json` 的功用

- 如果安裝各種套件，會同步記錄在 `package.json` 中
- EX：jQuery的版本為3、React版本為多少、Vue的版本為多少......

### `npm install 套件名稱` - 套件安裝

1. 確認終端機的位置是在要安裝的資料夾
2. `npm install 套件名稱`
> 
> <small>安裝過程</small>
3. 專案會新增三樣東西
- 修改json檔 - `package.json`
- 會在 `dependencies` 中新增套件名跟套件版本號
> 
- 新增json檔 - `package-lock.json`
- 當作一個寫得更細的 `package.json`，一般狀況放著就好
- 會詳細寫出套件的資料，每個模組之間的依賴及詳細記錄

        {
          "name": "npm-demo",
          "version": "1.0.0",
          "lockfileVersion": 1,
          "requires": true,
          "dependencies": {
            "bootstrap": {
              "version": "5.1.1",
              "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.1.tgz",
              "integrity": "sha512-/jUa4sSuDZWlDLQ1gwQQR8uoYSvLJzDd8m5o6bPKh3asLAMYVZKdRCjb1joUd5WXf0WwCNzd2EjwQQhupou0dA=="
            }
          }
        }

- 新增資料夾 - `node_modules`
- 套件的內容都會放在這邊
> 
> <small>以 `bootstrap` 為例，會有 scss 的結構，用到的 js 檔</small>

#### 亂打套件名稱

> 
> <small>`Not Found` 代表找不到該套件，庫路徑上並未有檔案</small>

### `npm install 套件名稱 -g` - 全域套件安裝 (不推薦使用)

:::danger
不推薦使用 `npm install 套件名稱 -g` 將套件安裝在全域環境
:::

- 假如專案已經有 `package.json`，則安裝套件只要使用 `npm install` 就好
- `npm install` 會依據 `package.json` 中的 `dependencies` 來自動安裝需要的套件
- 但一台電腦上的專案不一定只會有一個，每個專案使用的套件版本也不一定一樣
- 如果想要共用套件(==所有專案的套件都是同一個版本==)，使用 `npm install 套件名稱 -g`，這樣套件就會安裝在全域空間
- 這樣在開發中使用到套件時，如果專案中沒有在 `node_modules` 找到套件，則npm會去全域空間尋找套件
- 這種安裝法不會讓套件出現在單一專案的 `package.json` 中
- 全域位置
- MacOS：/usr/local/lib/node_modules/套件名稱
- Windows：C:\Program Files\nodejs\node_modules\套件名稱

> 
> <small>安裝全域套件</small>

### `npm install 套件名稱 --save`、`npm install 套件名稱 --save-dev` 指令差異

:::info
`devDependencies` - 開發時期才會用到的套件：測試伺服器、sass、壓縮服務、前端任務的工具

`dependencies` - 上線後也還會繼續使用的套件：bootstrap、Vue
:::

#### development (開發)依賴模組

指令：`npm install 模組名稱 --save-dev`

:::info
只會在開發階段用到的套件
:::

> 
> <small>安裝過程</small>

安裝完畢後，`package.json` 會多出一個 `devDependencies`，套件 `webpack` 會放在這邊

會選擇安裝 `webpack` 是因為壓縮服務通常只會在開發階段用到

- `package.json`

{
  "name": "npm-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^5.1.1"
  },
  "devDependencies": {
    "webpack": "^5.52.0"
  }
}

- `node_modules` 會多出很多之前沒有安裝的套件，是因為 webpack 會跟這些套件做依賴，所以會一併下載

> 
> <small>會多出很多檔案</small>

#### production (上線)依賴模組

指令：`npm install 模組名稱 --save`

:::info
上線後可能會跟後端產生連動的套件
:::

:::warning
所以 `npm install 模組名稱 --save` 跟 `npm install 模組名稱` 差在哪？

`npm install 模組名稱` 預設就會使用 `--save` ，新舊版的差異
:::

> 
> <small>安裝過程</small>

安裝完畢後，`package.json` 會將套件 `jquery` 放在 `dependencies` 中

- `package.json`

{
  "name": "npm-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^5.1.1",
    "jquery": "^3.6.0"
  },
  "devDependencies": {
    "webpack": "^5.52.0"
  }
}

### 更新套件

指令：`npm update 模組名稱`

如果沒有新版本則不會有動作。

### 移除套件

指令：`npm uninstall 模組名稱`
刪除全域：`npm uninstall 模組名稱 -g`

- 會修改兩個地方
- `package.json` - 移除模組設定
- `node_modules` - 移除模組跟與之相依的套件，EX：刪除 `webpack` 會一併刪除一大堆的相依套件

> 
> <small>運作畫面</small>

- `package.json`

{
  "name": "npm-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^5.1.1"
  },
  "devDependencies": {
    "webpack": "^5.52.0"
  }
}