共计 2438 个字符,预计需要花费 7 分钟才能阅读完成。
作者:京东批发 陈震
在前端工程化中,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 的依赖治理。