一、什么是 @fds/renovate-config
@fds/renovate-config 是一个开源的 npm 包,它是由前端团队所开发的 renovate 配置文件。renovate 是一个基于 GitHub 平台的自动升级工具。使用 renovate 工具,可以实现依赖自动升级,为你的项目节省时间和精力。
此 npm 包提供了构建在团队最佳实践基础上的 renovate 配置文件和 TypeScript 类型定义,可直接应用于项目中。
二、使用 @fds/renovate-config
1. 安装 @fds/renovate-config
在项目根目录下,使用以下命令安装 @fds/renovate-config
npm install --save-dev @fds/renovate-config
2. 引用 @fds/renovate-config
在项目根目录下新增 renovate.json
文件,并将以下内容复制进去。
-- -------------------- ---- ------- - ---------- --------- -------------- ------------- --------------- - - ------------- ---------- -------------- --------- -------- - - -
如果你已经有 renovate.json
,可以在该文件中引用:
{ "extends": ["@fds/renovate-config"], ... }
在 package.json
文件中,新增 renovate
字段并将以下内容复制进去。
-- -------------------- ---- ------- - ----------- - ---------- --------- -------------- ------------- --------------- - - ------------- ---------- -------------- --------- -------- - - -- --- -
如果你的 renovate
字段已经存在,可以将 "extends": ["@fds"]
配置添加到现有配置中。
3. 配置文件详解
extends
: 继承自 @fds/renovate-config 的配置。ignorePaths
: 指定 renovate 工具忽略的路径。packageRules
: 指定不能自动更新的 packages。
packageRules
可以指定多个规则,每个规则包含以下属性:
matchPaths
: 可以命中自动更新的 package 的 glob 或正则表达式。updateTypes
: 可自动更新的 package 的更新类型,包括 major、minor 和 patch。
4. 运行 renovate 工具
在项目根目录下新增 .github/renovate.json
文件,并将以下内容复制进去。
{ "extends": ["@fds/renovate-config"], "autodiscover": true }
该文件主要包含两个配置:
extends
: 继承自 @fds/renovate-config 的配置。autodiscover
: 表明 renovate 工具应该自动发现你的项目中的所有依赖项。
现在,开启 renovate 工具监测功能。renovate 工具会监测到所有自动更新的依赖包,并自动发送 PR 建议更新。
三、示例代码
以 React 项目为例,当你的项目根目录存在 package-lock.json
文件并成功安装了 @fds/renovate-config,你可以新建一个 JavaScript 文件并写入以下内容。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ----- --- - -- -- - ------ - ---------- ------------ - - ---------------- ---- --- ------------------------------- --
写完代码后,执行以下命令启动该 React 项目。
npm start
renovate 工具会在 GitHub 上自动创建 PR 请求,提示你更新依赖包的最新版本。你可以将该 PR 请求与你的团队一起代码回顾,并确认是否应该升级依赖项。
四、总结
通过使用 @fds/renovate-config,我们可以简化依赖包的更新过程,并依照团队最佳实践制定规则,让整个团队可以更方便地协作开发,提高项目的质量和效率。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60066b5e51ab1864dac6715a