日常开发中，我们常见到各种 dependency，今日得空整理了一下
dependency 与 devDependency
几乎在每个应用中我们都会见到 dependency 和 devDependency 的身影。dependency 定义的是代码所需要的依赖包，而 devDependency 给定的是编译/测试等开发时所需依赖包。举个例子：
{
“name”: “project”,
“script”: {
// 代码打包
“build”: “./node_modules/.bin/webpack …”
},
“dependency”: {
“react”: “^16.6.3”,
…
},
“devDependency”: {
“webpack”: “4.19.1”,
“url-loader”: “1.1.1”,
…
}
}
理想情况下，当运行 npm run build 后应该只包含 react 相关代码而不包括 devDependency 中的无用代码。当然, 在这里 dependency 和 devDependency 只是一个规范, 最终生成什么代码取决于你引入了什么，比如 improt ‘url-loader’ 会把 url-loader 囊括进你的生产代码，不论它是否定义在 dependency 中。
现在考虑另外一个场景，我们开发了一个 npm（package-a）包，我们希望所有依赖 package- a 的应用都能有效的运行。这时 dependency 和 devDependency 并不仅仅是一个我们可以随意遵守的规范而已，因为项目依赖的 devDependency 不会被安装。比如：
├── project
├── package-a (dependency)
│ └── package-a-1 (devDependency)
└── package-b (devDependency)
在 project 下执行 npm install 之后，package- a 和 package-b 都会被安装，但 package-a- 1 不会被安装，所以你在 project 的 node_modules 文件夹下找不到 package-c。
综上所述，在开发一个应用时，我们应该把生产需要的依赖放在 dependency 中，把单元测试/编译/打包等这些生产无关依赖放在 devDependency 中
peerDependencies
我们以 babel-loader 为例子，运行 npm install babel-loader - D 时，控制台会有两条警告：
npm WARN babel-loader@8.0.4 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN babel-loader@8.0.4 requires a peer of webpack@>=2 but none is installed. You must install peer dependencies yourself.
提示 babel-loader 需要依赖 @babel/core@^7.0.0 和 webpack@>=2。这是因为 peerDependencies 指定了当前包需要安装的依赖:
“peerDependencies”: {
“@babel/core”: “^7.0.0”,
“webpack”: “>=2”
}
那应该在什么情况下使用呢？
一般的，如果我们需要开发针对于某个库的插件而又不需要在代码中引用这个库的时候。就比如 babel-loader 是 webpack 的一个插件，但代码中又无需引用 webpack，为了保证插件能够运行在 webpack 环境中，故而使用了 peerDependencies。
bundledDependencies
又可称为：bundleDependencies
再以一个例子阐述：
{
“name”: “project”,
“dependencies”: {
“react”: “^16.6.3”,
“react-dom”: “^16.6.3”
},
“bundleDependencies”: [
“react”,
“react-dom”
],
“version”: “1.0.0”
}
当我们需要使用 npm pack 打包这个应用时，其最终生成的文件结构如下：
project-1.0.0.tgz
├── node_modules
| └── react
| └── react-dom
└── package.json
如果不使用 bundleDependencies，文件结构如下：
project-1.0.0.tgz
├── project-1.0.0.tgz
| └── node_modules
| └── react
| └── react-dom
└── package.json
so,bundleDependencies 的作用是将指定依赖归置于当前项目下，这样你就可以快速的运行你 pack 后的项目。
optionalDependencies
如果你的应用中依赖了 optional-a，而这个依赖又是可有可无的，也就是说如果 optional- a 找不到或者安装失败，你希望程序依旧运行。这时候 optionalDependencies 就能很好的满足你的要求。
注意：optionalDependencies 会覆盖 dependencies 中的同名包
try {
let optionalA = require(‘optional-a’);
} catch (er) {
optionalA = null
}
参考
What’s the difference between dependencies, devDependencies and peerDependencies in npm package.json file?
Peer Dependencies
Package.json