了解package.json的配置（1）

臧小半
107 阅读4分钟

前端项目中，都有package.json文件，它是项目的配置文件，常见的配置有配置项目启动、打包命令，声明依赖包等，这篇文章是探讨一下其中各项配置的含义

{
  "name": "demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

这个是我创建的一个全新的项目

一、必须属性

  1. name 就是项目的名称，它是一个字符串，应当尽可能的简短、语义化。名称不能和其他模块的名称重复，可以使用npm view命令查询模块明是否重复，如果不重复就会提示404。如果出现重复，在上传npm包时就会失败。
  2. version 字段表示该项目包的版本号，它是一个字符串。在每次项目改动后，即将发布时，都要同步的去更改项目的版本号格式为：主版本号.次版本号.修订号，通常情况下，修改主版本号是做了大的功能性的改动，修改次版本号是新增了新功能，修改修订号就是修复了一些bug，可以通过以下的命令来查看。
// 查看最新版本  
npm view react version  
// 查看所有版本  
npm view react versions

二、描述信息

  1. description 字段用来描述这个项目包，它是一个字符串，可以让人在 npm 的搜索中发现我们的项目包。
  2. keywords 字段是一个字符串数组，表示这个项目包的关键词。和description一样，都是用来增加项目包的曝光率
  3. author 表示该项目包的作者，它有两种形式，一种是字符串格式，另外一种是对象
//第一种

"author": "xxxxxx <xxxxxxxxx@qq.com>",

//第二种

"author": {  
  "name" : "xxxx",  
  "email" : "xxxxx@qq.com",  
  "url" : "https://xxxxxxxxx"  
}

4.contributors 贡献者，一般写项目的成员，该字段是一个数组

"contributors": [  
  "xxxx <xxxxx@qq.com> (https://xxxxxxxx)",  
  "xxxx <xxxxx@qq.com> (https://xxxxxxxx)"  
 ]

5.homepage 项目的主页地址了，它是一个字符串

6.repository 代码的存放仓库地址，通常有两种书写形式。第一种是字符串形式，另一种是对象

//第一种

"repository": "https://xxxx/xxxx.git"

//第二种

"repository": {  
  "type": "git",  
  "url": "https://xxxx/xxxx.gi"  
}
  1. bugs 项目提交问题的地址，该字段是一个对象，可以添加一个提交问题的地址和反馈的邮箱
"bugs": {   
  "url" : "https://xxxxxx/issues",  
  "email" : "xxxxx@qq.com"  
}

三、依赖配置

1.dependencies 字段中声明的是项目的生产环境中所必须的依赖包。当使用 npm 或 yarn 安装npm包时，该npm包会被自动插入到此配置项中

2.devDependencies声明的是开发阶段需要的依赖包，如Webpack、Eslint、Babel等，用于辅助开发。它们不同于 dependencies，因为它们只需安装在开发设备上，而无需在生产环境中运行代码。当打包上线时并不需要这些包，所以可以把这些依赖添加到 devDependencies 中，这些依赖依然会在本地指定 npm install 时被安装和管理，但是不会被安装到生产环境中

npm install --save-dev xxxxx

yarn add --dev xxxx

3.peerDependencies 字段就是用来供插件指定其所需要的主工具的版本，防止不同用户在使用我们的项目出现依赖包版本不同问题

"peerDependencies": {  
   "依赖包名称": "版本号"  
}

4.optionalDependencies 如果需要在找不到包或者安装包失败时，npm仍然能够继续运行，则可以将该包放在optionalDependencies对象中，optionalDependencies对象中的包会覆盖dependencies中同名的包，所以只需在一个地方进行设置即可

5.bundledDependencies 配置项是一个数组，数组里可以指定一些模块，这些模块将在这个包发布时被一起打包。需要注意，这个字段数组中的值必须是在dependencies, devDependencies两个里面声明过的包才行。

6.engins 当我们维护一些旧项目时，可能对npm包的版本或者Node版本有特殊要求，如果不满足条件就可能无法将项目跑起来。为了让项目开箱即用，可以在engines字段中说明具体的版本号

"engines": {  
 "node": ">=8.10.3 <12.13.0",  
  "npm": ">=6.9.0"  
}

本篇文章就分享这么多，剩余配置部分会在了解package.json的配置（2）中分享

avatar
文章
阅读
粉丝