Hướng Dẫn Sử Dụng Patch Package Để Tùy Chỉnh NPM Package Đáp Ứng Nhu Cầu Dự Án

Giới thiệu

Trong quá trình phát triển phần mềm, việc tìm kiếm một npm package phù hợp với nhu cầu là điều không hề dễ dàng. Đôi khi, bạn có thể gặp phải những đoạn code hoặc hàm trong package không thực sự đáp ứng yêu cầu của mình. Trong trường hợp này, có một số phương pháp để giải quyết vấn đề này:

Tìm kiếm repository của package, thực hiện cập nhật code và tạo Pull Request.
Fork repository ra một phiên bản riêng và phát hành nó với tên package mới.
Clone code từ package và sửa đổi để sử dụng trực tiếp trong dự án.

Tuy nhiên, cả ba cách trên đều gặp phải những vấn đề như tốn thời gian, khó khăn trong việc được merge code, hoặc có nguy cơ bị lỗi thời khi có phiên bản mới ra mắt. Để giải quyết những vấn đề này, mình đã tìm ra một phương pháp hiệu quả hơn, đó là sử dụng patch package.

Thao tác này cho phép bạn áp dụng các thay đổi một cách dễ dàng và tự động, giúp bạn cập nhật code giống như cách bạn commit trong Git.

Tạo Patch Package

Để tạo patch, bạn có thể thực hiện các bước sau tùy thuộc vào package manager mà bạn đang sử dụng:

Với pnpm: Tính năng này đã được tích hợp sẵn trong pnpm CLI.
Với yarn: Bạn cần cài thêm package có tên là patch-package.

Trong bài viết này, mình sẽ tập trung vào pnpm vì tính tiện lợi của nó.

Ví dụ cụ thể:

Yêu cầu:
- Vấn đề: Dự án của mình sử dụng Vue với Server-Side Rendering (SSR). Đôi khi dữ liệu trong components bị lỗi, dẫn đến việc render không thành công. Thay vì để lỗi này dừng toàn bộ quá trình, mình muốn có một trang lỗi hiển thị rõ ràng.
- Giải pháp: Các môi trường khác nhau mà dự án của mình deploy là dev, stag, và prod. Trong dev và stag, mình vẫn giữ logic render ban đầu của Vue, nhưng trong môi trường prod, mình sẽ thêm cơ chế xử lý lỗi để ghi log mà không khiến toàn bộ render bị ảnh hưởng.
Thực hiện các bước sau:
- Mở terminal và điều hướng đến thư mục dự án của bạn.
- Sử dụng lệnh pnpm để chỉnh sửa package @vue/server-renderer:
  Copy

pnpm patch @vue/server-renderer
```

Sau khi chạy lệnh, chọn tùy chọn thích hợp và xác nhận.
Commit các thay đổi cho patch:
Copy

pnpm patch-commit '~/js/blog/.pnpm_patches/@vue/server-renderer@3.4.23'
```

Chi tiết kỹ thuật:
- Mình sẽ dùng IDE để mở thư mục chứa code của @vue/server-renderer. Trong package này, Vue có các env là prod và default.
- Dự án của mình chạy trong môi trường production và sử dụng type module. Mình sẽ mở file server-renderer.esm-bundler.js và thực hiện các bước sau:
  - Tìm kiếm đoạn code xử lý render và nhận thấy có một try block mà không có catch block. Khi xảy ra lỗi, đoạn code này sẽ throw exception và làm dừng toàn bộ quá trình render.
  - Để giải quyết vấn đề này, bạn chỉ cần thêm một catch block. Tuy nhiên, cần chú ý rằng không phải môi trường nào cũng xử lý giống nhau; trong các môi trường dev và stag, việc throw exception là hợp lý để phát hiện lỗi.
  - Do đó, mình sẽ điều chỉnh đoạn code để xử lý dựa trên biến môi trường SKIP_RENDER_ERROR.

Ứng Dụng Patch

Sau khi tạo patch, dự án sẽ có thư mục patches. Đây là nơi lưu trữ các thay đổi theo từng package mà bạn đã thực hiện.

Đối với pnpm, sau khi cài đặt xong, patch sẽ tự động được áp dụng. Nếu bạn sử dụng yarn, hãy thêm command vào scripts trong package.json:

json Copy

yarn patch-package

Kết Luận

Mình vô cùng yêu thích việc đóng góp và tạo ra các package mã nguồn mở. Tuy nhiên, việc nhận được chấp thuận để phát hành phiên bản mới không phải lúc nào cũng dễ dàng. Sử dụng patch package không chỉ là giải pháp tạm thời mà còn giúp bạn tiết kiệm thời gian và nỗ lực để tập trung vào những việc quan trọng hơn.

Hãy theo dõi blog của mình để cập nhật thêm nhiều bài viết hữu ích hơn tại: https://stacktify.com/blog/su-dung-patch-package-tuy-chinh-npm-package.
source: viblo