Sử dụng webpack để tạo thư viện nguyên cảo với gõ file

Question

Hiện nay quá trình của tôi để xây dựng là:

• Viết rất nhiều tác phẩm nguyên cảo với cú pháp mô-đun ES6
• Tạo một index.ts đó tái xuất khẩu tất cả các module từ một điểm
• Compile để CommonJS + Hệ thống
• Output Descriptor/Gõ file

Điều này dẫn đến một tệp index.js tái xuất tất cả các tệp nội bộ mà không cần nhà phát triển tiêu thụ nó cần biết về nó, cũng như nhiều tệp d.ts phản ánh cấu trúc tệp.

Bây giờ công trình này, nhưng nếu tôi sử dụng phương pháp này cho trình duyệt, tôi sẽ cần gói web lên tất cả js hoặc sẽ là một cơn ác mộng yêu cầu http trong tất cả các tệp riêng lẻ. Hiện tại thư viện này sẽ được sử dụng như là một sự phụ thuộc cho các thư viện khác, do đó, nó không phải là một điểm kết thúc cho logic hay bất cứ điều gì nó là một mô-đun/thư viện.

Bây giờ câu hỏi chính là với webpack Tôi biết tôi có thể tải TS và nhận mô-đun commonJS, tuy nhiên tôi không thể tìm thấy bất kỳ cách nào để tạo các tệp d.ts với webpack. Vì vậy, có một cách để tôi sử dụng webpack như trình biên dịch/đóng gói trong kịch bản này và có một đầu ra my-lib.js và my-lib.d.ts thay vì cách tiếp cận hiện tại mà mang lại rất nhiều tệp riêng lẻ.

== Làm rõ thêm về trường hợp sử dụng ==

Chỉ cần cố gắng và chắc chắn rằng tất cả mọi người là trên cùng một trang ở đây khi tôi nói nó là một thư viện mà có thể được tái sử dụng những gì tôi có nghĩa là điều này là cái gì đó sẽ được tải thông qua npm hoặc jspm hoặc một cái gì đó như là một phụ thuộc module cho các mô-đun khác. Vì vậy, ví dụ chúng ta giả vờ jquery không tồn tại và tôi sẽ tạo ra nó nhưng viết nó trong bản đánh số cho các nhà phát triển khác để tiêu thụ trong cả JS và TS. Giờ đây, kiểu chữ xuất ra cả tệp js và tệp d.ts, tệp js sẽ được sử dụng như bạn mong đợi, nhưng tệp d.ts giải thích cho các tệp bản ghi khác những loại chứa trong thư viện. Vì vậy, giả sử tôi đã phát triển jquery trong TS như được liệt kê ở trên, sau đó tôi muốn xuất bản đầu ra này (có thể được tạo bởi webpack hoặc tsc) trên npm/jspm/bower, v.v. Vì vậy, những người khác có thể sử dụng lại thư viện này trong các dự án của riêng họ.

Vì vậy, webpack thường được sử dụng để đóng gói một "ứng dụng" nếu bạn muốn, trong đó có các mối quan tâm logic và kinh doanh và được tiêu thụ trực tiếp như một điểm vào cho một tập hợp lớn hơn các mối quan tâm. Trong ví dụ này, nó sẽ được sử dụng như một bước biên dịch và đóng gói cho một thư viện và sẽ được tiêu thụ thông qua var myLib = require("my-lib"); hoặc tương tự.

Answer 1

Việc tạo tệp .d.ts không liên quan đến webpack. Với webpack, bạn có thể sử dụng trình tải-ts hoặc trình tải-kiểu-biểu mẫu tuyệt vời. Cả hai đều sử dụng tsconfig.json. Những gì bạn cần làm là để thêm declaration: true vào tsconfig.json.

Tôi cũng khuyên bạn nên xem typescript-library-starter. Bạn sẽ tìm thấy cách thiết lập ở đó, bao gồm các định nghĩa kiểu và gói UMD :).