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.