技術文章 » 包管理器

包管理器

2022-12-06 12:00:36

包管理器

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

1.NPM

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

  1. npm的下載

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

  2. package.json

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

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

2.package.json

  1. 重要欄位

    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/[包名]
  2. 資訊類欄位

    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"
  ]
}
  3. 連結類欄位

    1. 各種指向專案檔案、issues 上報，以及程式碼託管網站的連結欄位。

    2. homepage

      1. 是包的專案主頁或者檔案首頁。
      {
  "homepage": "https://your-package.org"
}

    3. repository

      1. 包的實際程式碼所在的位置。
      {
  "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"
}

    4. bugs

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

    1. 專案的維護者。

    2. author

      1. 作者資訊，一個人。
      {
  "author": {
    "name": "Your Name",
    "email": "[email protected]",
    "url": "http://your-x.com"
  },
  "author": "Your Name <[email protected]> (http://your-x.com)"
}

    3. contributors

      1. 貢獻者資訊，可能很多人。
      {
  "contributors": [
    { "name": "Your Friend", "email": "[email protected]", "url": "http://friends-xx.com" }
    { "name": "Other Friend", "email": "[email protected]", "url": "http://other-xx.com" }
  ],
  "contributors": [
    "Your Friend <[email protected]> (http://friends-xx.com)",
    "Other Friend <[email protected]> (http://other-xx.com)"
  ]
}
  5. 檔案類資訊

    1. 指定包含在專案中的檔案，以及專案的入口檔案。

    2. files

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

    3. main

      1. 專案的入口檔案。
      {
  "main": "filename.js"
}

    4. man

      1. 專案的入口檔案。
      {
  "man": "./man/doc.1",
  "man": ["./man/doc.1", "./man/doc.2"]
}

    5. directories

      1. 當你的包安裝時，你可以指定確切的位置來放二進位制檔案、man pages、檔案、例子等。
      {
  "directories": {
    "lib": "path/to/lib/",
    "bin": "path/to/bin/",
    "man": "path/to/man/",
    "doc": "path/to/doc/",
    "example": "path/to/example/"
  }
}

    6. bin

      1. 隨著專案一起被安裝的可執行檔案。
      {
  "bin": "bin.js",
  "bin": {
    "命令名稱": "bin/命令路徑/命令名稱.js",
    "other-command": "bin/other-command"
  }
}
  6. 打包包欄位

    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"
}
  7. 任務類欄位

    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"
  }
}
  8. 依賴描述類欄位

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

    2. dependencies

      1. 這些是你的包的開發版和釋出版都需要的依賴。
      {
  "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"
  }
}

    3. devDependencies

      1. 這些是隻在你的包開發期間需要，但是生產環境不會被安裝的包。
      {
  "devDependencies": {
    "package-2": "^0.4.2"
  }
}

    4. ``peerDependencies`

      1. 平行依賴允許你說明你的包和其他包版本的相容性。新增可選設定以消除丟失的對等依賴性警告，#6671 。
      {
  "peerDependencies": {
    "package-3": "^2.7.18"
  }
}

    5. optionalDependencies

      1. 可選依賴可以用於你的包，但不是必需的。如果可選包沒有找到，安裝還可以繼續。
      {
  "optionalDependencies": {
    "package-5": "^1.6.1"
  }
}

    6. bundledDependencies

      1. 打包依賴是釋出你的包時將會一起打包的一個包名陣列。
      {
  "bundledDependencies": [
    "package-4"
  ]
}

    7. ``peerDependenciesMeta`

      1. 它允許對等依賴項標記為可選
      {
  "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. 安裝包

    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 [email protected]

      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

  2. 全域性安裝包
    1. 全域性安裝指，直接將包安裝到計算機本地，通常全域性安裝的都是一些命令列工具，全域性安裝後工具使用起來也會更加便利。全域性安裝只需要在執行install指令時新增-g指令即可。
    2. npm i <包名> -g
  3. 解除安裝包
    1. 可以通過 npm uninstall <包名>或者npm un <包名>
  4. 設定映象
    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