讯享网

 <p id="1O5UHKQA">来源 | OSCHINA 社区</p><p id="1O5UHKQB">作者 | 京东云开发者—京东零售 陈震</p><p id="1O5UHKQC">原文链接：https://my.oschina.net/u//blog/</p><p id="1O5UHKQD">在前端工程化中，JavaScript 依赖包管理是非常重要的一环。依赖包通常是项目所依赖的第三方库、工具和框架等资源，它们能够帮助我们减少重复开发、提高效率并且确保项目可以正确的运行。</p><p id="1O5UHKQE">目前比较常见的前端包管理器有 npm 和 Yarn，npm 是 Node.js 自带的包管理器，它可以安装、共享和分发 node.js 模块。最近 pnpm 也挺火的，通过并行下载和安装依赖项，在执行安装、更新、删除等操作时也更快。</p><p id="1O5UHKQF">但无论使用哪个包管理器，都要通过 package.json 文件的版本控制功能，保证在不同开发环境中的一致性。那么，package.json 是如何进行依赖包管理的呢？我们来一起深入了解一下 package.json 的配置方式。</p><p><strong>一、分类管理</strong></p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0425%2Fe8e49f1bj00rto4az000td200u0009jg00id005t.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="1O5UHKQH">根据 package.json 规范，依赖包被大致分为以下几种：dependencies、devDependencies、optionalDependencies、peerDependencies 和 bundledDependencies 总共 5 种。dependencies 和 devDependencies 这两项是我们使用较为频繁的。</p><p><strong>1、dependencies</strong></p><p id="1O5UHKQI">工程在生产环境下也需要使用的依赖，例如 react、antd 等，使用 npm 安装插件时，会默认写入 dependencies，也可以使用 - P 或 --save-prod 后缀。</p><p><strong>2、devDependencies</strong></p><p id="1O5UHKQJ">工程只有开发环境需要，生产环境不需要的依赖，例如 eslint、babel 等，使用 - D 或 --save-dev 来写入 devDependencies。</p><p><strong>3、optionalDependencies</strong></p><p id="1O5UHKQK">顾名思义，依赖是可选的，它们只有在运行时需要使用某些功能时才会被引入。通常用于实现某些可选的功能或优化。例如，一个包可能依赖于某个库来实现某种高级功能，但是这个库在某些环境下不存在或不可用。在这种情况下，可以将该库声明为可选依赖项，并在代码中检查该依赖项是否存在，然后根据情况来决定是否使用该高级功能。使用这个功能的工程比较少，使用 - O 或 --save-optional 来写入 optionalDependencies。</p><p><strong>4、peerDependencies</strong></p><p id="1O5UHKQL">工程需要和这个依赖配套使用，一般用于解决插件依赖的核心库的版本和主项目依赖的核心库的版本不一致的问题，常见于开发配套插件。例如 vuex@4.1.0 声明了：</p><p></p><p></p><p id="1O5UHKQO">表明 vuex@4.1.0 需要和 vue@^ 3.2.0 一起安装和使用，否则可能会出现异常。使用 - O 或 --save-optional 来写入 optionalDependencies。</p><p><strong>5、bundledDependencies</strong></p><p id="1O5UHKQP">工程依赖于某些特定的依赖项，并且希望在运行时不必再次下载它们，则可以使用该选项。npm pack 会将这些依赖一同放入生成的包中，并且在 npm install 时本工程，这些依赖项也会被一同安装。使用 - B 或 --save-bundle 来写入 bundledDependencies。</p><p id="1O5UHK">看到这里你可能会有点疑问，为什么 npm 没有提供类似 --save-peer 的指令来写入 peerDependencies 呢？原因是 peerDependencies 暗示本工程将会被其他主模块使用，但是主模块本身并不需要在项目代码中显式使用。因此官方没有支持这一指令。</p><p><strong>二、版本管理</strong></p><p id="1O5UHKQR">一般情况下，以上依赖配置（除了 bundledDependencies）都需要指定依赖的版本号，版本号遵循 semver 语义化版本规范（Semantic Versioning）命名规则，可以用下图表示，如 2.1.0、3.1.4-beta.2 等。<br/><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0425%2F4b6de649j00rto4b0000jd200u00062g00id003p.jpg&thumbnail=660x&quality=80&type=jpg"/></p><p><ul><li id="1O5UHKRT"></p><p id="1O5UHKQS">当发生不兼容的 API 修改时，更新 major 位</p><p></li><li id="1O5UHKRU"></p><p id="1O5UHKQT">当做了向下兼容的功能性新增时，更新 minor 位</p><p></li><li id="1O5UHKRV"></p><p id="1O5UHKQU">当做了向下兼容的问题修正时，更新 patch 位</p><p></li></ul></p><p id="1O5UHKQV">可选的 - tags 即先行版本号，可以作为发布正式版之前的版本，格式是在修订版本号后面加上一个连接号（-），再加上一连串以点（.）分割的标识符，标识符可以由英文、数字和连接号（[0-9A-Za-z-]）组成。</p><p id="1O5UHKR0">在 npm 的依赖的规则中，还有等符号来描述适用的版本范围；</p><p><ul><li id="1O5UHKS0"></p><p id="1O5UHKR1">^ ：表示只锁定 major，不小于指定版本号的版本范围。例如，代表的版本范围。</p><p></li><li id="1O5UHKS1"></p><p id="1O5UHKR2">~ ：表示锁定 major 和 minor，不小于指定版本号的版本号。例如，代表的版本范围。</p><p></li><li id="1O5UHKS2"></p><p id="1O5UHKR3">x、X、*：表示通配符。例如，也代表的版本范围。</p><p></li></ul></p><p id="1O5UHKR4">默认情况下，若指定了一个版本范围，npm 会在范围内安装最新版本的依赖。当使用 npm install XX 时，会安装当前最新版本，并在版本号前默认加上 ^ 符号。因此在安装运行老项目时，很容易出现安装依赖后，项目启动报错的情况，原因就是某些依赖没有做到很好的向下兼容，导致重新安装的版本太高造成兼容性错误，此时需要定位错误依赖并回退版本。</p><p><strong>三、npm install 加载机制</strong></p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0425%2F40d6c197j00rto4b1002wd200u000i4g00id00b3.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="1O5UHKR6">npm install 核心流程大致分为以下 5 步：</p><p></p><p></p><p id="1O5UHKR9">install 的过程速度也和每一个步骤息息相关：<br/>（1）共享工程 package-lock.json，可以避免向 registry 查询的步骤，并且保证不同环境下安装包的一致性。<br/>（2）使用下载速度快的 registry 镜像（例如 jd 镜像）。<br/>（3）预先进行依赖关系分析构建依赖关系，然后最后再并行下载（例如 yarn）。</p><p id="1O5UHKRA">希望以上的介绍能够帮助你更好的理解 npm 的依赖管理。</p><p id="1O5UHKRP">2023 年 5 月 27-28 日，GOTC 2023 全球开源技术峰会将在上海张江科学会堂隆重举行。</p><p id="1O5UHKRQ">为期 2 天的开源行业盛会，将以行业展览、主题发言、特别论坛、分论坛、快闪演讲的形式来诠释此次大会主题 ——“Open Source, Into the Future”。与会者将一起探讨元宇宙、3D 与游戏、eBPF、Web3.0、区块链等热门技术主题，以及 OSPO、汽车软件、AIGC、开源教育培训、云原生、信创等热门话题，探讨开源未来，助力开源发展。</p>