Cách sử dụng TypeScript trong thiết lập Monorepo

Thiết lập monorepo cho phép bạn quản lý nhiều gói hoặc dự án trong một kho lưu trữ duy nhất. Với TypeScript, thiết lập này đặc biệt mạnh mẽ để chia sẻ các loại, giao diện và thậm chí cả tiện ích trên các gói khác nhau. Hướng dẫn này sẽ hướng dẫn bạn cách thiết lập TypeScript trong môi trường monorepo.

1. Thiết lập Monorepo

Để thiết lập monorepo, bạn có thể sử dụng các công cụ như không gian làm việc npm hoặc không gian làm việc yarn. Các công cụ này cho phép bạn quản lý nhiều gói trong cùng một kho lưu trữ và giúp chia sẻ mã dễ dàng giữa các dự án.

1.1 Khởi tạo Monorepo

Đầu tiên, hãy tạo một thư mục mới cho monorepo của bạn và khởi tạo nó bằng npm hoặc yarn.

mkdir my-monorepo
cd my-monorepo
npm init -y

Sau đó, cấu hình không gian làm việc trong package.json của bạn:

{
  "name": "my-monorepo",
  "version": "1.0.0",
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

Thiết lập này cho npm hoặc yarn biết rằng tất cả các gói sẽ nằm bên trong thư mục packages.

2. Thêm các gói vào Monorepo

Tạo hai gói trong monorepo của bạn. Đối với ví dụ này, chúng tôi sẽ tạo một gói shared cho mã có thể tái sử dụng và một gói web-app cho ứng dụng frontend.

mkdir -p packages/shared
mkdir -p packages/web-app

Bên trong mỗi gói, khởi tạo package.json:

cd packages/shared
npm init -y

cd ../web-app
npm init -y

3. Thêm TypeScript vào Monorepo

Tiếp theo, chúng ta sẽ thiết lập TypeScript. Cài đặt TypeScript và các dependency cần thiết tại gốc monorepo của bạn:

npm install typescript --save-dev

Tạo tsconfig.json cấp gốc để xác định cấu hình TypeScript cho toàn bộ monorepo:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["packages/*/src"]
    },
    "composite": true,
    "declaration": true,
    "outDir": "dist",
    "rootDir": ".",
    "skipLibCheck": true,
    "module": "ESNext",
    "target": "ES6",
    "moduleResolution": "node"
  },
  "include": ["packages/*"]
}

Chìa khóa ở đây là tùy chọn paths, cho phép TypeScript hiểu các lệnh nhập từ các gói khác nhau trong monorepo.

4. Cấu hình TypeScript trong mỗi gói

Mỗi gói cần có tsconfig.json riêng để hoạt động bình thường trong monorepo. Sau đây là cấu hình ví dụ cho gói shared:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "dist"
  },
  "include": ["src"]
}

Và đối với gói web-app:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "dist"
  },
  "include": ["src"]
}

Bây giờ, TypeScript có thể được sử dụng trong từng gói và các cấu hình được chia sẻ từ thư mục gốc tsconfig.json.

5. Thêm Mã TypeScript vào các Gói

Hãy thêm một số mã TypeScript mẫu vào cả hai gói. Trong gói shared, hãy tạo một thư mục src và thêm một tệp TypeScript:

mkdir -p packages/shared/src
touch packages/shared/src/index.ts

Trong index.ts, xuất một hàm đơn giản:

export const greet = (name: string): string => {
  return `Hello, ${name}!`;
}

Trong gói web-app, hãy tạo một thư mục src và một tệp index.ts:

mkdir -p packages/web-app/src
touch packages/web-app/src/index.ts

Bây giờ, hãy nhập hàm chia sẻ:

import { greet } from 'shared';

console.log(greet('TypeScript Monorepo'));

6. Xây dựng Monorepo

Để biên dịch tất cả mã TypeScript trong monorepo, chúng ta cần sử dụng trình biên dịch TypeScript. Tại gốc của monorepo, hãy chạy:

npx tsc --build

Lệnh này sẽ biên dịch tất cả các gói bằng cách làm theo các tệp tsconfig.json tương ứng.

Phần kết luận

Trong hướng dẫn này, chúng tôi đã đề cập đến cách thiết lập và sử dụng TypeScript trong monorepo. Bằng cách sắp xếp mã của bạn trong cấu trúc monorepo, bạn có thể dễ dàng chia sẻ mã trên nhiều gói, giúp quy trình phát triển của bạn hiệu quả hơn. Với TypeScript mạnh mẽ và tham chiếu dự án, thiết lập này hoàn hảo cho các ứng dụng quy mô lớn hoặc thư viện dùng chung.