高级前端
前端工程化
【Q508】dependencies 与 devDependencies 有何区别

dependencies 与 devDependencies 有何区别

Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 521 (opens in a new tab)

Author 回答者: shfshanyue (opens in a new tab)

对于业务代码而讲,它俩区别不大

当进行业务开发时,严格区分 dependenciesdevDependencies 并无必要,实际上,大部分业务对二者也并无严格区别。

当打包时,依靠的是 Webpack/Rollup 对代码进行模块依赖分析,与该模块是否在 dep/devDep 并无关系,只要在 node_modules 上能够找到该 Package 即可。

以至于在 CI 中 npm i --production 可加快包安装速度也无必要,因为在 CI 中仍需要 lint、test、build 等。

对于库 (Package) 开发而言,是有严格区分的

  • dependencies: 在生产环境中使用
  • devDependencies: 在开发环境中使用,如 webpack/babel/eslint 等

当在项目中安装一个依赖的 Package 时,该依赖的 dependencies 也会安装到项目中,即被下载到 node_modules 目录中。但是 devDependencies 不会

因此当我们开发 Package 时,需要注意到我们所引用的 dependencies 会被我们的使用者一并下载,而 devDependencies 不会。

一些 Package 宣称自己是 zero dependencies,一般就是指不依赖任何 dependencies,如 highlight (opens in a new tab)

JavaScript syntax highlighter with language auto-detection and zero dependencies.

Author 回答者: Asarua (opens in a new tab)

生产依赖会随着包一起下载,开发依赖不会,npm i --production可以只下载生产依赖

Author 回答者: haotie1990 (opens in a new tab)

dependencies、devDependencies

dependencies字段指定了项目运行所依赖的模块,devDependencies指定项目开发所需要的模块。

当你在软件包目录下执行npm install命令时,dependenciesdevDependencies指定的三方软件包均会在node_modules目录下安装,若执行npm install --production命令,则不会安装devDependecies指定的三方软件包。但当软件包作为三方软件包被安装时(npm install $package),则dependencies指定的软件包会被安装,devDependencies指定指定的软件包不会被安装。

了解dependenciesdevDependencies的作用后,我们在开发软件包时,哪些依赖应该放入dependencies,哪些依赖应该放入devDependencies中。

首先我们要明确放入dependencies中的依赖软件包,是我们的项目在生产环境下运行时必须依赖的软件包,其的部分功能或全部功能通常会被打包到我们工程发布的bundles中。而放入devDependencies中软件包是我们的工程在开发时依赖的软件包,通常情况下以下的依赖会被放入devDenpencies中:

  • 格式化代码或错误检查类软件包:esLintprettier

  • 打包工具及其插件:webpack, gulp, parceljs

  • babel及其的插件

  • 单元测试类:enzyme, jest

Author 回答者: haotie1990 (opens in a new tab)

peerDependencies的目的是提示宿主环境去安装满足插件peerDependencies所指定依赖的包,然后在插件import或者require所依赖的包的时候,永远都是引用宿主环境统一安装的npm包,最终解决插件与所依赖包不一致的问题。

知道peerDependencies的作用后,什么样的软件包依赖需要放入?

当我们开发的工程将作为第三方软件包发布的时候,我们就会用到peerDependencies。当我们发布软件包作为三方依赖运行时,并且我们确认或猜测到依赖我们的软件包的工程也会安装和我们软件包相同的三方依赖,我们就可以将这些依赖放入peerDependencies中。