npm 的 lock 机制解析

[QZhan]

npm 是什么

npm 是一个包管理工具，开源作者可以把开源包发布在平台上供其他人下载使用。前端的同学基本都使用过 npm，这里就不做过多介绍。日常工作中 npm 的主要用途就是根据项目的 package.json 使用 npm install 去安装依赖。

npm install 可以说是我们使用最频繁的一个指令。在 npm5 版本之前,npm install 会根据 package.json 指定的依赖版本去进行安装。但往往 package.json 中指定的是一个版本范围，例如：

"dependencies": {
    "packageA": "^2.0.0"
},

以上这个 ^2.0.0 指定的范围是版本号大于等于 2.0.0 且大版本号为 2。即 2.6.10 这个是符合的，而 3.0.0 和 1.0.0 这种是不符合的。

这样的范围指定会导致一个问题：A 新建了一个项目，生成了上面这份 package.json 文件，但 A 安装依赖的时间比较早，此时 packageA 的最新版本是 2.1.0，该版本与代码兼容，没有出现 bug。后来 B 克隆了 A 的项目，在安装依赖时 packageA 的最新版本是 2.2.0，那么根据语义 npm 会去安装 2.2.0 的版本，但 2.2.0 版本的 API 可能发生了改动，导致代码出现 bug。

这就是 package.json 会带来的问题，同一份 package.json 在不同的时间和环境下安装会产生不同的结果。

理论上这个问题是不应该出现的，因为 npm 作为开源世界的一部分，也遵循一个发布原则：相同大版本号下的新版本应该兼容旧版本。即 2.1.0 升级到 2.2.0 时 API 不应该发生变化。

但很多开源库的开发者并没有严格遵守这个发布原则，导致了上面的这个问题。

lock 机制

一个新的事物的诞生都是为了解决一个历史问题

基于这种状况，npm5 推出了 lock 机制。在使用 npm5.0.0 之后的版本时，npm install 后会自动生成 package-lock.json 文件，该文件记录了当前这次 install 所安装的依赖版本号。

例如当 package.json 的依赖如下：

"dependencies": {
    "vue": "^2.0.0"
  },

install 后自动生成的 package-lock.json 会指定安装 vue2.6.10 版本（当前最新）

"dependencies": {
    "vue": {
      "version": "2.6.10",
      "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.10.tgz",
      "integrity": "sha1-pysaQqTYKnIepDjRtr9V5mGVxjc="
    }
  }

package-lock.json 相当于本次 install 的一个快照，它不仅记录了 package.json 指明的直接依赖的版本，也记录了间接依赖的版本。

如果我们想在不同环境和不同时间下每次 install 时安装相同版本的依赖，我们就可以把 package-lock.json 带上。

当 package.json 和 package-lock.json 同时存在时，npm install 会去检测 package-lock.json 指定的依赖版本是否在 package.json 指定的范围内。如果在，则安装 package-lock.json 指定的版本。如果不在，则忽略 package-lock.json，并且用安装的新版本号覆盖 package-lock.json。

举个例子：

// package.json
"dependencies": {
    "vue": "^2.0.0"
  }

// package-lock.json
"dependencies": {
    "vue": {
      "version": "2.1.0",
      "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.1.0.tgz",
      "integrity": "sha1-KTuj76rKhGqmvL+sRc+FJMxZfj0="
    }
  }

这种情况下 package-lock.json 指定的 2.1.0 在^2.0.0 指定的范围内，npm install 会安装 vue2.1.0 版本。

// package.json
"dependencies": {
    "vue": "^2.2.0"
  }

// package-lock.json
"dependencies": {
    "vue": {
      "version": "2.1.0",
      "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.1.0.tgz",
      "integrity": "sha1-KTuj76rKhGqmvL+sRc+FJMxZfj0="
    }
  }

这种情况下 package-lock.json 指定的 2.1.0 不在^2.2.0 指定的范围内，npm install 会按照^2.2.0 的规则去安装最新的 2.6.10 版本，并且将 package-lock.json 的版本更新为 2.6.10 。

值得注意的是 npm5 一发布时并不是采取这种 install 逻辑，在 npm5.0 到 npm5.6 之间 install 的逻辑发生了多次变更，而在 npm5.6 之后一直沿用当前这种逻辑。

npm ci

npm5 之后的 lock 机制满足了要求锁版本的开发者们的需要，我们只需要拿到一份 package-lock.json 就可以知道要安装的依赖的具体版本号。但细心的同学会发现当 package-lock.json 指定的版本号不在 package.json 指定的范围内时，package-lock.json 就会被更新覆盖。这可不利于我们去维持版本的固定。

因此后续 npm 也推出了 npm ci 的指令来解决这一问题，npm ci 和 npm i 的不同之处在于：当 package-lock.json 指定的依赖版本不在 package.json 指定的依赖版本范围内时，npm 会报错并取消安装。

这样我们就不怕在 package-lock 和 package.json 不一致时发生覆盖更新。

总结

在 npm5.6 以后我们就可以放心大胆地使用 package-lock.json 文件来锁版本，而在构建部署时可以使用 npm ci 安装命令来防止 npm install 的覆盖更新问题。

写在最后

我个人开了一个公众号“前端搬运小工”，我会定期推送优秀的前端精选文章，拒绝无脑基础入门的文章，带给你不一样的前端视角。

[ochatokori]

感觉我没碰到过依赖版本的变化带来的问题…

杠一下，用得最多的是 npm run dev