Monorepo Frontend: Quản lý không gian làm việc với Lerna và Nx

Trong bối cảnh phát triển frontend luôn thay đổi, việc quản lý các dự án lớn và phức tạp có thể là một thách thức đáng kể. Các thiết lập đa kho lưu trữ truyền thống, mặc dù cung cấp sự cô lập, có thể dẫn đến trùng lặp mã, khó khăn trong quản lý phụ thuộc và công cụ không nhất quán. Đây là nơi kiến trúc monorepo tỏa sáng. Một monorepo là một kho lưu trữ duy nhất chứa nhiều dự án, thường có liên quan, được xây dựng và quản lý phiên bản cùng nhau. Cách tiếp cận này mang lại nhiều lợi thế, nhưng việc quản lý monorepo hiệu quả đòi hỏi các công cụ chuyên biệt. Bài viết này khám phá hai giải pháp phổ biến: Lerna và Nx.

Monorepo là gì?

Monorepo là một kho lưu trữ hệ thống kiểm soát phiên bản chứa mã cho nhiều dự án. Các dự án này có thể liên quan hoặc hoàn toàn độc lập. Điểm mấu chốt là chúng chia sẻ cùng một kho lưu trữ. Các công ty như Google, Facebook, Microsoft và Uber đã áp dụng thành công monorepo để quản lý các cơ sở mã khổng lồ của họ. Hãy nghĩ đến việc Google lưu trữ gần như tất cả mã của họ, bao gồm Android, Chrome và Gmail, trong một kho lưu trữ duy nhất.

Lợi ích của Monorepo

• Chia sẻ và Tái sử dụng Mã: Dễ dàng chia sẻ mã giữa các dự án mà không cần quy trình đóng gói và xuất bản phức tạp. Hãy tưởng tượng một thư viện hệ thống thiết kế có thể được tích hợp liền mạch vào nhiều ứng dụng trong cùng một kho lưu trữ.
• Quản lý Phụ thuộc Đơn giản hóa: Quản lý các phụ thuộc tại một nơi duy nhất, đảm bảo tính nhất quán trên tất cả các dự án. Việc cập nhật phụ thuộc của một thư viện dùng chung sẽ tự động cập nhật tất cả các dự án phụ thuộc vào nó.
• Thay đổi Nguyên tử (Atomic Changes): Thực hiện các thay đổi trải rộng nhiều dự án trong một commit duy nhất, đảm bảo tính nhất quán và đơn giản hóa việc kiểm thử. Ví dụ, một quá trình tái cấu trúc ảnh hưởng đến cả frontend và backend có thể được thực hiện một cách nguyên tử.
• Cải thiện Hợp tác: Các nhóm có thể dễ dàng hợp tác trên các dự án khác nhau trong cùng một kho lưu trữ, thúc đẩy việc chia sẻ kiến thức và phát triển đa chức năng. Các nhà phát triển có thể dễ dàng duyệt và hiểu mã trên các nhóm khác nhau.
• Công cụ và Thực hành Nhất quán: Thực thi các tiêu chuẩn mã hóa, quy tắc linting và quy trình xây dựng nhất quán trên tất cả các dự án. Điều này cải thiện chất lượng và khả năng bảo trì mã.
• Tái cấu trúc Đơn giản hóa: Các dự án tái cấu trúc quy mô lớn được đơn giản hóa vì tất cả mã liên quan đều nằm trong cùng một kho lưu trữ. Các công cụ tái cấu trúc tự động có thể được sử dụng trên toàn bộ cơ sở mã.

Thách thức của Monorepo

• Kích thước Kho lưu trữ: Monorepo có thể trở nên rất lớn, có khả năng làm chậm các thao tác sao chép và lập chỉ mục. Các công cụ như `git sparse-checkout` và `partial clone` có thể giúp giảm thiểu vấn đề này.
• Thời gian Xây dựng: Việc xây dựng toàn bộ monorepo có thể tốn thời gian, đặc biệt đối với các dự án lớn. Các công cụ như Lerna và Nx cung cấp các quy trình xây dựng được tối ưu hóa để giải quyết vấn đề này.
• Kiểm soát Truy cập: Hạn chế quyền truy cập vào các phần cụ thể của monorepo có thể phức tạp. Cần có kế hoạch và triển khai cẩn thận các cơ chế kiểm soát truy cập.
• Độ phức tạp của Công cụ: Thiết lập và quản lý monorepo đòi hỏi các công cụ và kiến thức chuyên biệt. Đường cong học tập có thể dốc lúc ban đầu.

Lerna: Quản lý các dự án JavaScript trong Monorepo

Lerna là một công cụ phổ biến để quản lý các dự án JavaScript trong monorepo. Nó tối ưu hóa quy trình làm việc xung quanh việc quản lý các kho lưu trữ đa gói bằng Git và npm. Nó đặc biệt phù hợp với các dự án sử dụng npm hoặc Yarn để quản lý phụ thuộc.

Các tính năng chính của Lerna

• Quản lý Phiên bản: Lerna có thể tự động tạo phiên bản và xuất bản các gói dựa trên những thay đổi được thực hiện kể từ lần phát hành cuối cùng. Nó sử dụng các conventional commits để xác định số phiên bản tiếp theo.
• Quản lý Phụ thuộc: Lerna xử lý các phụ thuộc giữa các gói, đảm bảo rằng các gói trong monorepo có thể phụ thuộc vào nhau. Nó sử dụng symlinking để tạo các phụ thuộc cục bộ.
• Thực thi Tác vụ: Lerna có thể thực thi các lệnh trên nhiều gói song song, tăng tốc quá trình xây dựng và kiểm thử. Nó hỗ trợ chạy các script được định nghĩa trong `package.json`.
• Phát hiện Thay đổi: Lerna có thể phát hiện gói nào đã thay đổi kể từ lần phát hành cuối cùng, cho phép xây dựng và triển khai có mục tiêu.

Ví dụ về cách sử dụng Lerna

Hãy cùng minh họa cách sử dụng Lerna bằng một ví dụ đơn giản. Giả sử chúng ta có một monorepo với hai gói: `package-a` và `package-b`. `package-b` phụ thuộc vào `package-a`.

monorepo/
├── lerna.json
├── package.json
├── packages/
│   ├── package-a/
│   │   ├── package.json
│   │   └── index.js
│   └── package-b/
│       ├── package.json
│       └── index.js

1. Khởi tạo Lerna:

lerna init

Thao tác này tạo `lerna.json` và cập nhật `package.json` gốc. Tệp `lerna.json` cấu hình hành vi của Lerna.

2. Cài đặt Phụ thuộc:

npm install
# or
yarn install

Thao tác này cài đặt các phụ thuộc cho tất cả các gói trong monorepo, dựa trên các tệp `package.json` trong mỗi gói.

3. Chạy lệnh trên nhiều gói:

lerna run test

Thao tác này thực thi script `test` được định nghĩa trong các tệp `package.json` của tất cả các gói có định nghĩa nó.

4. Xuất bản Gói:

lerna publish

Lệnh này phân tích lịch sử commit, xác định gói nào đã thay đổi, tăng phiên bản của chúng dựa trên conventional commits và xuất bản chúng lên npm (hoặc kho lưu trữ bạn đã chọn).

Cấu hình Lerna

Tệp `lerna.json` là trọng tâm của cấu hình Lerna. Nó cho phép bạn tùy chỉnh hành vi của Lerna, chẳng hạn như:

• `packages`: Chỉ định vị trí của các gói trong monorepo. Thường được đặt là `["packages/*"]`.
• `version`: Chỉ định chiến lược quản lý phiên bản. Có thể là `independent` (mỗi gói có phiên bản riêng) hoặc một phiên bản cố định.
• `command`: Cho phép bạn cấu hình các tùy chọn cho các lệnh Lerna cụ thể, chẳng hạn như `publish` và `run`.

Ví dụ về `lerna.json`:

{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "npm",
  "useWorkspaces": true,
  "command": {
    "publish": {
      "conventionalCommits": true,
      "message": "chore(release): publish"
    }
  }
}

Nx: Hệ thống xây dựng thông minh, nhanh chóng và có thể mở rộng

Nx là một hệ thống xây dựng mạnh mẽ cung cấp các tính năng nâng cao để quản lý monorepo. Nó tập trung vào việc xây dựng tăng dần, bộ nhớ đệm tính toán và điều phối tác vụ để cải thiện đáng kể thời gian xây dựng và năng suất của nhà phát triển. Trong khi Lerna chủ yếu tập trung vào việc quản lý các gói, Nx cung cấp một cách tiếp cận toàn diện hơn để quản lý toàn bộ quy trình làm việc của monorepo, bao gồm tạo mã, linting, kiểm thử và triển khai.

Các tính năng chính của Nx

• Xây dựng Tăng dần: Nx phân tích biểu đồ phụ thuộc của các dự án của bạn và chỉ xây dựng lại các dự án đã thay đổi kể từ lần xây dựng cuối cùng. Điều này làm giảm đáng kể thời gian xây dựng.
• Bộ nhớ đệm Tính toán: Nx lưu vào bộ nhớ đệm kết quả của các tác vụ, chẳng hạn như xây dựng và kiểm thử, để chúng có thể được sử dụng lại nếu đầu vào không thay đổi. Điều này tiếp tục tăng tốc chu trình phát triển.
• Điều phối Tác vụ: Nx cung cấp một hệ thống điều phối tác vụ mạnh mẽ cho phép bạn định nghĩa các pipeline xây dựng phức tạp và thực thi chúng một cách hiệu quả.
• Tạo mã: Nx cung cấp các công cụ tạo mã có thể giúp bạn nhanh chóng tạo các dự án, component và module mới, tuân thủ các phương pháp hay nhất và tiêu chuẩn nhất quán.
• Hệ sinh thái Plugin: Nx có một hệ sinh thái plugin phong phú hỗ trợ nhiều công nghệ và framework khác nhau, như React, Angular, Node.js, NestJS, v.v.
• Trực quan hóa Biểu đồ Phụ thuộc: Nx có thể trực quan hóa biểu đồ phụ thuộc của monorepo của bạn, giúp bạn hiểu các mối quan hệ giữa các dự án và xác định các vấn đề tiềm ẩn.
• Lệnh Affected: Nx cung cấp các lệnh để chạy tác vụ chỉ trên các dự án bị ảnh hưởng bởi một thay đổi cụ thể. Điều này cho phép bạn tập trung nỗ lực vào các lĩnh vực cần chú ý.

Ví dụ về cách sử dụng Nx

Hãy cùng minh họa cách sử dụng Nx bằng một ví dụ đơn giản. Chúng ta sẽ tạo một monorepo với một ứng dụng React và một thư viện Node.js.

1. Cài đặt Nx CLI Toàn cầu:

npm install -g create-nx-workspace

2. Tạo một Nx Workspace mới:

create-nx-workspace my-monorepo --preset=react
cd my-monorepo

Thao tác này tạo một Nx workspace mới với một ứng dụng React. Tùy chọn `--preset=react` báo cho Nx biết để khởi tạo workspace với các cấu hình dành riêng cho React.

3. Tạo một Thư viện:

nx generate @nrwl/node:library my-library

Thao tác này tạo một thư viện Node.js mới có tên `my-library`. Nx tự động cấu hình thư viện và các phụ thuộc của nó.

4. Xây dựng Ứng dụng:

nx build my-app

Thao tác này xây dựng ứng dụng React. Nx phân tích biểu đồ phụ thuộc và chỉ xây dựng lại các tệp cần thiết.

5. Chạy Kiểm thử:

nx test my-app

Thao tác này chạy các bài kiểm thử đơn vị cho ứng dụng React. Nx lưu vào bộ nhớ đệm kết quả kiểm thử để tăng tốc các lần chạy kiểm thử tiếp theo.

6. Xem Biểu đồ Phụ thuộc:

nx graph

Thao tác này mở một giao diện web trực quan hóa biểu đồ phụ thuộc của monorepo.

Cấu hình Nx

Nx được cấu hình thông qua tệp `nx.json`, nằm ở thư mục gốc của workspace. Tệp này định nghĩa các dự án trong workspace, các phụ thuộc của chúng và các tác vụ có thể được thực thi trên chúng.

Các tùy chọn cấu hình chính trong `nx.json` bao gồm:

• `projects`: Định nghĩa các dự án trong workspace và cấu hình của chúng, chẳng hạn như thư mục gốc và các mục tiêu xây dựng.
• `tasksRunnerOptions`: Cấu hình trình chạy tác vụ, chịu trách nhiệm thực thi tác vụ và lưu vào bộ nhớ đệm kết quả của chúng.
• `affected`: Cấu hình cách Nx xác định dự án nào bị ảnh hưởng bởi một thay đổi.

Ví dụ về `nx.json`:

{
  "npmScope": "my-org",
  "affected": {
    "defaultBase": "main"
  },
  "implicitDependencies": {
    "package.json": {
      "dependencies": "*",
      "devDependencies": "*"
    },
    ".eslintrc.json": "*"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx-cloud",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"],
        "accessToken": "...",
        "canTrackAnalytics": false,
        "showUsageWarnings": false
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "default"],
      "outputs": ["{projectRoot}/dist"]
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "!{projectRoot}/dist/**/*", "!{projectRoot}/tmp/**/*"],
    "production": ["!{projectRoot}/**/*.spec.ts", "!{projectRoot}/**/*.spec.tsx", "!{projectRoot}/**/*.spec.js", "!{projectRoot}/**/*.spec.jsx"]
  },
  "generators": {
    "@nrwl/react": {
      "application": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "library": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "component": {
        "style": "css"
      }
    },
  }
}

Lerna và Nx: Chọn công cụ nào?

Cả Lerna và Nx đều là những công cụ xuất sắc để quản lý monorepo frontend, nhưng chúng phục vụ các nhu cầu hơi khác nhau. Dưới đây là bảng so sánh để giúp bạn chọn công cụ phù hợp cho dự án của mình:

Tính năng	Lerna	Nx
Trọng tâm	Quản lý Gói	Hệ thống Xây dựng và Điều phối Tác vụ
Xây dựng Tăng dần	Hạn chế (yêu cầu công cụ bên ngoài)	Tích hợp sẵn và tối ưu hóa cao
Bộ nhớ đệm Tính toán	Không	Có
Tạo mã	Không	Có
Hệ sinh thái Plugin	Hạn chế	Phong phú
Đường cong Học tập	Thấp hơn	Cao hơn
Độ phức tạp	Đơn giản hơn	Phức tạp hơn
Trường hợp Sử dụng	Các dự án chủ yếu tập trung vào việc quản lý và xuất bản các gói npm.	Các dự án lớn và phức tạp yêu cầu thời gian xây dựng tối ưu, tạo mã và một hệ thống xây dựng toàn diện.

Chọn Lerna nếu:

• Bạn chủ yếu cần quản lý và xuất bản các gói npm.
• Dự án của bạn có quy mô tương đối nhỏ đến trung bình.
• Bạn thích một công cụ đơn giản hơn với đường cong học tập thấp hơn.
• Bạn đã quen thuộc với npm và Yarn.

Chọn Nx nếu:

• Bạn cần thời gian xây dựng được tối ưu hóa và xây dựng tăng dần.
• Bạn muốn khả năng tạo mã.
• Bạn yêu cầu một hệ thống xây dựng toàn diện với điều phối tác vụ.
• Dự án của bạn lớn và phức tạp.
• Bạn sẵn sàng đầu tư thời gian để học một công cụ mạnh mẽ hơn.

Bạn có thể sử dụng Lerna với Nx không?

Có, Lerna và Nx có thể được sử dụng cùng nhau. Sự kết hợp này cho phép bạn tận dụng khả năng quản lý gói của Lerna trong khi vẫn hưởng lợi từ hệ thống xây dựng được tối ưu hóa và điều phối tác vụ của Nx. Nx có thể được cấu hình như một trình chạy tác vụ cho Lerna, cung cấp khả năng xây dựng tăng dần và bộ nhớ đệm tính toán cho các gói do Lerna quản lý.

Các Thực hành Tốt nhất để Quản lý Monorepo Frontend

Bất kể bạn chọn Lerna hay Nx, việc tuân thủ các thực hành tốt nhất là rất quan trọng để quản lý monorepo frontend thành công:

• Thiết lập Cấu trúc Dự án Rõ ràng: Tổ chức các dự án của bạn một cách hợp lý và nhất quán. Sử dụng quy ước đặt tên rõ ràng cho các gói và thư viện.
• Thực thi Tiêu chuẩn Mã hóa Nhất quán: Sử dụng linters và formatters để đảm bảo phong cách mã nhất quán trên tất cả các dự án. Các công cụ như ESLint và Prettier có thể được tích hợp vào quy trình làm việc của bạn.
• Tự động hóa Quy trình Xây dựng và Kiểm thử: Sử dụng các pipeline CI/CD để tự động hóa quy trình xây dựng, kiểm thử và triển khai. Các công cụ như Jenkins, CircleCI và GitHub Actions có thể được sử dụng.
• Thực hiện Đánh giá Mã (Code Reviews): Tiến hành đánh giá mã kỹ lưỡng để đảm bảo chất lượng và khả năng bảo trì mã. Sử dụng pull request và các công cụ đánh giá mã.
• Giám sát Thời gian Xây dựng và Hiệu suất: Theo dõi thời gian xây dựng và các chỉ số hiệu suất để xác định các nút thắt cổ chai và các lĩnh vực cần cải thiện. Nx cung cấp các công cụ để phân tích hiệu suất xây dựng.
• Tài liệu hóa Cấu trúc và Quy trình Monorepo của bạn: Tạo tài liệu rõ ràng giải thích cấu trúc monorepo của bạn, các công cụ và công nghệ được sử dụng, và các quy trình phát triển.
• Áp dụng Conventional Commits: Sử dụng conventional commits để tự động hóa quy trình quản lý phiên bản và phát hành. Lerna hỗ trợ conventional commits ngay từ đầu.

Kết luận

Monorepo frontend mang lại những lợi thế đáng kể trong việc quản lý các dự án lớn và phức tạp, bao gồm chia sẻ mã, quản lý phụ thuộc đơn giản hóa và cải thiện khả năng hợp tác. Lerna và Nx là những công cụ mạnh mẽ có thể giúp bạn quản lý monorepo frontend hiệu quả. Lerna là một lựa chọn tuyệt vời để quản lý các gói npm, trong khi Nx cung cấp một hệ thống xây dựng toàn diện hơn với các tính năng nâng cao như xây dựng tăng dần và tạo mã. Bằng cách xem xét cẩn thận nhu cầu của dự án và tuân thủ các thực hành tốt nhất, bạn có thể áp dụng thành công monorepo frontend và gặt hái những lợi ích của nó.

Hãy nhớ xem xét các yếu tố như kinh nghiệm của nhóm, độ phức tạp của dự án và yêu cầu hiệu suất khi lựa chọn giữa Lerna và Nx. Hãy thử nghiệm cả hai công cụ và tìm ra công cụ phù hợp nhất với nhu cầu cụ thể của bạn.

Chúc may mắn với hành trình monorepo của bạn!