深入分析 JavaScript Monorepo 工具 (如 Lerna, Nx) 如何管理多包项目、共享配置和优化构建流程。

各位观众老爷们，大家好！今天咱们来聊聊JavaScript Monorepo那些事儿，保证让大家听得懂、用得上、还能乐得开怀。

咱们今天要探讨的是Monorepo的那些事儿，重点放在Lerna和Nx这两位大佬身上，看看它们是如何管理多包项目，共享配置，以及优化构建流程的。

一、什么是Monorepo？为啥要用它？

首先，咱们得搞清楚Monorepo是个啥玩意儿。简单来说，Monorepo就是把多个项目（或者说多个package）的代码放在同一个代码仓库里。这跟传统的Multi-repo（每个项目一个仓库）可是大相径庭。

想象一下，你开了一家软件公司，手底下有各种各样的项目：网站前端、后端API、移动App，甚至还有一些通用的工具库。

• Multi-repo: 你为每个项目都建了一个单独的Git仓库。好处是每个项目独立性强，权限管理也简单。但问题来了：代码复用难，修改一个通用组件要同步更新多个仓库，版本管理混乱，依赖关系维护起来简直要命。
• Monorepo: 你把所有项目代码都塞进同一个Git仓库。好处是代码复用容易，修改通用组件只需要一次，版本管理集中化，依赖关系清晰明了。

用表格总结一下：

特性	Multi-repo	Monorepo
代码复用	困难，需要发布、安装、更新等步骤	容易，直接引用
版本管理	复杂，各个仓库独立版本控制	集中，统一版本控制
依赖管理	复杂，需要处理跨仓库依赖	简单，内部依赖清晰
代码可见性	限制，需要授权才能访问其他仓库代码	高，所有团队成员可见
构建流程	每个仓库独立构建流程，重复工作多	统一构建流程，可以优化构建顺序和缓存
修改影响	修改范围小，只影响单个仓库	修改范围大，需要仔细测试所有受影响的项目
工具支持	Git等通用工具	需要专门的Monorepo管理工具，如Lerna、Nx等

那么，为啥越来越多的人开始拥抱Monorepo呢？原因很简单：

• 代码复用性大大提高: 就像搭积木一样，你可以轻松地在不同项目之间复用组件和模块。
• 依赖管理更简单: 避免了跨仓库依赖带来的各种版本冲突和管理难题。
• 原子性变更: 修改一个通用组件，可以同时更新所有依赖它的项目，保证一致性。
• 协同开发更高效: 所有团队成员都能看到所有代码，促进知识共享和团队协作。

当然，Monorepo也不是万能的。它也有一些缺点：

• 代码库体积庞大: 可能会导致clone和checkout速度变慢。
• 构建时间较长: 构建所有项目可能需要很长时间。
• 权限管理复杂: 需要更精细的权限管理策略。
• 工具链要求高: 需要专门的Monorepo管理工具来支撑。

二、Lerna：Monorepo界的元老

Lerna 是一个用于管理包含多个软件包（package）的 JavaScript 项目的工具。它简化了版本发布、依赖管理和代码共享等流程。 它的核心思想是使用 git 和 npm 来管理项目中的包，并提供一些命令来自动化这些任务。

Lerna擅长管理多个独立的npm package，方便发布到npm仓库。

1. Lerna 初始化

首先，你需要安装Lerna：

npm install --global lerna

然后在你的项目根目录下运行：

lerna init

这会创建一个 lerna.json 文件和一个 packages 目录。lerna.json 文件是 Lerna 的配置文件，packages 目录用于存放你的各个 package。

2. 创建 Package

在 packages 目录下，你可以创建多个 package。比如，我们可以创建两个 package：component-a 和 component-b。

mkdir packages/component-a
mkdir packages/component-b
cd packages/component-a
npm init -y
cd ../component-b
npm init -y

每个package都有自己的 package.json 文件，你可以像管理普通的 npm package 一样管理它们。

3. Lerna常用命令

• lerna bootstrap: 安装所有 package 的依赖。它会读取每个 package 的 package.json 文件，并将依赖安装到 node_modules 目录下。

  lerna bootstrap

• lerna publish: 发布 package 到 npm 仓库。它会自动检测哪些 package 有更新，并发布到 npm 仓库。

  lerna publish

• lerna run <script>: 在所有 package 中运行指定的 npm script。比如，你可以运行所有 package 的 test script。

  lerna run test

• lerna exec <command>: 在每个 package 中执行任意命令。比如，你可以删除所有 package 的 node_modules 目录。

  lerna exec -- rm -rf node_modules

• lerna add <package> --scope=<target>: 为指定 package 添加依赖。

  lerna add lodash --scope=component-a

4. Lerna.json 配置

lerna.json 文件是 Lerna 的核心配置文件。它包含以下几个重要的配置项：

• packages: 指定 package 的目录。通常设置为 ["packages/*"]。
• version: 指定版本管理模式。有两种模式：
  • independent: 每个 package 独立版本号。
  • fixed: 所有 package 共享一个版本号。
• npmClient: 指定 npm 客户端。可以是 npm 或 yarn。
• useWorkspaces: 是否使用 yarn workspaces。如果设置为 true，Lerna 会使用 yarn workspaces 来管理依赖。

一个典型的 lerna.json 文件如下所示：

{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "npm",
  "useWorkspaces": true
}

5. Lerna + Yarn Workspaces

Lerna 通常与 Yarn Workspaces 搭配使用，以获得更好的性能和依赖管理。Yarn Workspaces 允许你在一个项目中管理多个 package 的依赖，并共享一个 node_modules 目录。

要使用 Yarn Workspaces，首先需要在 package.json 文件中添加 workspaces 字段：

{
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

然后，在 lerna.json 文件中设置 useWorkspaces 为 true：

{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "yarn",
  "useWorkspaces": true
}

示例代码：

假设我们有两个组件，component-a 和 component-b。component-a 依赖于 component-b。

packages/component-a/package.json:

{
  "name": "component-a",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "dependencies": {
    "component-b": "*"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

packages/component-b/package.json:

{
  "name": "component-b",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

在 component-a 中引用 component-b：

packages/component-a/index.js:

const componentB = require('component-b');

console.log('Component A depends on Component B:', componentB.message);

packages/component-b/index.js:

module.exports = {
  message: 'Hello from Component B!'
};

运行 lerna bootstrap 安装依赖后，就可以运行 component-a 了：

node packages/component-a/index.js

输出：

Component A depends on Component B: Hello from Component B!

三、Nx：Monorepo界的后起之秀

Nx 是一个更高级的 Monorepo 管理工具，它提供了更强大的功能，比如代码生成、依赖分析、构建优化和测试工具等。 Nx 被设计为与 Angular、React、Node 等框架无缝集成，并提供了一套完整的工具链来支持 Monorepo 开发。

Nx 最大的特点是它的智能构建和缓存机制。它可以分析项目之间的依赖关系，只构建受影响的项目，并缓存构建结果，从而大大提高构建速度。

1. Nx 初始化

首先，你需要安装 Nx：

npm install --global nx

然后在你的项目根目录下运行：

npx create-nx-workspace my-org --preset=empty

这会创建一个名为 my-org 的 Nx Workspace。--preset=empty 表示创建一个空的项目，你可以根据自己的需要选择其他 preset。

2. 创建 Application 和 Library

在 Nx 中，Application 指的是可运行的项目，比如网站、App 或 API。Library 指的是可复用的代码模块。

你可以使用 Nx CLI 来创建 Application 和 Library：

nx generate @nx/react:application my-app
nx generate @nx/node:library my-lib

这会分别创建一个名为 my-app 的 React Application 和一个名为 my-lib 的 Node Library。

3. Nx常用命令

• nx build <project>: 构建指定的项目。Nx 会分析项目之间的依赖关系，只构建受影响的项目，并缓存构建结果。

  nx build my-app

• nx serve <project>: 启动开发服务器。Nx 会自动监听代码变化，并实时重新加载。

  nx serve my-app

• nx test <project>: 运行单元测试。Nx 会自动收集所有项目的测试用例，并并行运行。

  nx test my-lib

• nx lint <project>: 运行代码检查。Nx 会自动检查代码风格和潜在的错误。

  nx lint my-app

• nx format:write: 格式化代码。Nx 会自动格式化所有项目的代码，保持代码风格一致。

  nx format:write

• nx graph: 生成项目依赖关系图。Nx 会分析项目之间的依赖关系，并生成一个可视化的依赖关系图。

  nx graph

4. Nx.json 配置

nx.json 文件是 Nx 的核心配置文件。它包含以下几个重要的配置项：

• projects: 定义项目及其配置。
• tasksRunnerOptions: 配置任务运行器，比如缓存和并行执行。
• affected: 配置如何检测受影响的项目。
• plugins: 配置 Nx 插件。

一个典型的 nx.json 文件如下所示：

{
  "npmScope": "my-org",
  "affected": {
    "defaultBase": "main"
  },
  "implicitDependencies": {
    "package.json": {
      "dependencies": "*",
      "devDependencies": "*"
    },
    ".eslintrc.json": "*"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "@nrwl/nx-cloud",
      "options": {
        "cacheableOperations": [
          "build",
          "lint",
          "test",
          "e2e"
        ],
        "accessToken": "YOUR_NX_CLOUD_TOKEN"
      }
    }
  },
  "targetDependencies": {
    "build": [
      {
        "target": "build",
        "projects": "dependencies"
      }
    ]
  },
  "plugins": [
    "@nrwl/js",
    "@nrwl/linter"
  ],
  "defaultProject": "my-app"
}

5. Nx 的智能构建和缓存

Nx 的智能构建和缓存机制是其最大的优势。它通过以下方式来提高构建速度：

• 依赖分析: Nx 会分析项目之间的依赖关系，只构建受影响的项目。
• 任务调度: Nx 会根据依赖关系，合理调度任务的执行顺序，避免重复构建。
• 本地缓存: Nx 会缓存构建结果，下次构建时直接使用缓存，无需重新构建。
• 分布式缓存: Nx Cloud 提供了分布式缓存功能，可以在团队成员之间共享缓存，进一步提高构建速度。

示例代码：

假设我们有一个名为 my-app 的 React Application 和一个名为 my-lib 的 Node Library。my-app 依赖于 my-lib。

apps/my-app/src/app/app.tsx:

import React from 'react';
import { myLib } from '@my-org/my-lib';

function App() {
  return (
    <div>
      <h1>My App</h1>
      <p>{myLib()}</p>
    </div>
  );
}

export default App;

libs/my-lib/src/lib/my-lib.ts:

export function myLib(): string {
  return 'Hello from My Lib!';
}

运行 nx build my-app 构建 my-app 时，Nx 会自动检测到 my-app 依赖于 my-lib，因此会先构建 my-lib，然后再构建 my-app。下次再次运行 nx build my-app 时，如果 my-lib 的代码没有发生变化，Nx 会直接使用缓存，无需重新构建 my-lib。

四、Lerna vs Nx：选哪个？

Lerna和Nx都是优秀的Monorepo管理工具，但它们的设计理念和适用场景有所不同。

• Lerna: 专注于版本管理和发布，简单易用，适合小型项目和简单的Monorepo结构。
• Nx: 功能更强大，提供了代码生成、依赖分析、构建优化和测试工具等，适合大型项目和复杂的Monorepo结构。

用表格总结一下：

特性	Lerna	Nx
核心功能	版本管理、发布	代码生成、依赖分析、构建优化、测试工具
易用性	简单易用	学习曲线较陡峭
性能	构建速度较慢	智能构建和缓存机制，构建速度快
适用场景	小型项目、简单的Monorepo结构	大型项目、复杂的Monorepo结构
框架集成	通用，与框架无关	与 Angular、React、Node 等框架无缝集成
插件支持	插件生态较小	插件生态丰富
学习曲线	较低	较高
社区支持	较大，历史悠久	较大，活跃

如何选择？

• 如果你的项目规模较小，只需要简单的版本管理和发布功能，Lerna 是一个不错的选择。
• 如果你的项目规模较大，需要更强大的功能和更好的性能，Nx 是一个更好的选择。
• 如果你已经在使用 Angular 或 React，Nx 可以提供更好的集成体验。
• 如果你需要代码生成、依赖分析和智能构建等功能，Nx 是唯一的选择。

五、Monorepo 的最佳实践

最后，我们来总结一些 Monorepo 的最佳实践：

• 清晰的项目结构: 保持项目结构清晰，方便查找和管理。
• 统一的代码风格: 使用统一的代码风格，提高代码可读性。可以使用 ESLint 和 Prettier 来强制执行代码风格。
• 自动化构建和测试: 使用 CI/CD 工具自动化构建和测试流程，保证代码质量。
• 合理的权限管理: 根据团队成员的角色和职责，设置合理的权限，避免误操作。
• 持续优化构建速度: 使用 Nx 的智能构建和缓存机制，或者其他构建优化技术，持续优化构建速度。

六、总结

Monorepo 是一种强大的代码管理模式，可以提高代码复用性、简化依赖管理和促进团队协作。Lerna 和 Nx 是两个优秀的 Monorepo 管理工具，可以帮助你更好地管理多包项目。选择哪个工具取决于你的项目规模、需求和技术栈。希望今天的讲座能帮助大家更好地理解和应用 Monorepo。

各位观众老爷，今天的分享就到这里，希望大家有所收获！如果大家有什么问题，欢迎留言讨论。咱们下期再见！