前端开发中，我们都离不开package.json，但很多人和它的关系也仅限于“点头之交”：知道它有 scripts 用来跑命令，有 dependencies 和 devDependencies 管理依赖，觉得其他的配置也没什么用，用不到。但如果用好package.json，对于开发效率、项目维护、代码质量提升等都有很大的帮助。
为了方便以后查阅，我总结了package.json的常用配置，希望对大家有所帮助。有错误之处，欢迎指正。
废话少说，直接上干货。
基础信息
name
项目名称，标识NPM包的名称，必须唯一，搜索和安装时使用
version
版本号，推荐规范为 major.minor.patch，如1.0.0
- patch为补丁版本，修复bug
- minor为小版本，表示新增功能，向下兼容
- major为重大版本，表示不向下兼容
title
项目标题
description
项目描述
keywords
关键字，用于优化NPM包的搜索
license
开源协议，主要是为了明确软件的使用、修改、分发等行为的规则和限制，防止版权问题。
- MIT：允许自由使用、修改、复制、分发，但必须保留原作者的版权声明
- GPL：强制开源，使用或修改代码的衍生品也必须开源。
- Apache：允许闭源使用，要求注明改动、保留原版权声明，并附带专利授权，同时保护贡献者免于责任。
repository
项目的源码仓库地址url和类型type
bugs
项目的问题反馈地址url
homepage
项目主页地址
funding
项目赞助地址url和类型type
private
是否私有，true表示私有，无法发布到NPM
packageManager
指定包管理工具及版本，如npm、pnpm@9.5.0等，仅提示，不强制使用
workspaces：指定工作区，用于管理多个包
- 统一安装依赖，共享根目录的mode_modules），统一发布包等
- 跨包引用：直接通过workspace名称引用其他包，无需发布到远程仓库
- 简化脚本管理：在根目录的package.json中定义脚本，可以在工作区中直接使用
- 应用到所有工作区：
npm run <script> --workspaces - 应用到指定工作区：
npm run <script> --workspace=<workspace-name>
- 应用到所有工作区：
文件和入口
main
项目的入口文件，默认index.js，当用commonjs的方式引入包时，默认会加载该文件
module
ES模块的入口文件，默认index.js，当使用ES模块方式引入包时，默认会加载该文件，没有则会加载main字段指定的文件，但可能导致tree-shaking失效，并在仅支持ESM的环境中报错
unpkg
unpkg是一个CDN服务，专门为开源的NPM包提供静态资源的在线访问，unpkg字段指定unpkg地址访问的代码文件，默认index.js。当访问https://unpkg.com/<package-name>时，会加载unpkg指定的文件，完整路径为https://unpkg.com/<package-name>@<version>/<file-path>
typings
TypeScript类型声明文件，默认index.d.ts。当前包被引用时，Typescript编译器会根据该包的typings字段找到类型声明文件，用于该包的类型检查。
files
指定需要包含在发布包中的文件。减少不必要的文件，减少包体积。如["dist", "lib", "*.d.ts"]
兼容
browserslist
指定项目支持的浏览器版本，用于babel、eslint等工具的代码转译，兼容不同浏览器。
> 0.5%：全球超过0.5%的浏览器用户last 2 versions：最新两个版本的浏览器Firefox ESR：Firefox的长期支持版本not dead：排除已经停止维护的浏览器
engine
指定运行项目所需的Node.js、npm或pnpm的版本范围
x或*: 表示任意版本14.x: 表示14.x.x版本14.0.0: 表示特定版本，14.0.0版本>=: 表示大于等于某版本，如>=12.0.0>: 表示大于某版本，如<12.0.0^: 表示兼容大版本，如^12.0.0支持12.x.x版本~: 表示兼容小版本，如~12.0.0支持12.0.x版本-: 表示范围，如12.0.0-12.0.5表示12.0.0到12.0.5版本||: 表示或，如>=12.0.0 || <12.0.5表示大于等于12.0.0或者小于12.0.5版本
脚本与依赖
scripts
定义可以通过 npm run <script> 执行的命令。
dependencies
项目依赖，生产环境需要用到的包。
devDependencies
开发环境依赖，仅在开发时需要用到的包。
peerDependencies
指定当前包作为另一个包的依赖时，需要安装的包的版本范围。peerDependencies不会被当前包安装，因为这些依赖通常由使用该包的项目（而非包本身）来管理。
配置
config
用于存储自定义的配置数据，主要用于命令脚本。
通过$npm_package_config_<key>的方式在脚本中使用配置数据，如node app.js --port=$npm_package_config_port
{
"config": {
"port": 3000,
// 比较常见的配置，项目中使用了husky时，husky会调用该配置校验代码提交信息
"commitizen": {
"path": "node_modules/cz-git",
"czConfig": "./scripts/commitizen.js"
}
}
}
sideEffects
用于tree-shaking优化，用来标记哪些文件或模块没有副作用，可以安全地移除。
- 默认为true，表示所有模块都有副作用，即不进行tree-shaking优化。
- 如果设置为false，表示所有模块都没有副作用，可以进行tree-shaking优化。
- 如果设置为数组，表示数组中的模块有副作用，其他文件可以进行tree-shaking优化。如
["site/*", "*.vue", "*.md", "dist/*", "*.css"]
pnpm
指定pnpm的配置，有兴趣可前往查看更多：pnpm.io/zh/package_…
{
"pnpm": {
// 强制依赖树中的指定包使用特定版本，无视其他包/项目的版本要求
"overrides": {
"react": "18.0.0"
},
// 避免和其他包同时使用了相同的依赖时，依赖版本冲突的问题
"peerDependencyRules": {
// 忽略缺失的 peerDependencies
"ignoreMissing": ["vite", "react"],
// 如果引用该包的项目安装的依赖版本与该包指定的版本不一致，则抛出错误
"allowedVersions": {
"react": "18.0.0"
},
// 忽略指定列表中包的 peerDependencies 不匹配问题
"allowAny": ["@babel/*", "eslint"]
},
// 使用补丁修复依赖问题，如某个依赖的某个版本存在bug，可以通过补丁文件修复
"patchedDependencies": {
"react@18.0.0": "patch/react-18.0.0.patch"
}
}
}
web-types
用于增强 IDE 智能提示和补全能力的字段，为开发提供更好的代码提示，减少阅读文档的时间，提升开发效率。可以通过工具生成web-types.json文件，然后将其添加到package.json中。有兴趣可前去了解 github.com/JetBrains/w…
// web-types.json案例
{
"framework": "vue",
"name": "my-vue-library",
"version": "1.0.0",
"components": [
{
"name": "MyButton",
"description": "A customizable button component.",
"props": [
{
"name": "type",
"type": "string",
"default": "primary",
"description": "The button type."
},
{
"name": "disabled",
"type": "boolean",
"description": "Disables the button."
}
],
"events": [
{
"name": "click",
"description": "Fires when the button is clicked."
}
]
}
],
"directives": [
{
"name": "v-focus",
"description": "A directive to focus an element."
}
]
}
全文完，觉得有用的话记得点个赞哦～
