掌握 Lerna:管理 JavaScript Monorepos 的指南

掌握 lerna:管理 javascript monorepos 的指南

目录

简介第一章:lerna 是什么?为什么选择 monorepos?第 2 章:安装和设置 lerna先决条件分步安装指南设置您的第一个 lerna 项目第 3 章:lerna 中的依赖关系管理独立依赖提升共享依赖项引导包第 4 章:跨包运行脚本全局执行脚本针对特定包第 5 章:使用 lerna 进行版本控制和发布固定模式与独立模式将包发布到 npm第 6 章:将 lerna 与 yarn 工作区结合使用在 lerna 中启用 yarn 工作区使用 lerna + yarn 工作区优化工作流程第 7 章:lerna 高级用法过滤命令创建自定义命令第 8 章:lerna monorepos 的最佳实践逻辑包组织自动化测试和构建ci/cd 集成结论附录:常用 lerna 命令

简介

管理涉及多个相互依赖的包的大型 javascript 或 typescript 项目对于开发人员和开发团队来说可能是一项重大挑战。通常,开发人员依赖每个包的多个存储库,这会导致代码维护、依赖项管理和协作方面的开销。

lerna 是一个为管理 monorepos 开发的强大工具,它简化了这个过程。 monorepos 使团队能够在单个存储库中托管多个包,从而简化依赖关系管理并使团队之间的协作更加顺畅。

这本电子书旨在提供使用 lerna 有效管理您的 monorepos 的完整指南。无论您是处理组件库还是具有多个互连包的大型项目,您都会发现有价值的见解,帮助您通过 lerna 最大限度地提高生产力。

第一章:lerna 是什么?

lerna 是一个开源工具,有助于管理 monorepo 中的多个包。它提供了强大的功能,例如自动依赖管理、版本控制和发布,使大规模维护 javascript 和 typescript 项目变得更加容易。

立即学习“Java免费学习笔记(深入)”;

为什么选择 monorepos?

monorepos 是许多大型项目的架构选择,因为它们提供了多种好处:

共享代码库:使用 monorepos,代码重用更加容易。这减少了重复并确保项目之间的一致性。简化协作:当所有包都集中在一个地方时,开发人员可以更有效地协作。统一构建流程:跨多个包的标准化构建、测试和部署变得更加容易。

尽管有这些好处,管理单一存储库也会带来独特的挑战,特别是在管理依赖项和版本控制方面。 lerna 旨在正面应对这些挑战,为 monorepos 提供优化的工作流程。

第 2 章:安装和设置 lerna

先决条件

开始之前,请确保您已安装 node.jsnpm(或 yarn)。 lerna 与 npm 和 yarn 兼容。

第 1 步:安装 lerna

您可以通过 npm 在全局安装 lerna:

npm install --global lerna

或者,您可以将 lerna 添加为项目中的开发依赖项:

npm install --save-dev lerna

第 2 步:初始化 lerna monorepo

安装后,通过导航到项目目录并运行来初始化您的 monorepo:

lerna init

这将创建必要的配置文件,包括 lerna.json,并设置一个包文件夹来存放您的各个包。

第 3 步:添加包

在 lerna 项目中,每个包都位于 packages 下自己的子文件夹中。每个包必须有自己的 package.json 文件用于依赖管理。

示例结构:

/my-project  /packages    /package-a    /package-b  lerna.json  package.json

第 3 章:lerna 中的依赖关系管理

管理多个包之间的依赖关系是 lerna 的核心优势之一。

独立依赖

lerna 允许您向特定包添加依赖项。例如,如果只有 package-a 需要 lodash,则可以运行:

lerna add lodash --scope=package-a

提升共享依赖项

当多个包共享依赖项时,您可以将这些依赖项提升到 monorepo 的根目录。这减少了冗余并加快了安装速度。要启用提升,请将其添加到 lerna.json:

{  "hoist": true}

引导

要安装相互依赖的依赖项和链接包,请运行:

lerna bootstrap

这可确保安装所有必需的外部依赖项,并且包可以正确地相互引用。

第 4 章:跨包运行脚本

lerna 可以轻松地在 monorepo 中的所有包中执行脚本(例如构建、测试、lint)。

全局执行脚本

要在所有包中运行诸如构建之类的脚本,请使用:

lerna run build

针对特定包

如果您只想运行某些包中的脚本,请使用 –scope 标志:

lerna run test --scope=package-a

这种灵活性可以实现更有针对性的执行,从而节省开发时间。

第 5 章:使用 lerna 进行版本控制和发布

lerna 提供强大的版本控制和发布功能,使您可以轻松版本和发布软件包。

1.固定模式

在固定模式下,所有包共享相同的版本号。当任何软件包更新时,所有软件包的版本号都会增加。

2.独立模式

独立模式下,每个包都有自己的版本号。当软件包发生更改时,仅更新该软件包的版本。

要切换到独立模式,请修改lerna.json:

{  "version": "independent"}

发布包

要将包发布到 npm,请运行:

lerna publish

lerna 将根据您的配置处理版本控制和发布。

第 6 章:将 lerna 与 yarn 工作区结合使用

将 lerna 与 yarn workspaces 相结合可以通过提升更多共享依赖项来进一步优化依赖项管理。

要启用 yarn 工作区,请修改 lerna.json 文件:

{  "npmclient": "yarn",  "useworkspaces": true}

然后更新你的 package.json:

{  "workspaces": ["packages/*"]}

这种集成提高了性能并简化了大型项目的管理。

第 7 章:lerna 高级用法

过滤命令

lerna 允许过滤为特定包运行命令或排除某些包。

在特定包上运行的示例:

lerna run build --scope=package-a --scope=package-b

排除包裹的示例:

lerna run build --ignore=package-c

自定义命令

您可以在 package.json 中为专门的工作流程定义自定义 lerna 命令。然后可以在您的包中运行这些命令。

第 8 章:lerna monorepos 的最佳实践

按逻辑组织包:将相关包分组在一起,以便更好地重用代码。使用提升:提升共享依赖项可以节省空间并加快安装时间。自动化测试:使用 lerna run 对整个 monorepo 进行自动化测试。ci/cd 管道:实施持续集成和部署工作流程以自动测试和部署更改。yarn 工作区:利用 yarn 工作区与 lerna 进行更好的依赖管理。

结论

lerna 是管理 monorepos 的宝贵工具,提供简化复杂工作流程(从依赖管理到版本控制和发布)的功能。通过采用 lerna,团队可以降低复杂性、简化流程并改善协作,从而更轻松地维护大型项目。

无论您是在开发简单的组件库还是多包生态系统,lerna 都能提供有效管理项目所需的工具。继续尝试 lerna 的高级功能,以释放其全部潜力。

附录:常用 lerna 命令

lerna init:初始化 lerna monorepo。lerna bootstrap:安装依赖项和链接包。lerna add [package] –scope=[package-name]:添加对特定包的依赖。lerna run [script]:在所有包中运行脚本。lernapublish:将包发布到 npm。

快乐编码:)

以上就是掌握 Lerna:管理 JavaScript Monorepos 的指南的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1491492.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 14:00:42
下一篇 2025年12月19日 14:00:59

相关推荐

  • 如何用dom2img解决网页打印样式不显示的问题?

    用dom2img解决网页打印样式不显示的问题 想将网页以所见即打印的的效果呈现,需要采取一些措施,特别是在使用了bootstrap等大量采用外部css样式的框架时。 问题根源 在常规打印操作中,浏览器通常会忽略css样式等非必要的页面元素,导致打印出的结果与网页显示效果不一致。这是因为打印机制只识别…

    2025年12月24日
    800
  • Bootstrap 中如何让文字浮于阴影之上?

    文字浮于阴影之上 文中提到的代码片段中 元素中的文字被阴影元素 所遮挡,如何让文字显示在阴影之上? bootstrap v3和v5在处理此类问题方面存在差异。 解决方法 在bootstrap v5中,给 元素添加以下css样式: .banner-content { position: relativ…

    2025年12月24日
    000
  • Bootstrap 5:如何将文字置于阴影之上?

    文字重叠阴影 在 bootstrap 5 中,将文字置于阴影之上时遇到了困难。在 bootstrap 3 中,此问题并不存在,但升级到 bootstrap 5 后却无法实现。 解决方案 为了解决这个问题,需要给 元素添加以下样式: .banner-content { position: relati…

    2025年12月24日
    400
  • Bootstrap 5 如何将文字置于阴影上方?

    如何在 bootstrap 5 中让文字位于阴影上方? 在将网站从 bootstrap 3 升级到 bootstrap 5 后,用户遇到一个问题:文字内容无法像以前那样置于阴影层之上。 解决方案: 为了将文字置于阴影层上方,需要给 banner-content 元素添加以下 css 样式: .ban…

    2025年12月24日
    100
  • HTMLrev 上的免费 HTML 网站模板

    HTMLrev 是唯一的人工策划的库专门专注于免费 HTML 模板,适用于由来自世界各地慷慨的模板创建者制作的网站、登陆页面、投资组合、博客、电子商务和管理仪表板世界。 这个人就是我自己 Devluc,我已经工作了 1 年多来构建、改进和更新这个很棒的免费资源。我自己就是一名模板制作者,所以我知道如…

    2025年12月24日
    300
  • 如何用 CSS 禁止手机端页面屏幕拖动?

    css 禁止手机端屏幕拖动 在手机端浏览网页时,常常会遇到屏幕拖动导致页面内容错乱或无法操作的情况。为了解决这个问题,可以使用 css 的 overflow 属性来禁止屏幕拖动。 解决方案 针对给定的代码,可以在 元素中添加以下 css 样式: 立即学习“前端免费学习笔记(深入)”; body{ov…

    2025年12月24日
    000
  • 如何禁用手机端屏幕拖动功能?

    解决手机端屏幕拖动问题 在移动设备上,当设备屏幕存在内容超出边界时,可以通过拖动屏幕来浏览。但有时,我们希望禁用这种拖动功能,例如当导航菜单展开时。 实施方法 要禁止屏幕拖动,可以为 body 元素添加 overflow:hidden 样式。这将禁用滚动条并阻止屏幕拖动,无论内容是否超出边界。 以下…

    2025年12月24日
    000
  • 如何用纯 CSS 替代 SCSS 中的 @import?

    如何在 css 中替代 scss 中的 @import 在项目中仅有一个文件使用 scss 的情况下,我们可能希望使用纯 css 来替代它。该 scss 文件通常包含对第三方 css 库的导入,如: /* this file is for your main application css. */@…

    2025年12月24日
    000
  • 如何用 CSS 替代 SCSS 中的 @import?

    用 css 替代 scss 中的 @import 在 scss 文件中,@import 语句用于导入其他 css 文件。然而,如果项目中只有一个文件使用 scss,我们可以考虑使用普通 css 来替代它,从而消除对 sass 和 sass-loader 的依赖。 要使用纯 css 替代 scss 文…

    2025年12月24日
    000
  • 如何用纯CSS替代scss中的@import?

    用纯css替代scss中的@import 在一个包含scss文件的项目中,我们可能需要找到一种方法来用纯css替代掉它。为了消除对scss的依赖,可以使用css中的@import指令。 /css中使用@import 纯css中的@import语法与scss中的类似: 立即学习“前端免费学习笔记(深入…

    2025年12月24日
    000
  • 如何构建一个可重复使用的 CSS 容器元素?

    探索可重复使用的 css 容器元素 在前端开发中,css 容器是一个重要的元素,它为应用程序的内容提供了一个可重复使用的布局和样式基础。让我们探讨一下一个典型容器应该包含哪些核心属性。 通常,一个容器元素仅限于定义页面内容的布局和留白。一些常见的属性包括: padding:设置容器内元素与边框之间的…

    2025年12月24日
    000
  • 什么是可重复使用的 CSS 容器?它包含哪些属性?

    什么是可重复使用的 css container? 容器在 css 中扮演着重要的角色,负责容纳页面内容并控制其布局。一个可重复使用的 container 是一组预定义的样式,可以应用于多个组件,以确保一致性和可维护性。 可重复使用的 container 包含哪些属性? 通常,可重复使用的 conta…

    2025年12月24日
    000
  • Bootstrap 4 表格中如何实现列向右对齐?

    表格对齐问题 在bootstrap 4中构建表格时,有时会遇到列不对齐的问题。本文将介绍一个解决此问题的方法,以实现列向右对齐。 问题: 假设我们有一个带有四列的表格,前两列使用 th 标签作为标题,后两列使用 td 标签表示数据。然而,我们希望后两列数据向右对齐。 解决方法: 要解决此问题,我们可…

    2025年12月24日
    000
  • Bootstrap 表格中如何实现列对齐不一致?

    表格设计中的对齐问题 使用 Bootstrap 框架创建表格时,有时会遇到列对齐不一致的问题。例如,将最后两列向右对齐,以下方法可以解决此问题: 将表格设置为 100% 宽度,以覆盖整个容器。为 1、3、4 列设置固定宽度,以确保这些列的对齐。将 2 列设置为自动宽度(不设置宽度),使其自动填充剩余…

    2025年12月24日
    000
  • 如何使用 CSS 将 HTML 表格中的特定列右对齐?

    表格对齐问题:如何将表格中的特定列右对齐? 在 html 表格中,您可以使用 css 样式来控制内容对齐方式。在这种情况下,要将最后两列向右对齐,可以使用以下步骤: 确保表格为 100% 宽度。这将允许表格占用可用空间的全部宽度。设置需要右对齐的列为固定宽度。这将为列分配一个指定宽度,确保内容始终在…

    2025年12月24日
    000
  • CSS 中的响应式屏幕尺寸类:如何利用它们创建适应各种设备的网页设计?

    css中的响应式屏幕尺寸 在网页设计中,css 提供了一组用于定义不同屏幕尺寸的类,例如 sm、md、lg、xl 和 2xl。这些类对应于特定设备屏幕的宽度范围: sm(small):代表小屏幕,通常为 576px 及以下md(medium):代表中等屏幕,通常为 576px 至 768pxlg(l…

    2025年12月24日
    000
  • ## CSS 中 sm md lg xl 2xl 屏幕尺寸究竟代表什么?

    CSS中sm md lg xl 2xl 屏幕尺寸详解 在网页设计中,CSS常用sm md lg xl 2xl等尺寸表示不同的屏幕大小范围,以便针对不同设备进行响应式设计。 具体而言: sm:代表小屏幕,通常指手机屏幕尺寸(640px)md:代表中屏幕,通常指平板电脑屏幕尺寸(768px)lg:代表大…

    2025年12月24日
    000
  • ## CSS 中 sm、md、lg、xl、2xl 代表什么尺寸?

    CSS中屏幕尺寸断点规定 CSS 中使用 sm、md、lg、xl、2xl 等表示不同屏幕尺寸,这些尺寸在响应式设计中用于控制元素在特定屏幕宽度下的显示方式。 具体屏幕尺寸如下: xs: 超小屏幕,通常指手机屏幕,宽度小于 576pxsm: 小屏幕,通常指平板电脑或手机横屏模式,宽度介于 576px …

    2025年12月24日
    000
  • 创建响应式布局的关键技术,让您不必依赖繁重的 CSS 框架

    您不需要繁重的 css 框架来构建响应式布局。 像 tailwind 和 bootstrap 这样的 css 框架确实很强大,但有时,它们对于较小的网站来说太过分了。您可以通过纯 css 代码实现它们提供的所有功能。在幕后,它们都使用相同的响应式网站基本技术。 事实上,如果你真的想知道这些框架和响应…

    2025年12月24日
    000
  • Reactjs 中使用的最佳 CSS 框架

    使用 react.js 构建应用程序时,选择正确的 css 框架可以显着提高您的工作效率并增强应用程序的用户界面。正确的 css 框架可以提供预构建的组件、实用程序和设计系统,使您的工作更快、更一致。下面,我将讨论一些与 react.js 无缝集成的最佳 css 框架,以及帮助您入门的示例和有用链接…

    2025年12月24日 好文分享
    000

发表回复

登录后才能评论
关注微信