Chắc hẳn tất cả mọi người khi làm việc với React JS đều phải biết tới NPM, đây thật sự là một công cụ tuyệt vời để quản lý các thư viện mã nguồn mở trong thế giới Javascript nói chung và React JS nói riêng. Vậy làm thế nào để publish một component của riêng mình lên NPM?
Việc chia tách một ứng dụng lớn thành những component nhỏ hơn sẽ giúp chúng ta quản lý code được tốt hơn, cũng như có thể tái sử dụng lại được nhiều lần. Đặc biệt là trong React JS thì việc này lại càng thật sự cần thiết, cách thông thường chúng ta hay làm là sẽ copy code của các component hay sử dụng đi sử dụng lại vào cất ở đâu đó và khi cần thì copy ra xài. Thay vì phải thực hiện thủ công như vậy thì chúng ta có 1 cách khác hay hơn là đóng gói component đó lại và publish nó lên NPM để khi cần chỉ cần 1 lệnh install là xong!
Chúng ta có thể publish lên NPM ở chế độ private để chỉ có mình sử dụng thôi hoặc chế độ public để chia sẻ cho cộng đồng cùng sử dụng. Sau khi tìm hiểu qua một số hướng dẫn trên internet thì tôi thấy có một thư viện hỗ trợ thực hiện việc này khá tốt và cũng dễ sử dụng. Thư viện đó tên là create-react-library, nó là một CLI nhỏ gọn giúp chúng ta dễ dàng tạo ra một React component có thể tái sử dụng thông qua NPM.
Cách sử dụng
Để publish một package mới lên NPM trước tiên chúng ta cần truy cập vào đường dẫn https://www.npmjs.com/ và search thử tên package mà chúng ta định publish có trùng với ai khác chưa, nếu có thì hãy chọn 1 tên khác.
Tiếp theo ta mở terminal lên và sử dụng lệnh sau để khởi tạo một React component
1 | npx create-react-library <your-package-name> |
Ví dụ trong bài hướng dẫn này tôi sẽ tạo một Flashcard component, vì vậy tôi sẽ khởi tạo như sau:
1 | npx create-react-library react-flashcard |
Chúng ta tiến hành nhập vào các thông tin cần thiết để khởi tạo package để publish lên NPM. Sau khi nhập đầy đủ các thông tin theo yêu cầu thì một thư mục react-flashcard được sinh ra tự động từ create-react-library, đây chính là cấu trúc thư mục được tạo sẵn để chúng ta viết React component và đóng gói theo đúng chuẩn của NPM.
Tiếp theo chúng ta mở 2 cửa sổ terminal lên, một bên sẽ để chạy lệnh sau để theo dõi sự thay đổi code trong thư mục src và rebuild lại mỗi khi chúng ta lập trình cho React component này.
1 | cd react-flashcard && npm start |
Và cửa sổ còn lại sẽ chạy một ứng dụng React với component mà chúng ta đang viết được nhúng sẵn vào trong đó.
1 | cd react-flashcard |
Đây là code mẫu cho package react-flashcard của tôi: https://github.com/ozuit/react-flashcard
Publish lên NPM
Sau khi đã hoàn tất component React của mình rồi thì chúng ta cần login vào npm từ terminal của mình để có thể publish lên cloud bằng cách chạy câu lệnh sau:
1 | npm adduser |
Login vào bằng tài khoản NPM của mình (click vào đây để đăng ký nếu chưa có tài khoản). Sau khi login thành công thì chỉ cần chạy tiếp lệnh bên dứoi để publish package của mình lên NPM ở chế độ private
1 | npm publish |
hoặc chạy lệnh sau để publish lên NPM ở chế độ public
1 | npm publish --access=public |
Đây là package của tôi sau khi được publish lên NPM: https://www.npmjs.com/package/react-flashcard
Deploy demo
Một điểm thú vị nữa ở thư viện create-react-library là nó cho phép chúng ta có thể deploy nhanh một demo cho React component mà chúng ta vừa tạo lên Github page thông qua câu lệnh bên dưới:
1 | npm run deploy |
Đây là demo Flashcard component của tôi: https://ozuit.github.io/react-flashcard/
