package.json 配置完全解读( 三 ) _json

3. 脚本配置
scripts
指定项目的一些内置脚本命令，这些命令可以通过 npm run 来执行。通常包含项目开发，构建等 CI 命令，比如：
"scripts": { "build": "webpack" }
我们可以使用命令 npm run build / yarn build 来执行项目构建。
除了指定基础命令，还可以配合 pre 和 post 完成命令的前置和后续操作，比如：
"scripts": { "build": "webpack", "prebuild": "xxx", // build 执行之前的钩子 "postbuild": "xxx" // build 执行之后的钩子 }
当执行 npm run build 命令时，会按照 prebuild -> build -> postbuild 的顺序依次执行上方的命令。
但是这样的隐式逻辑很可能会造成执行工作流的混乱，所以 pnpm 和 yarn2 都已经废弃掉了这种 pre/post 自动执行的逻辑，参考 pnpm issue 讨论 https://github.com/pnpm/pnpm/issues/2891
如果需要手动开启，pnpm 项目可以设置 .npmrc enable-pre-post-scripts=true 。
enable-pre-post-scripts=true
config
config 用于设置 scripts 里的脚本在运行时的参数。比如设置 port 为 3001：
"config": { "port": "3001" }
在执行脚本时，我们可以通过 npm_package_config_port 这个变量访问到 3001 。
console.log(process.env.npm_package_config_port); // 3001 4. 依赖配置
项目可能会依赖其他包，需要在 package.json 里配置这些依赖的信息。
dependencies
运行依赖，也就是项目生产环境下需要用到的依赖。比如 react，vue，状态管理库以及组件库等。
使用 npm install xxx 或则 npm install xxx --save 时，会被自动插入到该字段中。
"dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" }
devDependencies
开发依赖，项目开发环境需要用到而运行时不需要的依赖，用于辅助开发，通常包括项目工程化工具比如 webpack，vite，eslint 等。
使用 npm install xxx -D 或者 npm install xxx --save-dev 时，会被自动插入到该字段中。
"devDependencies": { "webpack": "^5.69.0" }
peerDependencies
同伴依赖，一种特殊的依赖，不会被自动安装，通常用于表示与另一个包的依赖与兼容性关系来警示使用者。
比如我们安装 A，A 的正常使用依赖 B@2.x 版本，那么 B@2.x 就应该被列在 A 的 peerDependencies 下，表示“如果你使用我，那么你也需要安装 B，并且至少是 2.x 版本” 。
比如 React 组件库 Ant Design，它的 package.json 里 peerDependencies 为
"peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" }
表示如果你使用 Ant Design，那么你的项目也应该安装 react 和 react-dom，并且版本需要大于等于 16.9.0 。
optionalDependencies
可选依赖，顾名思义，表示依赖是可选的，它不会阻塞主功能的使用，安装或者引入失败也无妨。这类依赖如果安装失败，那么 npm 的整个安装过程也是成功的。
比如我们使用 colors 这个包来对 console.log 打印的信息进行着色来增强和区分提示，但它并不是必需的，所以可以将其加入到 optionalDependencies，并且在运行时处理引入失败的逻辑。
使用 npm install xxx -O 或者 npm install xxx --save-optional 时，依赖会被自动插入到该字段中。
"optionalDependencies": { "colors": "^1.4.0" }
peerDependenciesMeta
同伴依赖也可以使用 peerDependenciesMeta 将其指定为可选的。
"peerDependencies": { "colors": "^1.4.0" }, "peerDependenciesMeta": { "colors": { "optional": true } }
bundleDependencies
打包依赖。它的值是一个数组，在发布包时，bundleDependencies 里面的依赖都会被一起打包。
比如指定 react 和 react-dom 为打包依赖：
"bundleDependencies": [ "react", "react-dom" ]
在执行 npm pack 打包生成 tgz 压缩包中，将出现 node_modules 并包含 react 和 react-dom 。