什麼是NPM?NPM初學者入門基本

npm

使用npm,JavaScript開發人員可以發現程式碼包並將其安裝到他們的網路應用程式或伺服器端專案中。

node.js包是一個目錄,其中包含一個或多個JavaScript模組或庫,用於嚮應用程式或指令碼新增各種功能。如果沒有包,開發人員或軟體工程師必須為其專案所需的每個功能編寫新程式碼。

本文將解釋npm的工作原理,並教你如何使用它啟動專案並安裝額外的包。

Node包管理器 (npm) 是世界上最大的軟體註冊中心之一。它與開源伺服器環境node.js捆綁在一起。

npm是如何工作的?

以下是npm的三個定義角色:

  • 儲存庫——npm是一個廣泛使用的儲存庫,用於釋出開源Node專案,開發人員可以在其中與其他npm使用者共享他們的原始碼。AngularReactjQuery是您可以從npm儲存庫下載的一些包。
  • 命令列介面 (CLI) – 開發人員從終端或命令列工具執行npm CLI來安裝或解除安裝包並管理版本或依賴項。
  • 登錄檔——您使用npm CLI安裝的任何包或模組都是從JavaScript軟體資料庫npm公共登錄檔下載的

什麼是package.json?

每個npm專案都包含package.json,一個位於根目錄的檔案。它包含npm專案或包的後設資料,例如包版本和貢獻者。

package.json檔案簡化了包的識別、管理和安裝。這就是為什麼在npm登錄檔上釋出專案之前必須包含package.json的原因。

以下是package.json檔案包含的示例:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"name": "hostinger-npm",
"version": "1.0.0",
"description": "npm guide for beginner",
"main": "beginner-npm.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"express": "^4.17.1"
},
"repository": {
"type": "git",
"url": "https://github.com/hostinger/example.git"
},
"keywords": [
"npm",
"example",
"basic"
],
"author": "Hostinger International",
"license": "MIT",
}
{ "name": "hostinger-npm", "version": "1.0.0", "description": "npm guide for beginner", "main": "beginner-npm.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "dependencies": { "express": "^4.17.1" }, "repository": { "type": "git", "url": "https://github.com/hostinger/example.git" }, "keywords": [ "npm", "example", "basic" ], "author": "Hostinger International", "license": "MIT", }
{
"name": "hostinger-npm",
"version": "1.0.0",
"description": "npm guide for beginner",
"main": "beginner-npm.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"express": "^4.17.1"
},
"repository": {
"type": "git",
"url": "https://github.com/hostinger/example.git"
},
"keywords": [
"npm",
"example",
"basic"
],
"author": "Hostinger International",
"license": "MIT",
}

為了幫助您理解package.json,我們將回顧上一個示例中最重要的幾行:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
"name": "hostinger-npm",
"name": "hostinger-npm",
"name": "hostinger-npm",

上面的行定義了包名。它應少於 214 個字元並且僅由小寫字母組成。如果你想在 npm 登錄檔上釋出一個工具,它的名稱應該不同於任何現有的包。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
"version": "1.0.0",
"version": "1.0.0",
"version": "1.0.0",

版本指定專案的當前版本,它應該遵循語義版本控制規則

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
"description": "npm guide for beginner",
"description": "npm guide for beginner",
"description": "npm guide for beginner",

在描述行中包含包資訊,以幫助使用者在npm登錄檔中發現您的專案。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
"main": "beginner-npm.js",
"main": "beginner-npm.js",
"main": "beginner-npm.js",

main欄位指定專案的入口點或主檔案。如果此屬性留空,npm 將自動將其值設定為index.js

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"scripts": { "test": "echo \"Error: no test specified\" && exit 1" },
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},

scripts屬性包含為您的專案執行任務的命令。npm 使用者可以利用此欄位將引數傳遞給 CLI,而無需重新鍵入它們。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
"dependencies": {
"express": "^4.16.4"
},
"dependencies": { "express": "^4.16.4" },
"dependencies": {
"express": "^4.16.4"
},

該欄位列出了專案中使用的所有依賴項(dependencies)或包。當您使用

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
"repository": {
"type": "git",
"url": "https://github.com/hostinger/example.git"
},
"repository": { "type": "git", "url": "https://github.com/hostinger/example.git" },
"repository": {
"type": "git",
"url": "https://github.com/hostinger/example.git"
},

儲存庫屬性包含原始碼的URL。在此示例中,GitHub是包位置,Git是版本控制系統。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
"keywords": [
"npm",
"example",
"basic"
],
"keywords": [ "npm", "example", "basic" ],
"keywords": [
"npm",
"example",
"basic"
],

該欄位包含一系列與包的功能相關的關鍵字,幫助npm使用者通過搜尋找到包。如果您不會在npm登錄檔上釋出專案,請忽略此屬性。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
"author": "Hostinger International",
"author": "Hostinger International",
"author": "Hostinger International",

使用author屬性來宣告專案的建立者。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
"license": "MIT",
"license": "MIT",
"license": "MIT",

這一行定義了npm專案的許可證,讓人們知道他們是否可以不受任何限制地使用它。

關於package.json的其他欄位,請參考package.json的官方文件

什麼是依賴項和devDependencies?

Dependencies和devDependencies是package.json中列出專案依賴的所有包的欄位。

依賴項欄位包括專案執行所需的所有第三方包。

另一方面,devDependency屬性包含僅在開發過程中需要的包。

依賴項和devDependencies是通過npm install命令與--save--save-dev

如何安裝npm模組並啟動專案?

在使用npm之前,請確保已安裝node.js為此,請開啟終端並執行以下命令:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
node -v
node -v
node -v

終端視窗應顯示系統上安裝的node.js版本:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
V14.17.5
V14.17.5
V14.17.5

使用以下命令對npm執行相同操作:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm -v
npm -v
npm -v

它還應該返回這樣的版本號:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
6.14.14
6.14.14
6.14.14

如果尚未安裝node.js,請從官網下載。

node.js官網

在接下來的部分中,我們將討論一些基本的npm命令。

使用npm初始化專案

要啟動一個新專案,請從npm CLI執行以下命令:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm init
npm init
npm init

此命令將在當前目錄中建立專案的package.json檔案。

執行npm init命令,終端將顯示此資訊:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help init` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (test-npm)
This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help init` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (test-npm)
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help init` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (test-npm)

系統會提示您按以下順序輸入專案資訊:

  • Package name
  • Initial version
  • Description
  • Entry point
  • Test command
  • Git repository
  • Keywords
  • Author
  • License

迴應每一個npm init通過在按Enter之前鍵入自定義值來提示。或者,在不輸入任何內容的情況下按 Enter以保留預設值或括號中的值。

以下是我們如何填寫包裹資訊的示例:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
name: (test-npm)hostinger-npm
version: (1.0.0)1.0.0
description: npm guide for beginner
entry point: (index.js) beginner-npm.js
test command:
git repository:
keywords: npm, example, beginner
author: Hostinger International
license: (ISC) MIT
name: (test-npm)hostinger-npm version: (1.0.0)1.0.0 description: npm guide for beginner entry point: (index.js) beginner-npm.js test command: git repository: keywords: npm, example, beginner author: Hostinger International license: (ISC) MIT
name: (test-npm)hostinger-npm
version: (1.0.0)1.0.0
description: npm guide for beginner
entry point: (index.js) beginner-npm.js
test command:
git repository:
keywords: npm, example, beginner
author: Hostinger International
license: (ISC) MIT

輸入所有專案詳細資訊後,npm init將顯示package.json檔案的預覽,如下所示:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"name": "hostinger-npm",
"version": "1.0.0",
"description": "npm guide for beginner",
"main": "beginner-npm.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"npm",
"example",
"beginner"
],
"author": "Hostinger International",
"license": "MIT",
}
Is this OK? (yes)
{ "name": "hostinger-npm", "version": "1.0.0", "description": "npm guide for beginner", "main": "beginner-npm.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "npm", "example", "beginner" ], "author": "Hostinger International", "license": "MIT", } Is this OK? (yes)
{
  "name": "hostinger-npm",
  "version": "1.0.0",
  "description": "npm guide for beginner",
  "main": "beginner-npm.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "npm",
    "example",
    "beginner"
  ],
  "author": "Hostinger International",
  "license": "MIT", 
}
Is this OK? (yes)

鍵入yes並按Enter儲存package.json檔案。您可以稍後通過編輯檔案或再次執行npm init命令。

如果要生成帶有預設值的package.json檔案而不響應npm init提示,使用此命令:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm init --yes
npm init --yes
npm init --yes

npm將使用預設值建立一個package.json檔案,如下所示:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"name": "mymac-MacBok-Pro",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
{ "name": "mymac-MacBok-Pro", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
{
  "name": "mymac-MacBok-Pro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

建立package.json檔案後,您可以將任何節點包新增到專案中。

在你的專案中安裝npm模組

在開始使用npm時,學習如何安裝包是必不可少的。

要將包新增到您的專案,請執行以下任一命令:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm install <package-name>
// OR
npm i <package-name>
npm install <package-name> // OR npm i <package-name>
npm install <package-name>
// OR
npm i <package-name>

提示:在上面的命令中,替換為您要安裝的模組的名稱。

例如,如果你想安裝express,一個流行的web框架,它簡化了標準的web開發過程,使用下面的命令:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm install express
npm install express
npm install express

此命令將在根專案目錄的node_modules資料夾中安裝express模組。注意node_modules只會在安裝第一個包後出現。

如果軟體包安裝成功,終端將顯示如下訊息:

npm軟體包安裝成功

package.json還將在dependencies欄位中包含模組:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"name": "hostinger-npm",
"version": "1.0.0",
"description": "npm guide for beginner",
"main": "beginner-npm.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"npm",
"example",
"basic"
],
"author": "Hostinger International",
"license": "MIT",
"dependencies": {
"express": "^4.17.1"
}
}
{ "name": "hostinger-npm", "version": "1.0.0", "description": "npm guide for beginner", "main": "beginner-npm.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "npm", "example", "basic" ], "author": "Hostinger International", "license": "MIT", "dependencies": { "express": "^4.17.1" } }
{
  "name": "hostinger-npm",
  "version": "1.0.0",
  "description": "npm guide for beginner",
  "main": "beginner-npm.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "npm",
    "example",
    "basic"
  ],
  "author": "Hostinger International",
  "license": "MIT",
  "dependencies": {
    "express": "^4.17.1"
  }
}

將軟體包安裝為開發依賴項

要安裝僅在開發環境中使用的任何工具,請使用以下命令:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm install <package-name> --save-dev
npm install <package-name> --save-dev
npm install <package-name> --save-dev

例如,您可能希望在任何檔案更改時使用nodemon重新載入您的專案。要安裝此工具,請在終端中鍵入:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm install nodemon --save-dev
npm install nodemon --save-dev
npm install nodemon --save-dev 

安裝nodemon後,終端將顯示以下訊息:

安裝nodemon成功提示資訊

npm還將新增devDependencies開發依賴package.json檔案中包含新資料的部分,如下所示:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"name": "hostinger-npm",
"version": "1.0.0",
"description": "npm guide for beginner",
"main": "beginner-npm.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"npm",
"example",
"basic"
],
"author": "Hostinger International",
"license": "MIT",
"dependencies": {
"express": "^4.17.1"
}
"devDependencies": {
"nodemon": "^2.0.12"
}
}
{ "name": "hostinger-npm", "version": "1.0.0", "description": "npm guide for beginner", "main": "beginner-npm.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "npm", "example", "basic" ], "author": "Hostinger International", "license": "MIT", "dependencies": { "express": "^4.17.1" } "devDependencies": { "nodemon": "^2.0.12" } }
{
  "name": "hostinger-npm",
  "version": "1.0.0",
  "description": "npm guide for beginner",
  "main": "beginner-npm.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "npm",
    "example",
    "basic"
  ],
  "author": "Hostinger International",
  "license": "MIT",
  "dependencies": {
    "express": "^4.17.1"
  }
  "devDependencies": {
    "nodemon": "^2.0.12"
  }
}

在您的系統上全域性安裝模組

如果您想從命令列安裝要使用的 npm 包,請輸入以下任一命令:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm install <package-name> --global
// OR
npm i <package-name> -g
npm install <package-name> --global // OR npm i <package-name> -g
npm install <package-name> --global
// OR
npm i <package-name> -g

務必更換<package-name>與模組名稱。

更新npm

為了保證您的程式碼和工具的安全和穩定,請定期更新從npm登錄檔下載的本地和全域性包。

在更新任何npm包之前,請檢查它們是否已過時。您可以通過從根目錄執行以下命令來檢查專案或系統中的哪些npm包有可用更新:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm outdated
npm outdated
npm outdated

要檢查系統中過時的全域性包,請執行以下命令:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm outdated -g --depth=0
npm outdated -g --depth=0
npm outdated -g --depth=0

獲取過時模組列表後,您可以更新所有包或僅更新其中一個包。

要更新專案中的所有包,請從命令列執行:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm update
npm update
npm update

要更新單個模組,請輸入:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm update <package-name>
npm update <package-name>
npm update <package-name>

記得更換<package-name>使用要更新的包的名稱。

要更新系統中的所有全域性包,請執行以下命令:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm update -g
npm update -g
npm update -g

為了更新單個全域性包,輸入以下命令,替換<package-name>使用模組名稱:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm update -g <package-name>
npm update -g <package-name>
npm update -g <package-name>

要更新Node包管理器本身,請執行以下命令:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm install npm@latest -g
npm install npm@latest -g
npm install npm@latest -g

安裝最新版本的npm後,終端視窗將顯示如下訊息:

安裝最新版本的npm提示資訊

對於其他npm CLI命令,請檢視npm的命令文件

小結

npm是一個流行的包管理器,它讓JavaScript開發人員可以快速輕鬆地共享和部署有用的包。

每個npm專案在其根目錄中都包含一個名為package.json的檔案。該檔案包含專案的後設資料,任何人都可以在npm儲存庫中找到該模組。

除了包含關鍵專案資訊之外,package.json還儲存專案執行所需的專案依賴項列表。

此外,開發人員在開發過程中為幫助他們而安裝的軟體包將包含在devDependencies下的package.json中。

以下是npm命令的概述,可幫助您開始使用此包管理器執行基本任務:

  • 檢查npm版本:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm -v
npm -v
npm -v
  • 初始化一個專案:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm init
npm init
npm init
  • 安裝模組:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm install <package-name>
npm install <package-name>
npm install <package-name>
  • 安裝一個包作為開發依賴:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm install <package-name> --save-dev
npm install <package-name> --save-dev
npm install <package-name> --save-dev
  • 在系統上全域性安裝一個模組:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm install <package-name> --global
npm install <package-name> --global
npm install <package-name> --global
  • 更新專案中的所有包:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm update
npm update
npm update
  • 更新最新版本的npm:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm install npm@latest -g
npm install npm@latest -g
npm install npm@latest -g

我們希望本文能幫助您瞭解什麼是 npm,並提供一些關於如何開始使用它的指導。

評論留言