18

node 项目中常见 dependencydevDependencypeerDependency,平时开发的时候总是遇到,但就是没细了解过它们之间的异同,今天简单深入一下,记录下来。

首先看下方的图,project-main 的 dependency 是 package-a,package-a 的 devDependency 是 package-a-1,此外,project-main 也有一个 devDependency 是 package-b:

├── project-main
    ├── package-a (dependency)
    │   └── package-a-1 (devDependency)
    └── package-b (devDependency)
// package.json
{
  "name": "project-main",
  "dependencies": {
    "package-a": "^1.0.0"
  },
  "devDependencies": {
    "package-b": "^1.0.0"
  }
}

在 project-main 下执行 npm install 之后,package-a 和 package-b 都会被安装,但 package-a-1 不会被安装,所以你在 project-main 的 node_modules 文件夹下找不到 package-c。

dependency 与 devDependency 的异同

这是 dependencydevDependency 的不同点之一。项目依赖的 package 的 devDependency 不会被安装,但自身的 devDependency 会被安装,而所有的 dependency 都会被安装。如果不想安装自身的 devDependency 就使用 npm install --production 这个指令来,这样的话 对于 project-main 来说,它的 devDependency 也不会被安装了。

所以,在开发一个 node 包时,要注意区分什么时候用 dependencies 什么时候用 devDependencies,一般做测试、打包、ES6转ES5此类的工作所依赖的库就使用 devDependencies,而正常功能所依赖的包就使用 dependencies 声明。

> npm install react --save  // 做为 dependencies 安装
> npm install eslint --save-dev // 做为 devDependencies 安装

peerDependencies

还是拿上面的例子来说,假如 project-main 依赖的 package-a 的 package.json 中声明了 peerDependency 是 package-apeer@^1.0.0,而 project-main 中没有任何 package-apeer 的配置,此时在 project-main 下使用 npm3 执行 npm install,控制台就会告警 UNMET PEER DEPENDENCY package-apeer@^1.0.0,意思就是说使用到 package-a 的项目必须安装同时安装 package-apeer@^1.0.0 ,否则程序就可能会有异常,而在 npm@1npm@2 下,就不会报错而是自动把 package-apeer@^1.0.0 安装上,因为很多用户反应这样很困惑,我没声明这个包,你为什么要给我安装呢?所以在 npm@3 中这个 peerDependencies 如果没装就变成了控制台告警。

其它的 dependency

其实 node 还有另外两种 dependency 配置。

bundleDependencies

它还有一个别名,bundledDependencies,这个配置的作用如下:

对于下面这个包 package-a

{
  "name": "package-a",
  "dependencies": {
    "react": "^15.0.0",
    "core-js": "^2.0.0",
    "lodash": "^4.0.0"
  },
  "bundleDependencies": [
    "react",
    "core-js"
  ]
}

在你的项目中使用 npm@3 安装 package-a 之后,项目的 node_modules 的文件结构:

├── node_modules
    ├── package-a
    │   └── react
    │   └── core-js
    └── loadsh

bundleDependencies 的作用就是在用户安装了 package-a 之后,将 package-a 所声明的依赖包汇总到 package-a 自身的 node_modules 下,便于用户管理,如果 package-a 中没有配置 bundleDepencies,在安装了 package-a 的项目下 node_modules 就会长这样:

├── node_modules
    ├── package-a
    ├── react
    ├── core-js
    └── loadsh

optionalDependencies

如果你的node项目依赖了一个包 package-optional,假如这个 package-optional 没有安装,你仍然想让程序正常执行,这个时候 optionalDependencies 就非常适合你这个需求,optionalDependencies 跟 dependencies 声明方式完全一致,而且一个依赖如果同时在 dependencies 和 optionalDependencies 中声明,option 还会覆盖 dependency 的声明。如果 package-optional 这个包是可选的,在代码中就可以这样写了:

try {
    var pkgOpt = require('package-optional');
} catch (e) {
    pkgOpt = null;
}
console.log(pkgOpt);

结语

node package 的依赖管理在如今的前端工程化时代背景下变得尤为重要,构建优雅可维护的 node_modules 结构是值得探讨的一个话题,希望今天本文能对你有所帮助和启发。


叔叔张
1.4k 声望73 粉丝

可文艺、可二逼、不识好歹的懒前端。