【分包管理初体验】基于v4版本的lerna实现最基础的分包管理

XMX303
391 阅读8分钟

lerna介绍

Lerna 是一个用于管理多包 JavaScript 项目的工具。它可以帮助开发者高效地管理多个相互关联的包，实现代码复用和统一的版本控制。

主要特点和功能：

  1. Monorepo 管理：

    • Lerna 允许将多个包放在一个仓库中进行管理，这种 Monorepo 结构有助于提高开发效率，方便共享代码和资源。
    • 可以轻松地在不同的包之间进行依赖管理和版本控制。

  2. 版本控制：

    • 可以自动管理包的版本号，根据开发者的选择进行主要版本、次要版本或补丁版本的更新。
    • 支持自动生成变更日志，记录每个版本的更改内容。

  3. 命令行工具：

    • 提供了一系列命令行指令，方便开发者进行各种操作，如安装依赖、构建项目、发布包等。
    • 例如，lerna bootstrap 用于安装所有包的依赖，lerna run <script> 可以在所有包中执行指定的脚本。

  4. 灵活的工作流：

    • Lerna 支持不同的工作流模式，如固定模式（fixed）和独立模式（independent）。
    • 在固定模式下，所有包的版本号同步更新；在独立模式下，每个包可以独立地进行版本控制和发布。

  5. 发布管理：

    • 简化了包的发布流程，可以方便地将更新后的包发布到 npm 或其他包管理平台。

    • 支持选择性发布，只发布那些有更改的包。

使用场景：

  1. 大型项目：对于包含多个子模块或包的大型项目，Lerna 可以帮助管理复杂的依赖关系和版本控制。

  2. 开源项目：方便开源项目的维护者管理多个相关的包，提高项目的可维护性和可扩展性。

  3. 团队协作：多个开发者可以在同一个 Monorepo 中协同工作，共享代码和资源，提高开发效率。

Lerna 是一个强大的工具，可以帮助开发者更好地管理多包 JavaScript 项目，提高开发效率和代码质量。

为什么要做分包管理

一、提高代码可维护性

  1. 模块清晰

    • 将一个大型项目拆分为多个较小的包，每个包专注于特定的功能或业务领域。这样可以使代码结构更加清晰，开发人员更容易理解和修改特定部分的代码，而不会影响整个项目的其他部分。
    • 例如，一个电商项目可以拆分为用户管理包、商品管理包、订单管理包等，每个包都有明确的职责和功能边界。

  2. 独立开发和测试

    • 不同的包可以由不同的开发团队或个人独立进行开发和测试。这有助于提高开发效率，减少团队之间的依赖和冲突。

    • 每个包可以有自己的开发周期和发布计划，不受其他包的影响。

二、代码复用

  1. 内部复用

    • 分包管理使得在项目内部可以方便地复用代码。如果多个模块需要相同的功能，可以将该功能封装在一个独立的包中，然后在需要的地方引入这个包。
    • 例如，一个通用的日志模块可以被多个不同的业务模块复用，避免了重复开发。

  2. 跨项目复用

    • 精心设计的包可以在不同的项目中进行复用，提高开发效率和代码质量。如果一个公司有多个类似的项目，一些通用的功能包可以在这些项目中共享。

    • 比如，一个验证用户输入的包可以在多个不同的项目中使用，减少了重复开发的工作量。

三、优化依赖管理

  1. 精确依赖

    • 每个包可以明确声明自己的依赖关系，避免不必要的依赖引入。这有助于减少项目的整体依赖数量，提高项目的稳定性和安全性。
    • 例如，如果一个包只需要使用一个特定的库来实现其功能，它可以只引入这个库，而不会引入其他不必要的依赖。

  2. 依赖隔离

    • 分包管理可以将不同包的依赖隔离开来，避免依赖冲突。如果两个包依赖不同版本的同一个库，通过分包管理可以将它们的依赖分别管理，减少冲突的可能性。

    • 例如，包 A 依赖库 X 的版本 1，包 B 依赖库 X 的版本 2，通过分包管理可以确保它们各自使用正确的版本。

四、提高项目可扩展性

  1. 易于添加新功能

    • 当需要添加新功能时，可以创建一个新的包来实现这个功能，而不会影响现有的代码结构。这使得项目的扩展更加容易和灵活。
    • 例如，如果要在一个项目中添加一个新的支付方式，可以创建一个新的支付模块包，与现有的代码进行集成。

  2. 独立升级

    • 每个包可以独立地进行升级和改进，而不会影响其他包的功能。这使得项目可以更容易地适应不断变化的需求和技术环境。
    • 比如，如果一个包所依赖的某个库发布了新版本，可以单独升级这个包，而不需要对整个项目进行大规模的升级。

使用Lerna做一次分包实战，实现从零创建项目到项目发包npm网站

首先创建文件夹x-test-dev（文件夹名称按自己的命名习惯来），在文件夹内运行npm init -y 指令，初始化package.json

image.png

然后使用npm i -g lerna@4.0.0 全局安装lerna指令，这里需要注意的一点是，安装版本不能是最新版本的lerna，最新版本的lerna没有本篇文章需要用到的多个指令，因为lerna在v7版本时做了大调整，把很多基础指令功能移除了。

image.png

安装完lerna，我们在x-test-dev目录下使用lerna init命令，这个命令会帮我们创建packages文件夹、lerna.json配置文件，以及在package.json文件夹下自动引入lerna依赖

image.png

执行完以上步骤初始化lerna后，我们需要运行git init，初始化git项目本地仓库，创建.gitignore并添加对应的文件与目录，保持线上仓库整洁性

image.png

git初始化后，我们就可以开始创建我们的子目录包了，使用核心命令learn create core，lerna会在packages目录下创建core目录，并生成对应的包文件

image.png

这里需要注意的一点是把报名改成我们项目文件夹的子包名称，这样可以避免因文件夹重名而无法发包到npm上，我们采用的子包名称为@项目名称/子包名称

image.png

image.png 此时我们需要确认我们的本地git是否配置好了git.name和git.email属性，由于lerna有校验git功能，如果没有做好对应配置，将无法执行learn create操作。使用git config user.name xxx（你的github名称）和git config user.email xxx@xx.com（你的github配置的邮箱地址），进行配置即可

image.png

然后我们再执行lerna create utils，创建utils，这样我们就获得了一个最简单的分包项目，目录如下：

image.png

我们修改一下core分包下的package.json文件，添加子包依赖

"dependencies": {
    "@x-test-dev/utils": "^1.0.0"
  }

image.png

修改utils分包下的package.json文件，修改项目文件目录，以及对应的文件名称为index.js【规范化名称，可忽略】

image.png

然后我们可以在命令行中输入cd packages/core 进入core分包环境下

image.png

在分包环境下运行 lerna link 自动链接,此时会自动将本地的utils包连接到core包的node_modules下

image.png

测试一下，修改utils下index.js的utils方法，再在core中引入后执行core文件，可以看到可以实时更新并执行utils中的方法，此时本地项目包已经链接成功，不需要我们自己去做复杂的npm link操作，全部托管给lerna link即可，如果后续要更换或者不需要这些本地链接了，直接使用lerna clear清理即可

image.png

image.png

在github上创建一个项目，并将本地代码推送上去，需要注意的是，创建的项目必须是public，不然后续没有权限做npm包公开操作

image.png

然后我们在npm网站上个人主页的头像位置点击 Add Organization初始化项目仓库

image.png

输入仓库名并，按下create

image.png

直接跳过

image.png 这样我们就获得了我们在npm网站上的代码仓库了

image.png

最后在每个子包目录下运行npm publish将每个包注册公开声明。【注意：注册公开声明需要在package.json下添加以下声明，同时添加LICENSE.md文档】

image.png

再运行lerna publish即可将包发布上npm组织下了。

写在后面

此文为记录为主，如果对您有帮助，不胜荣幸。

avatar
文章
阅读
粉丝