npm中package.json与package-lock.json的区别

模块化开发在前端越来越流行，使用node和npm可以很方便的下载管理项目所需要的依赖模块。package.json就是用来描述项目及项目所依赖的信息模块。那package.json和package-lock.json有什么关联呢。

一、package.json

通过npm包管理工具，命令行 npm install 可以自动生成package.json。

dependencies和devDependencies

devDependencies下列出的模块，是我们开发时用的依赖项，像一些进行单元测试之类的包，比如jest，我们用写单元测试，它们不会被部署到生产环境。

dependencies下的模块，则是我们生产环境中需要的依赖，即正常运行该包时所需要的依赖项。

语义化版本：

使用第三方依赖时，通常需要指定依赖的版本范围，比如：

"dependencies": {

"core-js": "^3.8.3",

"axios": "^1.3.1",

"element-ui": "^2.15.12",

"vue-router": "^3.6.5",

"vuex": "^3.6.2",

"vue": "^2.6.14"

},

版本号由三部分组成：major.minor.patch，主版本号.次版本号.修补版本号。

例如："vue-router": "^3.6.5",主要版本3，次要版本6，补丁5。

• 补丁中的更改表示不会破坏任何内容的错误修复。
• 次要版本的更改表示不会破坏任何内容的新功能。
• 主要版本的更改代表了一个破坏兼容性的大变化。如果用户不适应主要版本更改，则内容将无法正常工作。
• ^向上尖号是定义向后（新）兼容依赖，在大版本上相同，就允许下载最新的包。

语义化版本规则定义了一种理想的版本号更新规则，希望所有的依赖更新都能遵循这个规则，但是往往会有许多依赖不是严格遵循这些规定的。

因此，如何管理好这些依赖，尤其是这些依赖的版本就显得尤为重要，否则一不小心就会陷入因依赖版本不一致导致的各种问题中。

二、问题的产生

当我们使用了 ^ 或者其他符号来控制依赖包版本号的时候 ，多人开发，就有可能存在大家安装的依赖包版本不一样的情况，就会存在项目运行的结果不一样。

场景

安装 vue 后，我们可以在项目中的 package.json 中看到版本号为 vue: ^3.0.0，这也是我们电脑中的版本号。然而，时间一长，vue 发布了新版本 3.0.1。如果一个新同事克隆了项目并执行了 npm install，那么他电脑中的 vue 版本将会是 3.0.1。因为 ^ 仅锁定了主版本，所以我们的电脑中的 vue 版本会不一致。理论上来说，它们应该是兼容的（如果大家都遵循语义版本控制），但是 bugfix 可能会影响我们正在使用的功能。此外，当使用不同版本的 vue 运行时，应用程序也会产生不同的结果。

大家思考思考，这样的话，不同人电脑安装的依赖版项目，是不是都有可能不一样，就会导致每个人电脑运行的应用程序产生不同的结果。就会存在bug的隐患。

问题产出的原因

package.json文件只能锁定大版本，即版本号的第一位，不能锁定后面的小版本，你每次npm install时候拉取的该大版本下面最新的版本

解决办法

为了解决 npm install 的不确定性问题，在 npm 5.x 版本新增了 package-lock.json 文件

当你执行npm install的时候，node从package.json文件读取模块名称，从package-lock.json文件中获取版本号，然后进行下载或者更新。

三、package-lock.json

package-lock.json 它会在 npm 更改 node_modules 目录树 或者 package.json 时自动生成的，它准确的描述了当前项目npm包的依赖树，并且在随后的安装中会根据 package-lock.json 来安装，保证是相同的一个依赖树，不考虑这个过程中是否有某个依赖有小版本的更新。

package-lock.json文件可以锁定所有模块的版本号，包括主模块和所有依赖子模块。package-lock.json 的作用是锁定依赖结构，即只要你目录下有 package-lock.json 文件，那么你每次执行 npm install 后生成的 node_modules 目录结构一定是完全相同的。

package-lock.json生成逻辑

正文例如：我们有如下依赖结构

"dependencies": {

"core-js": "^3.8.3",

"axios": "^1.3.1",

"element-ui": "^2.15.12",

"vue-router": "^3.6.5",

"vuex": "^3.6.2",

"vue": "^2.6.14"

}

在执行 npm install 后生成的 package-lock.json 如下：

"dependencies": {

"axios": {

"version": "1.3.2",

"resolved": "https://registry.npmjs.org/axios/-/axios-1.3.2.tgz",

"integrity": "sha512-1M3O703bYqYuPhbHeya5bnhpYVsDDRyQSabNja04mZtboLNSuZ4YrltestrLXfHgmzua4TpUqRiVKbiQuo2epw==",

"requires": {

"follow-redirects": "^1.15.0",

"form-data": "^4.0.0",

"proxy-from-env": "^1.1.0"

}

},

"core-js": {

"version": "2.6.12",

"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",

"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="

},

"element-ui": {

"version": "2.15.12",

"resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.12.tgz",

"integrity": "sha512-Y5FMT2BPOindU2GkDEQ5ZKUVxDawKONRNMh2eL3uBx1FOtvUJ+L6IxXLVsNxq4WnaX/UnVNgWXebl7DobygZMg==",

"requires": {

"async-validator": "~1.8.1",

"babel-helper-vue-jsx-merge-props": "^2.0.0",

"deepmerge": "^1.2.0",

"normalize-wheel": "^1.0.1",

"resize-observer-polyfill": "^1.5.0",

"throttle-debounce": "^1.0.1"

}

},

}

• dependencies 是一个对象，对象和 node_modules 中的包结构一一对应，对象的 key 为包名称，值为包的一些描述信息：
• version：包版本 —— 这个包当前安装在 node_modules 中的版本。
• resolved：包具体的安装来源。
• integrity：包 hash 值，基于 Subresource Integrity 来验证已安装的软件包是否被改动过、是否已失效
• requires：对应子依赖的依赖，与子依赖的 package.json 中 dependencies的依赖项相同。
• dependencies：结构和外层的 dependencies 结构相同，存储安装在子依赖 node_modules 中的依赖包。

这里注意：并不是所有的子依赖都有 dependencies 属性，只有子依赖的依赖和当前已安装在根目录的 node_modules 中的依赖冲突之后，才会有这个属性。

使用建议

开发系统应用时，建议把 package-lock.json 文件提交到代码版本仓库，从而保证所有团队开发者以及 CI 环节可以在执行 npm install 时安装的依赖版本都是一致的。

注意事项

使用cnpm install时候，并不会生成 package-lock.json 文件，也不会根据 package-lock.json 来安装依赖包，还是会使用 package.json 来安装。

总结

package.json记录的是当前项目中你下载了哪些包（也即npm install xx 的包信息），记录了你下载的包信息（地址、版本号等），不包含依赖包信息。

package-lock.json文件记录的是当前项目中你下载了哪些包以及你下载的这些包的各种依赖包信息，包括地址、版本号等。