Giới thiệu

Chào mọi người,

Trong bài viết này, chúng ta sẽ khám phá cách xây dựng một dự án mới sử dụng phương pháp monorepo, kết hợp giữa ứng dụng web React + Vite và ứng dụng di động React Native. Mục tiêu của chúng tôi là tạo ra một mã nguồn chia sẻ cao giữa hai nền tảng này.

Mục tiêu của Dự án

Chia sẻ UI & Logic: Tạo một thư mục chung (packages/shared) chứa các thành phần, hooks và tiện ích được sử dụng cho cả web và mobile.
Cây phụ thuộc duy nhất: Sử dụng Yarn/NPM workspaces để có một node_modules duy nhất, đảm bảo các phiên bản phụ thuộc được đồng bộ.
Thành phần đa nền tảng: Viết một thành phần (ví dụ: Button.tsx) để nó có thể hoạt động trên web thông qua Vite và trên di động thông qua Metro, có thể sử dụng react-native-web cho việc hiển thị trên web.
Phong cách thống nhất: Sử dụng Tailwind CSS cho ứng dụng web, nativewind cho React Native, lý tưởng là chia sẻ cùng một tệp tailwind.config.js.
Xây dựng bằng một lệnh: Tạo một script cấp root (ví dụ: npm run build) để xây dựng cả ứng dụng web (vite build) và ứng dụng di động trong một lần.

Cấu trúc Monorepo

H2: Cấu trúc thư mục

Để Vite và Metro có thể hợp tác mà không gặp vấn đề, cấu trúc thư mục của bạn có thể như sau:

Copy

my-monorepo/
├── packages/
│   ├── shared/
│   │   ├── components/
│   │   ├── hooks/
│   │   └── utils/
│   ├── web/
│   │   └── vite.config.js
│   └── mobile/
│       └── metro.config.js
└── package.json

H3: Hướng dẫn cấu hình Vite và Metro

Để kết hợp Vite và Metro, bạn cần đảm bảo rằng cả hai công cụ đều được cấu hình đúng cách. Dưới đây là một số mẹo:

HMR (Hot Module Replacement): Đảm bảo rằng HMR được kích hoạt trong cả hai cấu hình để có thể phát triển liên tục mà không cần tải lại trang.
Giải quyết module: Sử dụng alias trong cả hai cấu hình để đảm bảo rằng các module được tìm thấy dễ dàng.
Chia sẻ tài sản: Đảm bảo rằng các tài sản như hình ảnh và phông chữ có thể được chia sẻ giữa hai ứng dụng mà không gặp vấn đề.

Công cụ và Trừu tượng

H2: Sử dụng Solito

Công cụ như Solito có thể giúp quản lý sự khác biệt giữa vite.config.js và metro.config.js một cách thống nhất. Bạn có thể tham khảo hướng dẫn sử dụng Solito để dễ dàng chia sẻ mã nguồn giữa các nền tảng.

Ảnh hưởng của Kiến trúc Mới của React Native

H2: Kiến trúc Fabric và TurboModules

Với Fabric và TurboModules trở thành tiêu chuẩn mới, có một số điểm cần lưu ý khi thực hiện alias react-native thành react-native-web hoặc khi chia sẻ mã nguồn:

Thử nghiệm với các thành phần: Đảm bảo rằng các thành phần được viết với kiến trúc mới hoạt động tốt trên cả hai nền tảng.
Kiểm tra hiệu suất: Đánh giá hiệu suất của ứng dụng khi sử dụng các thành phần chia sẻ để đảm bảo không có vấn đề về tốc độ.

Ví dụ thực tế

H2: Tài nguyên mở

Có một số kho mã nguồn mở hoặc boilerplate có thể tham khảo để thấy rõ cách thiết lập này với Kiến trúc Mới được kích hoạt đầy đủ:

Mẹo và Lưu ý

H3: Mẹo hiệu suất

Giảm số lượng thư viện: Cố gắng giảm thiểu số lượng thư viện phụ thuộc để giữ cho ứng dụng nhẹ nhàng và nhanh chóng.
Sử dụng Lazy Loading: Tải các thành phần chỉ khi cần thiết để tăng tốc độ tải trang.

H3: Cạm bẫy thường gặp

Không đồng bộ hóa phiên bản: Đảm bảo rằng tất cả các thư viện được đồng bộ hóa phiên bản để tránh xung đột giữa web và mobile.
Quản lý trạng thái: Sử dụng một giải pháp quản lý trạng thái chung giữa hai nền tảng để tránh trùng lặp mã.

Kết luận

Việc xây dựng một monorepo với Vite và React Native có thể mang lại nhiều lợi ích, bao gồm khả năng chia sẻ mã cao và quản lý phụ thuộc dễ dàng. Tuy nhiên, cần chú ý đến các cạm bẫy và thực hành tốt để đảm bảo dự án thành công.

H3: Hãy chia sẻ ý kiến của bạn

Nếu bạn đã từng làm việc với thiết lập này hoặc có bất kỳ khuyến nghị nào về quy trình làm việc sẵn sàng cho sản xuất, hãy chia sẻ với chúng tôi dưới đây. Cảm ơn bạn đã đọc!

Cách Tốt Nhất Xây Dựng Monorepo Vite + React Native