什麼是NPM？NPM是Node Package Manager的縮寫，也就是線上套件管理工具，裡面有很多程式庫，包含了JS及CSS等。
NPM LOGO

參考網站

在哪裡下載NPM？

在 Node.js 下載 12.16.1 LTS 並安裝，裡面就包含了NPM。

使用cmd(命令提示字元) 或者 終端機 來檢查node及npm版本，可以確定是否有安裝完成。
可以將 –version 縮寫輸入 -v

1
2
$ node --version
v12.16.1
1
2
$ npm --version
6.13.4

NPM初始化

建立專案，並進入專案夾裡

1
$ mkdir test-npm && cd test-npm

在目錄設為npm package，也就是會新增一個package.json檔

1
$ npm init

※ 紅字的部分建議填一下比較好，以免再安裝套件的時候會出現一大堆WARN警告訊息
:::info
package name: 專案名稱
version: 專案版本號
* description: 專案的描述
entry point: 專案的入口點
test command: 專案測試指令
* git repository: 專案原始碼的版本控管位置
keywords: 專案關鍵字
author: 專案作者格式 User <Email> (個人網站)
license: 授權許可
:::

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
  "name": "test-npm",
  "version": "1.0.1",
  "description": "npm test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/dew31794/npmtest.git"
  },
  "keywords": [
    "npm",
    "test"
  ],
  "author": "black",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/dew31794/npmtest/issues"
  },
  "homepage": "https://github.com/dew31794/npmtest#readme"
}

安裝套件

  • 安裝套件名稱指令：npm install 套件名稱。
  • i = install 安裝的縮寫
  • 安裝完，會增加 node_modules 資料夾，套件都放在裡面。

此段，用安裝 bootstrap 為範例套件，之後如果增加其他套件都可以使用以下方式。

1
2
3
4
5
6
7
$ npm install bootstrap
$ npm install jquery popper.js

OR

$ npm i bootstrap
$ npm i jquery popper.js

產生的資料夾及檔案

套件安裝完會在package.json裡，增加相依性的套件資訊及版本等 

1
2
3
"dependencies": {
   "bootstrap": "^4.4.1"
}

NPM 套件的相依性分為：

  • 程式上線時需要的套件，安裝時搭配 –save 參數
  • 開發期間需要的套件，安裝時搭配 –save-dev 參數

如果 package.json 沒有新增套件資訊(dependencies)，我們可以在後面加上--save 參數。

1
2
$ npm install bootstrap --save
$ npm install jquery popper.js --save

例外情況

當安裝套件並加入相依性，後面只要加上-dev 就會列在開發期間階段。

1
$ npm install bootstrap --save

package.json

1
2
3
"dependencies": {
  "bootstrap": "^4.4.1"
}

但如果在執行一次安裝，後面加上-dev

1
$ npm install bootstrap --save-dev

package.json

1
2
3
4
"dependencies": {},
"devDependencies": {
  "bootstrap": "^4.4.1"
}

如果要加在程式上線時使用，只能自己手動從開發devDependencies 階段修改成dependencies上線相依性

npm 其他指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
# 安裝全域套件
$ npm install --global 套件名稱

# 刪除痊癒套件
$ npm uninstall --global 套件名稱

# 搜尋想要的套件
$ npm search 套件名稱

# 顯示套件的詳細資訊
$ npm show 套件名稱

# 列出安裝哪些套件
$ npm list

# 更新套件專案中的全部套件
$ npm update

# 更新全域套件 g代表global
$ npm update -g
OR
$ npm update --global

# 刪除套件
$ npm uninstall 套件名稱

# 刪除套件，並更新 package.json
$ npm uninstall 套件名稱 --save

# 刪除設定全域的套件
$ npm uninstall 套件名稱 -g

# 列出設定全域的套件
$ npm ls -g

# 列出設定全域的套件詳細資訊
$ npm ls -gl

# 列出專案套件
$ npm ls

# 列出專案套件詳細資訊
$ npm ls -l

參數說明：

1
2
3
4
5
-g, --global 全域
-S, --save 套件詳細資訊加到dependencies(程式上線的相依性)
-D, --save-dev 套件詳細資訊加到devDependencies（開發期間的相依性）
-O, --save-optional 套件詳細資訊將加入到optionalDependencies（可選階段的相依性）
-E, --save-exact 精確安裝指定套件版本
標籤: w3HexSchool NPM 套件管理工具