包管理工具深度解析

• • 包管理工具npm
  • 項目配置檔案package.json
  • 項目配置檔案package-lock.json
  • 版本管理規範
  • npm常用指令
  • npm install 原理（非常重要）
  • 局部指令執行方案

包管理工具npm

包管理工具npm：Node Package Manager，Node包管理工具。

在前端項目中也使用npm來管理依賴的包。

npm管理的包檢視、搜尋：npm官網

項目配置檔案package.json

建立package.json：

npm init

或

npm init -y

{
  "name": "learn_npm",
  "version": "1.0.0",
  "private": "true",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies":{},
  "devDependencies":{},
  "author": "",
  "license": "ISC"
}
           

• name：項目的名稱
• version：項目的版本
• description：項目的描述
• main：項目的入口檔案。這個字段主要是用來開發第三方包，給開發者提供的入口。和webpack打包指令的入口并不沖突。
• scripts：項目的一些腳本指令。其中 test、start、restart、stop編寫進入 scripts執行時，可以不加 run
• author：項目作者的一些資訊
• license：項目遵循的協定
• private：當值為true時，項目是不可以釋出到npm上，這回防止誤操作，不小心執行了釋出指令。
• dependencies：項目生産環境依賴的第三方包
• devDependencies：項目開發環境依賴的第三方包

項目配置檔案package-lock.json

package-lock.json

内詳細記錄着安裝的第三包的資訊（版本，下載下傳路徑）,以及第三方包之間的依賴關系。

以安裝axios為例，對自動生成的這個配置檔案進行說明。

{
  "name": "demo",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "axios": {
      "version": "0.21.4",
      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
      "requires": {
        "follow-redirects": "^1.14.0"
      }
    },
    "follow-redirects": {
      "version": "1.14.4",
      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.4.tgz",
      "integrity": "sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g=="
    }
  }
}
           

• name：項目的名稱
• version：項目的版本
• requires：以requires這個方式管理第三方包的依賴關系，在axios依賴的包内就存在這個字段
• dependencies：安裝的第三方包的具體資訊，和依賴關系

版本管理規範

在

package.json

的

dependencies

和

devDependencies

中，第三方包的版本會出現

^

或

~

的符号。

package.json内的第三方包不會記錄具體的安裝版本,具體的安裝版本在 package-lock.json中。

npm的包遵循 :semver版本規範

簡要說明semver規範：x.y.z

• x主版本号：重大更新
• y次版本号：增加了一些向下相容的新特性
• z修訂号：問題bug的修複

^

和

~

的差別

• ^x.y.z

  ：x保持不變，y和z永遠安裝最新版本

• ~x.y.z

  ：x和y保持不變，z永遠安裝最新版本

npm常用指令

指令中的

install

是可以簡寫成

i

的.

<package>

的意思代表着 要安裝的包名.

安裝指令

• 全局安裝：

  npm install <package> -g

• 局部安裝：

  npm install <package>

• 重新安裝項目的全部依賴：

  npm install

  根據

  package.json

  來建構。

局部安裝的分類

• 開發依賴：

  npm install <package> --save-dev

  、

  npm install <package> -D

  或

  npm i <package> -D

• 生産依賴：

  npm install <package>

  或

  npm i <package>

解除安裝指令

npm uninstall <package>

、

npm uninstall <package> --save-dev

或

npm uninstall <package> -D

強制重新build：

npm rebuild

清除緩存：

npm cache clean

檢視緩存位置：

npm config get cache

npm install 原理（非常重要）

🚩

局部指令執行方案

方案一

明确找到

node_modules

下的

.bin

下的包。

局部webpack的版本：./node_modules/.bin/webpack --version

方案二

通過在

scripts

内定義腳本指令。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack":"webpack --version"
  },
           

npm run webpack
           

方案三

使用

npx

工具，

npx

直接在

node_modules

下的

.bin

下查找對應指令

npx webpack --version