核心是明确“是否参与最终上线运行”：dependencies存放react、axios等运行时必需包，devdependencies存放vite、eslint等仅开发阶段使用的工具，安装命令自动归类，误配会导致生产环境体积膨胀或运行报错。

在 package.json 中区分生产依赖（dependencies）和开发依赖（devDependencies），核心是明确“这个包是否参与最终上线运行”。配置本身不靠手动编辑字段，而是通过包管理器命令自动写入对应位置。

安装时自动归类到对应字段

你不需要打开 package.json 手动添加字段。执行以下命令后，包管理器会自动把条目写进 dependencies 或 devDependencies：

• 生产依赖：项目上线后仍需运行的库，比如 react、axios、lodash
npm install react axios
yarn add react axios
• 开发依赖：只在本地开发、构建或测试阶段使用，不进入生产产物，比如 vite、eslint、jest
npm install eslint --save-dev 或简写 npm install eslint -D
yarn add eslint -D

查看和验证已配置的依赖

安装完成后，打开 package.json 就能看到两个字段已更新：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

• "dependencies" 下列出的是运行时必需的包，例如：
  "react": "^18.2.0", "axios": "^1.6.0"
• "devDependencies" 下列出的是仅开发用的工具，例如：
  "vite": "^5.4.0", "eslint": "^8.57.0"

注意：这两个字段的内容都会被提交到 Git，但 CI/CD 环境通常只执行 npm ci 或 yarn install --frozen-lockfile，确保还原完全一致的依赖树。

误配的常见后果与自查建议

混淆两类依赖会导致实际问题：

• 把 eslint 放进 dependencies → 生产环境多打包一个几 MB 的检查工具，增加体积、暴露敏感路径
• 把 react 放进 devDependencies → 构建时可能正常，但线上运行报 Cannot find module 'react'
• 检查方法：
  运行 npm ls 或 yarn list ，看它出现在哪一层；
  查看打包产物（如 dist 目录）中是否意外引入了构建工具代码

其他相关依赖类型（按需了解）

除主两类外，还有几个字段用于特殊场景：

• peerDependencies：插件类包使用，声明“宿主项目必须自己装”，如 UI 组件库要求用户同时安装 react 和 react-dom
• optionalDependencies：允许安装失败也不中断流程，适合做兼容性降级（如 fsevents 仅 macOS 有效）
• bundledDependencies：把指定包直接打进发布包里，少见，多用于私有部署或离线环境

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南