发布时间：2021年9月7日
这几天来到新的团队后，在了解项目的时候发现项目的 package.json 文件中，依赖关系很乱，像 jest/webpack 这些包被放到了项目的 dependencies 中，而 redux 相关的竟然被放到了 devDependencies 里面去，整个人都凌乱了。
在我学习前端的时候就看过相关的依赖管理的文章，趁着整理项目依赖关系的时候也对依赖有了更多的理解。
dependencies 是我们项目中的必须依赖，即项目运行必须依赖这些库，类似于 React 项目中的 react/react-dom/react-router，可能还包括 redux/redux-saga/redux-thunk 这些内容。
devDependencies 是项目的开发依赖，顾名思义只需要在开发的时候需要使用的包，比如我们常用的 hot-module-reload 、webpack及其相关的 loader/plugin 等，只是在开发、打包环节需要用到的包，在项目实际运行中不需要的都属于这个范畴
这两者的区别体现在开发第三方库的情况下，在某些情况下我们可能需要独立开发一个包供我们的页面使用来满足业务需求，这时候我们就必须理清楚这两种依赖的关系。
在项目中引用第三方包时，会同时把第三方包中指定的 dependencies 下载到包的 node_modules 中，加入我们引用了一个 react 组件，那么我们的目录结构可能是这样
node_modules
|-- package-a
|-- node_modules
|-- react@17.0.0
|-- react@17.1.0上面目录代表着，我们项目中自己依赖了 [email protected] 版本依赖，而引入的 package-a 可能还在用 [email protected] 这个版本的依赖。
当同一个依赖存在不同的版本，如果我们进行打包的话，会把两个版本的内容都打入最终的项目文件中，就会增加文件最终的大小。
如果我们使用的是
yarn来管理依赖的，且版本依赖中都是以^开头（可升级小版本），那么最终只会存在一个[email protected]这个版本的包。
在政采云的时候我们在项目管理的时候也遇到了这个问题，在我们将后台切换页面改为不刷新切换后，跨项目之间切换时经常会因为项目依赖的内部脚手架版本的不同导致部分组件在展示上存在冲突的问题，后续通过推进项目将依赖改为允许小版本升级解决这个问题。
1. 如果已经把 jest 这些包放在 dependencies 中，那么打包时会增大我项目的提及吗
答：并不会，webpack 这些工具在打包时并不会去查看你的依赖关系，它只会沿着你设定的入口按照我们的配置执行对应的 loader/plugin 来处理文件，并生成最后的项目文件，所以那么在项目代码中没到的包并不会打入我们最终的文件中。
peerDependencies 会把库的选择权交给使用方，比如 package-a 中在 peerDependencies 指定 react-dom 版本应该大于等于 16.7.0，那么如果我们本地项目中已经安装了 [email protected]，此时 package-a 的 react-dom 就不会被安装
比较重要的依赖就这些，其他还有 bundledDependencies/optionalDependencies 等这些不常用的依赖，就不再多说，基本用不到，有需要的可以自行了解一下。