作者：京东批发 陈震

在前端工程化中，JavaScript 依赖包治理是十分重要的一环。依赖包通常是我的项目所依赖的第三方库、工具和框架等资源，它们可能帮忙咱们缩小反复开发、提高效率并且确保我的项目能够正确的运行。

目前比拟常见的前端包管理器有 npm 和 Yarn，npm 是 Node.js 自带的包管理器，它能够装置、共享和散发 node.js 模块。最近pnpm也挺火的，通过并行下载和装置依赖项，在执行装置、更新、删除等操作时也更快。

但无论应用哪个包管理器，都要通过 package.json 文件的版本控制性能，保障在不同开发环境中的一致性。那么，package.json是如何进行依赖包治理的呢？咱们来一起深刻理解一下package.json的配置形式。

一、分类管理


依据package.json标准，依赖包被大抵分为以下几种：dependencies、devDependencies、optionalDependencies、peerDependencies和bundledDependencies总共5种。dependencies和devDependencies这两项是咱们应用较为频繁的。

1、dependencies

工程在生产环境下也须要应用的依赖，例如react、antd等，应用npm装置插件时，会默认写入dependencies，也能够应用-P或--save-prod后缀。

2、devDependencies

工程只有开发环境须要，生产环境不须要的依赖，例如eslint、babel等，应用-D或--save-dev来写入devDependencies。

3、optionalDependencies

顾名思义，依赖是可选的，它们只有在运行时须要应用某些性能时才会被引入。通常用于实现某些可选的性能或优化。例如，一个包可能依赖于某个库来实现某种高级性能，然而这个库在某些环境下不存在或不可用。在这种状况下，能够将该库申明为可选依赖项，并在代码中查看该依赖项是否存在，而后依据状况来决定是否应用该高级性能。应用这个性能的工程比拟少，应用-O或--save-optional来写入optionalDependencies。

4、peerDependencies

工程须要和这个依赖配套应用，个别用于解决插件依赖的外围库的版本和主我的项目依赖的外围库的版本不统一的问题，常见于开发配套插件。例如vuex@4.1.0申明了：

"peerDependencies": {   "vue": "^3.2.0"}

表明vuex@4.1.0须要和vue@^ 3.2.0一起装置和应用，否则可能会出现异常。应用-O或--save-optional来写入optionalDependencies。

5、bundledDependencies

工程依赖于某些特定的依赖项，并且心愿在运行时不用再次下载它们，则能够应用该选项。npm pack会将这些依赖一起放入生成的包中，并且在npm install时本工程，这些依赖项也会被一起装置。应用-B或--save-bundle来写入bundledDependencies。

看到这里你可能会有点疑难，为什么npm没有提供相似--save-peer的指令来写入peerDependencies呢？起因是peerDependencies暗示本工程将会被其余主模块应用，然而主模块自身并不需要在我的项目代码中显式应用。因而官网没有反对这一指令。

二、版本治理

个别状况下，以上依赖配置（除了bundledDependencies）都须要指定依赖的版本号，版本号遵循semver语义化版本标准（Semantic Versioning）命名规定，能够用下图示意，如2.1.0、3.1.4-beta.2等。

  • 当产生不兼容的 API 批改时，更新major位
  • 当做了向下兼容的功能性新增时，更新minor位
  • 当做了向下兼容的问题修改时，更新patch位

可选的-tags即后行版本号，能够作为公布正式版之前的版本，格局是在订正版本号前面加上一个连接号（-），再加上一连串以点（.）宰割的标识符，标识符能够由英文、数字和连接号（[0-9A-Za-z-]）组成。

在 npm 的依赖的规定中，还有~、>、<、=、>=、<=、-、||、x、X、*等符号来形容实用的版本范畴；

  • ^ ：示意只锁定major，不小于指定版本号的版本范畴。例如^1.1.0，代表>=1.1.0 <2.0.0的版本范畴。
  • ~ ：示意锁定major和minor，不小于指定版本号的版本号。例如~1.1.0，代表>=1.1.0 <1.2.0的版本范畴。
  • x、X、*：示意通配符。例如1.1.x，也代表>=1.1.0 <1.2.0的版本范畴。

默认状况下，若指定了一个版本范畴，npm会在范畴内装置最新版本的依赖。当应用 npm install XX 时，会装置以后最新版本，并在版本号前默认加上 ^ 符号。因而在装置运行老我的项目时，很容易呈现装置依赖后，我的项目启动报错的状况，起因就是某些依赖没有做到很好的向下兼容，导致重新安装的版本太高造成兼容性谬误，此时须要定位谬误依赖并回退版本。

三、npm install加载机制

npm install外围流程大抵分为以下5步：

1、npm 向 registry 查问依赖压缩包的网址。2、下载压缩包，寄存在cache目录，供下次装置时应用。3、解压压缩包到以后我的项目的node_modules目录。4、把所有装置的包信息写入package-lock.json，供下次装置时应用。5、持续解决依赖的依赖。

install的过程速度也和每一个步骤非亲非故：
（1）共享工程package-lock.json，能够防止向registry查问的步骤，并且保障不同环境下安装包的一致性。
（2）应用下载速度快的registry镜像（例如jd镜像）。
（3）事后进行依赖关系剖析构建依赖关系，而后最初再并行下载（例如yarn）。

心愿以上的介绍可能帮忙你更好的了解npm的依赖治理。