Làm cách nào để xuất bản thành phần React với nội dung tĩnh lên npm?

Question

Tôi đang phát triển thành phần React và tôi muốn xuất bản thành npm, nhưng tôi không thể tìm thấy bất kỳ phương pháp hay nhất nào về cách phân phối nội dung thống kê (như css và hình ảnh) cùng với thành phần. Vâng, tất nhiên tất cả các nguồn nên được transpiled để đồng bằng js và đồng bằng css. Trong trường hợp của tất cả mọi thứ js là đơn giản - người dùng sẽ chỉ cần nó với bất kỳ bundler ông đang sử dụng. Nhưng trong trường hợp của css nó khó khăn. Tôi không muốn sử dụng kiểu nội tuyến vì tôi muốn thành phần có thể dễ dàng tùy chỉnh (bằng cách ghi đè css). Vì vậy, tôi đoán cách duy nhất là yêu cầu người dùng sao chép tệp css từ node_modules đến nơi anh ta cần (hoặc nhập nó bằng SASS hoặc bất kỳ bộ tiền xử lý nào khác). Nhưng nếu tệp css của tôi có tham chiếu đến các tài sản tĩnh khác (như hình ảnh, phông chữ, v.v ...) thì sao? Các con đường sẽ hoàn toàn rối tung lên tôi đoán. Vì vậy, tôi quan tâm đến những gì là đúng cách để làm điều đó? Làm cách nào để người dùng dễ dàng sử dụng hơn và cách tránh những cạm bẫy phổ biến?

Answer 1

Đó thực sự là một câu hỏi hay. Tôi không chắc chắn nếu câu trả lời của tôi là những gì bạn đang mong đợi (nó sẽ triết học hơn là kỹ thuật), nhưng tôi nghĩ rằng đó là một điểm khởi đầu tốt.

Trước hết, tôi nghĩ không có "cách đúng" để thực hiện. Hãy tưởng tượng một nhóm (nó có thể là một nhóm người duy nhất) duy trì một gói, cách họ đặt tên cho mọi thứ là cách có ý nghĩa với họ, và đó là "đúng cách". Vì vậy, không có "tiêu chuẩn" để đặt tên cho mọi thứ, đặt tên cho mọi thứ theo cách bạn nghĩ là đúng và bạn tốt để đi.

Bây giờ, IMHO, những người sẽ sử dụng gói của bạn nên lo lắng về cách sử dụng nó, không phải bạn. Vì người đó có thể đưa ra lựa chọn về những gì nó muốn sử dụng hay không từ gói của bạn và cách họ muốn sử dụng nó.

Ví dụ: nếu sử dụng webpack, chúng tôi có thể sử dụng url-loader, điều này sẽ giải quyết vấn đề url cho chúng tôi.

Nếu không sử dụng webpack, thì những gì bạn có thể làm là cung cấp tài liệu nhất quán về gói của bạn và cách sử dụng nó. Người dùng của bạn sẽ theo dõi điều này, sử dụng các công cụ họ muốn. Nếu người dùng của bạn muốn sử dụng grep và sed trong luồng công việc của họ, điều đó là ổn, vì họ nằm trong tầm kiểm soát của nó.

Ngoài ra - bây giờ nói về CSS cụ thể -, nếu bạn muốn cung cấp kiểu sử dụng hình ảnh, bạn có thể thử sử dụng một bộ tiền xử lý hoặc một cái gì đó tương tự, và cho phép người dùng của bạn tùy chỉnh một số biến để thiết lập đường dẫn của sự vật. Ví dụ, hãy tưởng tượng bạn sẽ nói assets-path, sử dụng SASS, người dùng của bạn chỉ cần thêm $assets-path: '/path/to/assets/' và biên dịch CSS.

Bất cứ khi nào tôi sử dụng gói, tôi có xu hướng nghĩ "okay, có rất nhiều thứ ở đó, tôi không cần phải sử dụng tất cả, tôi sẽ sử dụng những thứ tôi muốn" và nếu Tôi sẽ sử dụng gói của bạn và tôi biết rằng sẽ có các tệp CSS, tôi sẽ cố gắng tìm một bộ công cụ tốt để giúp tôi.

Nếu bạn muốn làm theo một số "tiêu chuẩn", hãy thử kiểm tra các dự án phản ứng phổ biến nhất trên github, nhưng, như tôi đã nói, cách họ đặt tên công cụ là cách hợp lý với chúng. Nó có thể không có ý nghĩa với bạn! :)

Hy vọng điều đó sẽ hữu ích!