详解package.json和package-lock

详解package.json和package-lock

package.json和package-lock.json作用

首先要明确一点，package.json不会自动生成，需要我们使用 npm init 创建。package-lock.json是自动生成的，我们使用 npm install 安装包后就会自动生成。

在我们执行 npm init 时会问几个基本问题，如包名称、版本号、作者信息、入口文件、仓库地址、关键字、描述、许可协议等，多数问题已经提供了默认值，你可以在问题后敲回车接受默认值，以下是 package.json常见字段解析 和 package-lock.json的dependencies：（通常我们不会关注package-lock.json的内容，所以这里也就不做赘述了，这里只讲一下其中 dependencies 属性）

/* package.json常见字段解析 */
{
  "name": "npm", // 项目名称
  "version": "1.0.0", // 该项目的版本 建议遵从semver版本规范
  "description": "", // 项目说明
  "main": "index.js", // 入口文件
  /**
   * 脚本配置文件 
   * 配置后可以通过 npm run 执行该脚本脚本文件
   * 对于常用的 start、test、stop、restart 等可以省略掉run，如：npm start;
  */
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "", // 作者名
  /**
   * 开源协议
   * 字段用于指定软件的开源协议，开源协议表述了其他人获得代码后拥有的权利，可以对代码进行何种操作，何种操作又是被禁止的。常见的协议如下：
   * MIT ：只要用户在项目副本中包含了版权声明和许可声明，他们就可以拿你的代码做任何想做的事情，你也无需承担任何责任。
   * Apache ：类似于 MIT ，同时还包含了贡献者向用户提供专利授权相关的条款。
   * GPL ：修改项目代码的用户再次分发源码或二进制代码时，必须公布他的相关修改。
  */
  "license": "ISC",
  /**
   * 开发生成环境依赖
   * 通常是我们项目实际开发用到的一些库模块vue、vuex、vue-router、react、react-dom、axios等等;
  */
  "dependencies": {
    "axios": "^1.2.1", // package的版本
  },
  /**
   * 开发环境依赖
   * 一些包在生成环境是不需要的,比如webpack、babel等
   * 我们可以通过 npm i package -D 只往开发依赖 devDependencies 中添加版本而不往 dependencies 开发生产依赖中添加
  */
  "devDependencies": {},
  /**
   * 对等依赖
   * 也就是你依赖的一个包，它必须是以另外一个宿主包为前提的
   * 比如element-plus是依赖于vue3的， ant design是依赖于react、react-dom
  */
  "peerDependencies": {}
}

/* package-lock.json的dependencies */
"dependencies": { // 与package.json类似 就是开发生产依赖
  "axios": { // packageName
    "version": "1.2.1", // 版本
    // 该包远程仓库的地址
    "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.1.tgz", 
    // 本地缓存地址 npm可以解析为本地路径 下文中的查找缓存就会通过这个字段w
    "integrity": "sha512-I88cFiGu9ryt/tfVEi4kX2SITsvDddTajXTOFmt2uK1ZVA8LytjtdeyefdQWEf5PU8w+4SSJDoYnggflB5tW4A==",
    "requires": { // 当前包依赖的其他包及其版本
      "follow-redirects": "^1.15.0",
      "form-data": "^4.0.0",
      "proxy-from-env": "^1.1.0"
    }
  }
}

通过以上解析后这里给大家总结一下：

• package.json的作用是记录当前项目所依赖模块的版本信息，更新模块时锁定模块的大版本号（版本号的第一位），默认为大版本也可以npm i xxx@x.x.x锁定版本，还有npm run的脚本，项目的基本信息等

• package-lock.json文件会保存 node_modules 中所有包的信息（详细版本、下载地址、缓存地址）等，重新 npm install 的时候会通过记录的信息提示安装速度，如通过 integrity 查找本地缓存而不使用远程仓库

package-lock.json什么时候会变

• 修改依赖位置，比如将部分包的位置从 dependencies 移动到 devDependencies 这种操作，虽然包未变，但是也会影响 package-lock.json，会将部分包的 dev 字段设置为 true。

• 安装源 registry 不同，执行 npm install 时也会修改 package-lock.json。因为他是会记录我们的依赖包地址的。

• 使用 npm install 添加或 npm uninstall 移除包的时

• 更新某个包的版本的时

那些情况下package.json和package-lock.json里面的版本号一致

• 当package.json里面不再使用最优版本，而是一个特定有效版本，也就是版本号前不带修饰符

• 通过 npm install xxx@x.x.x 固定版本号安装

• package.json的package 与 package-lock.json 的版本相同

semver版本规范

• npm的包通常需要遵从semver版本规范:

• semver: https://semver.org/lang/zh-CN/

• npm semver: https://docs.npmjs.com/misc/semver

• semver版本规范是X.Y.Z:

• X主版本号 (major) :当你做了不兼容的API修改(可能不兼容之前的版本)；

• Y次版本号 (minor) :当你做了向下兼容的功能性新增(新功能增加，俱是兼容之前的版本)；

• Z修订号 (patch):当你做了向下兼容的问题修正(没有新功能，修复了之前版本的bug) ；

• ^和~的区别:

• x.y.z:表示一个明确的版本号；

• ^x.y.z:表示x是保持不变的，y和z永远安装最新的版本；

• ~x.y.z:表示x和y保持不变的，z永远安装最新的版本；

其他包管理工具也会生成类似package-lock的文件如：yarn为：yarn.lock、pnpm为：pnpm-lock.yaml，但其实他们的作用都是大同小异的