package.json文件解析

【图书介绍】《Node.js+MongoDB+Vue.js全栈开发实战》-CSDN博客

《Node.js+MongoDB+Vue.js全栈开发实战（Web前端技术丛书）》(邹琼俊)【摘要 书评 试读】- 京东图书 (jd.com)

本节主要介绍package.json文件的作用及文件中各个选项的含义。

2.4.1  node_modules目录的问题

虽然目前我们只安装了几个包，但是打开node_modules这个目录，会发现里面包含了gulp-demo项目gulp的所有依赖包，如图2-8所示。

图2-8

目录中存在以下问题：

1. 目录以及文件过多、过碎，当我们将项目整体复制给别人的时候，传输速度会很慢。
2. 复杂的模块依赖关系需要被记录，以确保模块的版本和当前的保持一致，否则会导致当前项目运行报错。

要解决上述问题，就需要package.json文件。

2.4.2  package.json文件的作用

package.json包描述文件相当于产品的说明书，它记录了当前项目信息，例如项目名称、版本、作者、GitHub地址、当前项目依赖了哪些第三方模块等。

使用npm init -y命令可以快捷生成package.json文件。其中，init是初始化的意思；-y是yes的意思，表示不填写任何信息，全部采用默认配置。

项目依赖的第三方模块分为项目依赖和开发依赖两种。

1. 项目依赖

在项目的开发阶段和线上运营阶段都需要依赖的第三方包，称为项目依赖。

使用“npm install包名”命令下载的文件默认会被添加到package.json文件的dependencies字段中。

例如：

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

2. 开发依赖

在项目的开发阶段需要依赖而线上运营阶段不需要依赖的第三方包，称为开发依赖。

使用“npm install包名--save-dev”命令将包添加到package.json文件的devDependencies字段中。

例如：

  "devDependencies": {
    "gulp": "^4.0.2"
  }

总结：项目运行必须用到的包应该配置为项目依赖，如果只是开发环境用到（例如压缩、样式转换等）包，则应该配置为开发依赖。项目依赖中只保留必要的包，这样可以减少生产环境项目包的大小。

建议每个项目都有且只有一个package.json文件（存放在项目的根目录）。

2.4.3  package.json文件中各个选项含义

package.json文件就是一个JSON对象，该对象的每一个成员就是当前项目的一项设置。

我们以前面gulp-demo项目中的package.json文件为例：

{
  "name": "gulp-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.2",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-csso": "^4.0.1",
    "gulp-file-include": "^2.3.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-less": "^5.0.0",
    "gulp-uglify": "^3.0.2"
  },
  "dependencies": {
      
  }
}

各个选项的含义说明如下：

1. name：项目名称。
2. version：项目版本号，版本号遵守“大版本.次要版本.小版本”的格式。
3. description：项目描述。
4. main：加载的入口文件，require('moduleName')会按照顺序来查找文件，如果前面都找不到模块，最后就会加载这个文件。这个字段的默认值是模块根目录下面的index.js。
5. scripts：指定运行脚本命令的npm命令行缩写，比如test指定了运行npm run test时所要执行的命令。
6. author：项目作者。
7. license：许可证类型，例如ISC许可证是一种开放源代码许可证。
8. devDependencies：指定项目开发所需要的模块。
9. dependencies：指定项目运行所依赖的模块。

其他属性：

1. browser：指定该模块供浏览器使用的版本。可以通过浏览器打包工具Browserify知道该打包那个文件。
2. engines：指明该模块运行的平台，比如Node.js的某个版本或者浏览器。
3. preferGlobal：布尔类型，表示当用户不将该模块安装为全局模块时（即不用–global参数），要不要显示警告，默认安装为全局模块。
4. style：指定供浏览器使用时，样式文件所在的位置。可以通过样式文件打包工具parcelify知道样式文件的打包位置。
5. config：用于添加命令行的环境变量。
6. bin：用来指定各个内部命令对应的可执行文件的位置。
7. private：布尔类型，值为true表示npm将拒绝发布。通过它可以防止意外发布私有存储库。

2.4.4  package-lock.json文件的作用

如果使用npm安装包，那么对应会生成package-lock.json文件。如果使用yarn安装包，那么对应生成的是yarn.lock文件。这两个文件都用于记录当前项目所依赖的各个包的版本。

对于package-lock.json文件，其作用如下：

1. 锁定包的版本，确保再次下载时不会因为包版本不同而产生问题。
2. 加快下载速度，因为该文件中已经记录了项目所依赖的第三方包的树状结构和包的下载地址，所以重新安装时直接下载即可，不需要做额外的工作。

package-lock.json的主要目的是确保即使是在不同环境中，使用相同的package.json文件也能获得一致的依赖树。这个文件在npm 5被引入，因此如果使用npm 5或更高版本，就会在项目中看到package-lock.json文件，除非明确地禁用了它。有了package-lock.json以后，npm会根据package-lock.json里的内容来处理和安装依赖，而不是根据package.json。因为pacakge-lock.json给每个依赖都标明了版本、获取地址和哈希值，使得每次安装都会出现相同的结果，而不用管我们在什么机器上面安装或什么时候安装。

package-lock.json代码示例如下：

{
  "name": "gulp-demo",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "ansi-colors": {
      "version": "1.1.0",
      "resolved": "https://registry.npm.taobao.org/ansi-colors/download/ansi-colors-1.1.0.tgz",
      "integrity": "sha1-Y3S03V1HGP884npnGjscrQdxMqk=",
      "dev": true,
      "requires": {
        "ansi-wrap": "0.1.0"
      }
    },
...

2.4.5  yarn.lock的作用

yarn.lock的作用和package-lock.json类似，都是为了锁定唯一版本。官网的描述如下：

“为了跨机器安装得到一致的结果，Yarn需要比你配置在package.json中的依赖列表更多的信息。Yarn需要准确存储每个安装的依赖是哪个版本。

为了做到这样，Yarn使用一个你项目根目录里的yarn.lock文件。这可以媲美其他像Bundler或Cargo这样的包管理器的lockfiles。它类似于npm的npm-shrinkwrap.json，然而他并不是有损的并且它能创建可重现的结果。”

需要注意的是，所有yarn.lock文件应该被提交到版本控制系统。yarn.lock文件是自动生成和自动修改的，我们不应该手动去修改它。