package.json是每个前端项目都会有的json文件，位于项目的根目录中。很多脚手架在创建项目的时候会帮我们自动初始化好 package.json。package.json有许多配置与项目息息相关，了解他们有助于对项目的开发，上一篇文章已经完成 package.json 的基础配置的讲解，接下来开始剩余部分的学习。
今天主要介绍一些常用的配置，分为了七大类，分别是：
- 依赖配置
- 发布配置
- 系统配置
- 第三方配置
一、依赖配置
项目开发过程中会依赖其他包，需要在 package.json 里配置这些依赖的信息。
dependencies
运行依赖，也就是项目生产环境下需要用到的依赖。比如 vue，vuex以及组件库等。
使用 npm install xxx 或则 npm install xxx --save 时，会被自动插入到该字段中。
"dependencies": {
"element-plus": "^2.2.28",
"pinia": "^2.0.28",
"sass": "^1.57.1",
"vite": "^4.0.3",
"vue": "^3.2.45",
"vue-router": "^4.1.6"
},
devDependencies
开发依赖，项目开发环境需要用到而运行时不需要的依赖，用于辅助开发，通常包括项目工程化工具比如 vite，eslint 等。
使用 npm install xxx -D 或者 npm install xxx --save-dev 时，会被自动插入到该字段中。
"devDependencies": {
"cz-git": "^1.4.1",
"eslint": "^8.30.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-prettier": "^8.5.0",
"eslint-define-config": "^1.12.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.8.0",
"husky": "^8.0.0",
"less": "^4.1.3",
"lint-staged": "^13.1.0",
"postcss-html": "^1.5.0",
"postcss-less": "^6.0.0",
"prettier": "^2.8.1",
"stylelint": "^14.16.0",
"stylelint-config-html": "^1.1.0",
}
peerDependencies
同伴依赖是一种特殊的依赖，不会被自动安装，通常用于表示与另一个包的依赖与兼容性关系来警示使用者。
optionalDependencies
可选依赖，表示依赖是可选的，它不会阻塞主功能的使用，安装或者引入失败也无妨。这类依赖如果安装失败，那么 npm 的整个安装过程也是成功的。
使用 npm install xxx -O 或者 npm install xxx --save-optional 时，依赖会被自动插入到该字段中。
bundleDependencies
打包依赖。它的值是一个数组，在发布包时，bundleDependencies 里面的依赖都会被一起打包。
在执行 npm pack 打包生成 tgz 压缩包中，将出现 node_modules 并包含 react 和 react-dom。
需要注意的是，这个字段数组中的值必须是在 dependencies，devDependencies 两个里面声明过的依赖才可以。普通依赖通常从 npm registry 安装，但当你想用一个不在 npm registry 里的包，或者一个被修改过的第三方包时，打包依赖会比普通依赖更好用。
二、发布配置
主要是一些和项目发布有关的配置
private
如果是私有项目，不希望发布到公共 npm 仓库上，可以将 private 设为 true。
"private": true
publishConfig
publishConfig 就是 npm 包发布时使用的配置。
比如在安装依赖时指定了 registry 为 taobao 镜像源，但发布时希望在公网发布，就可以指定 publishConfig.registry。
"publishConfig": { "registry": "https://registry.npmjs.org/"}
三、系统配置
项目有关的系统配置，比如 node 版本或操作系统兼容性之类。但是值得注意的是这些要求只会起到提示警告的作用，即使用户的环境不符合要求，也不影响安装依赖包。
engines
一些项目由于兼容性问题会对 node 或者包管理器有特定的版本号要求，比如：要求 node 版本大于等于 12 且小于 16，同时 pnpm 版本号需要大于 7。
"engines": { "node": ">=12 <16", "pnpm": ">7"}
os
在 linux 上能正常运行的项目可能在 windows 上会出现异常，使用 os 字段可以指定项目对操作系统的兼容性要求。
"os": ["darwin", "linux"]
cpu
指定项目只能在特定的 CPU 体系上运行。
"cpu": ["x64", "ia32"]
四、第三方配置
一些第三方库或应用在进行某些内部处理时会依赖这些字段，使用它们时需要安装对应的第三方库。
types或者typings
指定 TypeScript 的类型定义的入口文件
"types": "./index.ts",
browserslist
设置项目的浏览器兼容情况。babel 和 autoprefixer 等工具会使用该配置对代码进行转换。当然你也可以使用 .browserslistrc 单文件配置。
"browserslist": [ "> 1%", "last 2 versions"]
sideEffects
显示设置某些模块具有副作用，用于 webpack 的 tree-shaking 优化。
比如在项目中整体引入 Ant Design 组件库的 css 文件。
import 'antd/dist/antd.css';
如果 Ant Design 的 package.json 里不设置 sideEffects，那么 webapck 构建打包时会认为这段代码只是引入了但并没有使用，可以 tree-shaking 剔除掉，最终导致产物缺少样式。
lint-staged
lint-staged 是用于对 git 的暂存区的文件进行操作的工具，比如可以在代码提交前执行 lint 校验，类型检查，图片优化等操作。
"lint-staged": { "src/**/*.{js,jsx,ts,tsx}": [ "eslint --fix", "git add -A" ]}
lint-staged 通常配合 husky 这样的 git-hooks 工具一起使用。git-hooks 用来定义一个钩子，这些钩子方法会在 git 工作流程中比如 pre-commit，commit-msg 时触发，可以把 lint-staged 放到这些钩子方法中。
五、结语
今天我们简单了解了 package.json 的常见配置。有了这些知识，我们可以更好的了解项目。但 package.json 里的内容远不止如此，需要我们进一步学习。
