包管理器

冰大墩發表於2022-12-06

包管理器

隨著我們專案的複雜的提升，在開發中我們不可能所有的程式碼都要手動一行一行的編寫，於是我們就需要將一些現成寫好的程式碼引入到我們的專案中來幫助我們完成開發，就像是我們之前使用jQuery，我們稱之為包，越是複雜的專案，其中需要的包就越多，那我們如何下載包，刪除包，更新包？

1.NPM

node中的包管理器叫npm(node package manage),由npm網站，npm cli和倉庫組成

npm的下載
1. npm在我們下載完node就一起安裝好了，我們可以直接在命令列中執行npm -v來檢視npm是否安裝成功
2. 在說npm包的使用，我們先了解一下package.json這個配置檔案

package.json

它是一個包的描述檔案，就是包的各種資訊都在這個裡面，如版本，包名，依賴等

{
  "name": "my-awesome-package"，
  "version": "1.0.0"，
  "description": "我的包的概要簡短描述"，
  "license": "MIT",
}
還有很多，請看下面：

2.package.json

重要欄位
1. 規則：
  1. 必須小於或等於214個字元(包括@scope/範圍包)
  2. 不能以點(.)或者下劃線(_)開頭
  3. 名稱中不得包含大寫字母
  4. 必須僅使用URL安全字元
2. ```
//name
{
  "name": "my-awesome-package"
}	
```
3. ```
//version
{
  "version": "1.0.0"
}
```
4. Tips：
  1. 不要使用和Node.js核心模組相同的名字
  2. 不要在名字裡包含js或者node單詞
  3. 短小精悍，讓人看到名字就大概瞭解包的功能，記住它也會被用在require()呼叫裡
  4. 保證名字的唯一性
  5. name和version欄位一起用於建立唯一ID
5. 安裝包
  1. npm install [包名]
  2. yarn add [包名]
  3. 安裝之後存放在node_modules/[包名]
資訊類欄位
1. description
  1. 幫助使用者瞭解包的功能的字串，包管理器也會把這個字串作為搜尋關鍵詞。
```
{
  "description": "我的包的概要簡短描述"
}
```
2. license
  1. 所有包都應該指定許可證，以便讓使用者瞭解他們是在什麼授權下使用此包，以及此包還有哪些附加限制。
```
{
  "license": "MIT",
  "license": "(MIT or GPL-3.0)",
  "license": "SEE LICENSE IN LICENSE_FILENAME.txt",
  "license": "UNLICENSED"
}
```
3. keywords
  1. 一個字串陣列，當在包管理器裡搜尋包時很有用。
```
{
  "keywords": [
    "short", "relevant", "keywords"
  ]
}
```

連結類欄位

各種指向專案文件、issues 上報，以及程式碼託管網站的連結欄位。
homepage
1. 是包的專案主頁或者文件首頁。
```
{
  "homepage": "https://your-package.org"
}
```

repository

包的實際程式碼所在的位置。

{
  "repository": {
    "type": "git", "url": "https://github.com/user/repo.git"
  },
  "repository": "github:user/repo",
  "repository": "gitlab:user/repo",
  "repository": "bitbucket:user/repo",
  "repository": "gist:a1b2c3d4e5f"
}

bugs
1. 問題反饋系統的 URL，或者是 email 地址之類的連結。使用者透過該途徑向你反饋問題。
```
{
  "bugs": "https://github.com/user/repo/issues"
}
```

專案維護類欄位

專案的維護者。

author

作者資訊，一個人。

{
  "author": {
    "name": "Your Name",
    "email": "you@xxx.com",
    "url": "http://your-x.com"
  },
  "author": "Your Name <you@xxx.com> (http://your-x.com)"
}

contributors

貢獻者資訊，可能很多人。

{
  "contributors": [
    { "name": "Your Friend", "email": "friend@xxx.com", "url": "http://friends-xx.com" }
    { "name": "Other Friend", "email": "other@xxx.com", "url": "http://other-xx.com" }
  ],
  "contributors": [
    "Your Friend <friend@xxx.com> (http://friends-xx.com)",
    "Other Friend <other@xxx.com> (http://other-xx.com)"
  ]
}

檔案類資訊

指定包含在專案中的檔案，以及專案的入口檔案。
files
1. 專案包含的檔案，可以是單獨的檔案、整個資料夾，或者萬用字元匹配到的檔案。
```
{
  "files": [
    "filename.js",
    "directory/",
    "glob/*.{js,json}"
  ]
}
```
main
1. 專案的入口檔案。
```
{
  "main": "filename.js"
}
```

man

專案的入口檔案。

{
  "man": "./man/doc.1",
  "man": ["./man/doc.1", "./man/doc.2"]
}

directories

當你的包安裝時，你可以指定確切的位置來放二進位制檔案、man pages、文件、例子等。

{
  "directories": {
    "lib": "path/to/lib/",
    "bin": "path/to/bin/",
    "man": "path/to/man/",
    "doc": "path/to/doc/",
    "example": "path/to/example/"
  }
}

bin

隨著專案一起被安裝的可執行檔案。

{
  "bin": "bin.js",
  "bin": {
    "命令名稱": "bin/命令路徑/命令名稱.js",
    "other-command": "bin/other-command"
  }
}

打包包欄位
1. 簡短說明一下
  1. esnext：ES模組中使用階段4功能（或更舊版本）的原始碼，未編譯。
  2. main：指向一個CommonJS模組（或UMD模組），其 JavaScript 與 Node.js 當前可以處理的一樣現代。
  3. 大多數 module 用例應該可以透過 esnext 處理。
  4. browser 可以透過 esnext 的擴充套件版本來處理
  5. 另請參閱：透過 npm 交付未編譯的原始碼
```
{
  "main": "main.js",
  "esnext": {
    "main": "main-esnext.js",
    "browser": "browser-specific-main-esnext.js"
  }
}
```
2. module
  1. 支援：rollup, webpack
  2. ```
  {
    "module": "dist/my-package.esm.js"
  }
```
3. browser
  1. 作為 JavaScript 包或元件工具的提示，在這裡。
  2. ```
  "browser": {
      "module-a": "./shims/module-a.js",
      "./server/only.js": "./shims/client-only.js"
  }
```
任務類欄位
1. 包裡還可以包含一些可執行指令碼或者其他配置資訊。
2. scripts
  1. 指令碼是定義自動化開發相關任務的好方法，比如使用一些簡單的構建過程或開發工具。在 scripts 欄位裡定義的指令碼，可以透過 yarn run 命令來執行。例如，上述 build-project 指令碼可以透過 yarn run build-project 呼叫，並執行 node build-project.js。
    
    有一些特殊的指令碼名稱。如果定義了 preinstall 指令碼，它會在包安裝前被呼叫。出於相容性考慮，install、postinstall 和 prepublish 指令碼會在包完成安裝後被呼叫。
    
    start 指令碼的預設值為 node server.js。
    
    參考文件：npm docs
  2. ```
  {
    "scripts": {
      "build-project": "node build-project.js"
    }
  }
```
3. 特定的scripts
  1. 參考文件：npm docs.
4. config
  1. 配置你的指令碼的選項或引數。
```
{
  "config": {
    "port": "8080"
  }
}
```
  1. 配置中的鍵作為環境變數公開給指令碼(scripts)。
```
{
  "scripts": {
    "run": "echo $npm_package_config_port"
  }
}
```

依賴描述類欄位

你的包很可能依賴其他包。你可以在你的 package.json 檔案裡指定那些依賴。

dependencies

這些是你的包的開發版和釋出版都需要的依賴。

{
  "dependencies": {
    "colors":   "*",
    "foo": "1.0.0 - 2.9999.9999",
    "bar": ">=1.0.2 <2.1.2",
    "baz": ">1.0.2 <=2.3.4",
    "boo": "2.0.1",
    "qux": "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0",
    "asd": "http://asdf.com/asdf.tar.gz",
    "til": "~1.2",
    "elf": "~1.2.3",
    "two": "2.x",
    "thr": "3.3.x",
    "lat": "latest",
    "dyl": "file:./path/to/dyl",
    "pla": "https://github.com/user/project/tarball/branch",
    "stu": "git://github.com/user/project.git#commit-ish"
  }
}

devDependencies
1. 這些是隻在你的包開發期間需要，但是生產環境不會被安裝的包。
```
{
  "devDependencies": {
    "package-2": "^0.4.2"
  }
}
```
``peerDependencies`
1. 平行依賴允許你說明你的包和其他包版本的相容性。新增可選設定以消除丟失的對等依賴性警告，#6671 。
```
{
  "peerDependencies": {
    "package-3": "^2.7.18"
  }
}
```
optionalDependencies
1. 可選依賴可以用於你的包，但不是必需的。如果可選包沒有找到，安裝還可以繼續。
```
{
  "optionalDependencies": {
    "package-5": "^1.6.1"
  }
}
```
bundledDependencies
1. 打包依賴是釋出你的包時將會一起打包的一個包名陣列。
```
{
  "bundledDependencies": [
    "package-4"
  ]
}
```

``peerDependenciesMeta`

它允許對等依賴項標記為可選

{
  "peerDependenciesMeta": {
    "node-sass": {
      "optional": true
    },
    "sass": {
      "optional": true
    },
    "fibers": {
      "optional": true
    }
  }
}

以上就是package.json的部分配置了，可以參考npm docs. 那我們繼續來說npm

1.NPM

通常情況下，我們的自己建立的每個node專案，都可以被認為是一個包，都應該為其建立package.json描述檔案，我們的npm在建立package.json檔案，只需要進入專案，輸入 npm init，就可以進入到互動介面，來輸入指定資訊，建立包，我們一般透過npm init -y直接預設來建立package.json，無論怎麼樣，建立一個即可,如果想要檢視完整命令：

npm 倉庫、網站和命令列介面的文件

npmmirror 中國映象站

安裝包
1. 安裝命令為npm i <包名>
  
  我們執行一下npm i lodash安裝一個包
2. 1.首先我們看到的，呼叫後它會自動連線npm伺服器，將最新的loadsh包下載到專案的node_modules目錄下，如果目錄不存在下載包時會自動建立。
3. 它會修改package.json檔案，在dependencies欄位中將剛剛下載的包設定為依賴項
```
"dependencies": {
    "lodash": "^4.17.21"
 }
```
4. 可以指定版本進行安裝
  1. npm install lodash@3.2.0
  2. npm install lodash@"> 3.2.0"
5. 如果不希望，包出現在package.json的依賴中，可以新增–no-save指令禁止, 也可以透過-D或–save-dev，將其新增到開發依賴
6. npm install lodash --no-save
7. npm install lodash -D
8. 安裝包後專案中會自動生成package.lock.json檔案，這個檔案主要是用來記錄當前專案的下包的結構和版本的，提升重新下載包的速度，以及確保包的版本正確。
9. 列出此軟體中所有依賴項的已安裝版本
10. npm list
全域性安裝包
1. 全域性安裝指，直接將包安裝到計算機本地，通常全域性安裝的都是一些命令列工具，全域性安裝後工具使用起來也會更加便利。全域性安裝只需要在執行install指令時新增-g指令即可。
2. npm i <包名> -g
解除安裝包
1. 可以透過 npm uninstall <包名>或者npm un <包名>
配置映象
1. 第一種是使用cnpm的形式，不太推薦
  1. npm install -g cnpm --registry=https://registry.npmmirror.com
  2. 安裝完成後，便可以透過cnpm命令來安裝包。
2. 第二種是直接修改npm的地址為映象地址
  1. npm set registry https://registry.npmmirror.com
3. 如果想恢復到原版的配置，可以執行以下命令:
4. npm config delete registry

2.Yarn

早期的npm存在有諸多問題，不是非常的好用。yarn的出現就是為了幫助我們解決npm中的各種問題

在新版本的node中，corepack中已經包含了yarn，可以透過啟用corepack的方式使yarn啟用。首先執行以下命令啟用corepack ：

corepack enable

檢視yarn的版本

yarn -v

切換yarn版本，最新版：

corepack prepare yarn@stable --activate

切換為1.x.x的版本

corepack prepare yarn@1 --activate

命令

yarn init （初始化，建立package.json）

yarn add xxx（新增依賴）

yarn add xxx -D（新增開發依賴）

yarn remove xxx（移除包）

yarn（自動安裝依賴）

yarn run（執行自定義指令碼）

yarn <指令>（執行自定義指令碼）

yarn global add（全域性安裝）

yarn global remove（全域性移除）

yarn global bin（全域性安裝目錄）

Yarn映象配置

配置：

yarn config set registry https://registry.npmmirror.com

恢復：

yarn config delete registry

Pnpm

pnpm又是一款node中的包管理器，我真的不想在介紹了。但是想想還是說一下吧，畢竟也不難。作為初學者的你，npm、yarn和pnpm選一個學一學就可以了。

安裝

npm install -g pnpm

命令

pnpm init（初始化專案，新增package.json）

pnpm add xxx（新增依賴）

pnpm add -D xxx（新增開發依賴）

pnpm add -g xxx（新增全域性包）

pnpm install（安裝依賴）

pnpm remove xxx（移除包）

Pnpm映象配置

配置：

pnpm config set registry https://registry.npmmirror.com

恢復：

pnpm config delete registry

npm包管理器
2024-04-08
NPM
包管理器原理猜想
2019-01-15
流式佈局管理器
2018-09-06
yarn包管理器使用
2024-04-08
Yarn
golang多版本管理器
2019-05-23
Golang
php多程式管理器
2022-08-19
PHP
常用佈局管理器
2022-03-20
Deno是程式碼瀏覽器：沒有軟體包管理器或集中式包儲存庫 - kitsonkelly
2020-05-29
瀏覽器
邊界佈局管理器
2018-09-06
網格佈局管理器
2018-09-06
八企業管理器 GBaseDataStudio
2020-05-22
AST
HTTP資訊頭管理器
2020-10-12
HTTP
X視窗管理器大全
2020-04-06
Django自定義模型管理器
2019-05-30
Django模型
FastCGI 程式管理器（FPM）-配置
2018-03-23
AST
zCommander for Mac - 檔案管理器
2021-12-16
Mac
Clipsy for mac(剪下板管理器)
2023-03-27
Mac
Linux QtFM 檔案管理器
2023-02-04
LinuxQT
包管理器pacman常用方法
2022-11-27
ACM
SyncBird for maciPhone檔案管理器
2021-01-13
MaciPhone
Dial!List for Mac呼叫管理器
2021-01-05
Mac
Workspaces for Mac檔案管理器
2020-11-30
Mac
裝置管理器在哪win10_win10電腦裝置管理器在哪
2020-01-11
Win10
win10磁碟管理器在哪裡開啟怎麼開啟磁碟管理器
2021-11-18
Win10
資源管理器如何重啟 win10重啟資源管理器的方法
2021-12-27
Win10
Pyhton提高：with上下文管理器
2018-09-27
JavaGUI - [03] LayoutManager佈局管理器
2024-05-06
JavaGUI
macos視窗管理器：Lasso for Mac
2024-01-16
Mac
Rust 包管理器 Cargo 入門
2020-03-09
RustCargo
ClipboardAction for mac剪貼簿管理器
2020-11-19
Mac
密碼管理器進化史
2020-03-26
密碼
最好的檔案管理器-dolphin
2024-09-23
Scoop windows下的包管理器
2024-09-02
OOPWindows
scoop-軟體包管理器
2024-06-10
OOP
choco-軟體包管理器
2024-06-10
修復windows組策略管理器
2024-11-28
Windows
go-filesystem 檔案管理器
2022-01-30
Go
oneSafe for Mac(日常密碼管理器)
2021-11-30
Mac密碼

包管理器

包管理器

1.NPM

2.package.json

重要欄位

資訊類欄位

連結類欄位

專案維護類欄位

檔案類資訊

打包包欄位

任務類欄位

依賴描述類欄位

1.NPM

安裝包

全域性安裝包

解除安裝包

配置映象

2.Yarn

命令

Yarn映象配置

Pnpm

安裝

命令

Pnpm映象配置

相關文章