使用 Lerna 构建组件库
在前端开发中，组件库是实现代码复用的重要工具。而随着项目规模的扩大，如何高效地管理、开发和发布多个组件成为了一个不容忽视的问题。在我的组件库开发过程中，我使用了 Lerna 的一些基础命令，结合 pnpm 和其他工具，帮助我简化了管理流程。本文将分享我使用 Lerna 的经验，重点介绍如何配置 nx 文件以定义命令依赖关系，并结合批量运行脚本的实用技巧。同时，还将探讨 Lerna 在版本管理方面的策略选择。
什么是 Lerna？
Lerna 是一个用于管理 JavaScript 多包仓库的工具，它解决了多个包之间的版本管理、依赖安装和发布流程的问题。其主要特点包括：
版本管理：支持独立版本（Independent）和统一版本（Fixed/Locked）策略。
依赖链接：通过本地链接的方式管理包之间的依赖关系，避免重复安装。
批量操作：可以对所有或部分包执行统一的脚本操作，例如构建、测试和发布。
对于开发一个包含多个组件的库（例如按钮、表单、弹窗等），Lerna 的基础命令可以让管理这些组件更加高效。
安装和初始化 Lerna
在开始之前，确保您已经安装了 Node.js 和 pnpm。然后全局安装 Lerna：
npm install -g lerna
初始化项目
创建一个新的项目目录，并在其中初始化 Lerna：
mkdir my-component-library cd my-component-library lerna init
Lerna 会生成两个关键文件：
lerna.json：Lerna 的配置文件。
packages 目录：默认存放所有子包（组件）。
注意：在我的项目中，我使用了 pnpm 管理依赖，因此没有使用 lerna bootstrap 命令，而是直接使用 pnpm install。
常用命令
在我的实际使用中，Lerna 的几个基础命令极大地提升了工作效率：
1. 批量运行脚本
在开发组件库时，经常需要运行一些脚本，例如测试、构建等。Lerna 提供了 lerna run 命令，可以批量执行某个脚本：
lerna run build
该命令会在每个子包中查找 package.json 中的 scripts 字段，并执行指定的脚本。
结合 nx 文件，还可以定义脚本的依赖关系。例如：
在 nx.json 文件中配置：
{
"tasksRunnerOptions": {
"default": {
"runner": "@nrwl/workspace/tasks-runners/default",
"options": {
"cacheableOperations": ["build"]
}
}
},
"targetDependencies": {
"build": [
{ "target": "build", "projects": "dependencies" }
]
}
}
配置完成后，运行脚本时，Lerna 会按照包之间的依赖关系顺序执行任务，确保构建流程更加顺畅。
2. 添加依赖
如果某个包需要依赖另一个包，可以使用 lerna add 命令。例如，将 utils 包作为依赖添加到 button 包：
lerna add utils --scope=button
结合 pnpm，本地包的依赖关系也会通过 pnpm 的链接功能高效管理。
3. 发布
当组件库开发完成后，可以通过 Lerna 发布所有包：
lerna publish
Lerna 支持两种版本管理策略：
统一版本（Fixed/Locked）
所有包共享一个版本号，每次发布时，所有包的版本都会同步更新。这种方式适用于包之间紧密耦合的场景，便于管理。
在 lerna.json 中配置：
{
"version": "1.0.0"
}
独立版本（Independent）
每个包维护自己的版本号，仅在包内容变化时更新版本。这种方式更灵活，适合包之间松耦合的场景。
在 lerna.json 中配置：
{
"version": "independent"
}
运行 lerna publish 时，Lerna 会根据包的变更情况自动选择版本号，并更新相关依赖。
实践经验
在实际项目中，使用 Lerna 和 pnpm 的组合让我得到了以下几点收获：
高效的脚本管理：通过 lerna run 和 nx 配置，实现了复杂依赖关系的任务执行。
灵活的依赖管理：使用 pnpm 替代 lerna bootstrap，结合 lerna add 高效管理依赖。
简化的发布流程：通过 lerna publish，可以轻松发布多个组件包。
版本管理灵活：根据项目需求选择合适的版本策略。
注意事项
依赖规划：对于组件之间的依赖关系，需要合理规划，避免循环依赖。
脚本命名一致性：确保所有包中的 scripts 字段名称一致，例如都使用 build 或 test。
与 pnpm 的兼容性：确保 lerna.json 中的 npmClient 设置为 pnpm：
{
"npmClient": "pnpm",
"useWorkspaces": true
}
总结
Lerna 的基础命令非常适合组件库开发中的多包管理需求，而结合 pnpm 和 nx 配置，更能发挥其在复杂场景中的优势。同时，其灵活的版本管理策略让用户可以根据项目特性选择适合的模式。
