gián tiếp tham khảo URL Javascript xa

Question

Chúng tôi muốn sử dụng Rollup với góc 4/nguyên cảo và NPM Chúng tôi có các yêu cầu sau đây trong công ty chúng tôi:

• Một số đội tạo ra thư viện JS mà cần phải được tập trung (như một CDN)
• Các thư viện này nằm sau URL từ xa và không nên tồn tại cục bộ trong ứng dụng (lý do là các thư viện đó thay đổi thường xuyên)
• Người tiêu dùng của thư viện (ứng dụng) cài đặt gói npm để sử dụng thư viện
• Gói npm được cài đặt cục bộ có chứa một tệp mặt tiền Javascript hoặc gói đặt liên kết từ xa đến thư viện JS hiện có đằng sau URL từ xa
• Gói npm cũng chứa tệp định nghĩa Typescript
• Mục tiêu là người tiêu dùng không t cần thêm thẻ tập lệnh có URL (anh ấy không nên biết điều này)
• Tệp Javascript được cài đặt cục bộ có thể được đóng gói cùng với mã ứng dụng
• Phiên bản mới của thư viện sẽ tương thích ngược nếu có thể

Cách tốt nhất để đạt được điều này bằng cách sử dụng Typescript/Javascript/NPM/Rollup là gì? Chúng tôi sẽ sử dụng cú pháp ES2015 được chuyển thành cú pháp commonJS.

Answer 1

Giải pháp quá phức tạp. Các nhóm tạo các thư viện JS này nên đặt một gói sau một URL. Các nhóm nên đặt URL và eTag lưu vào bộ đệm nên được bật trên các gói đó để người dùng luôn có phiên bản mới nhất. Nếu phiên bản mới của gói được triển khai, máy khách http/1 sẽ tự động phải tải xuống lại gói.

Người dùng phải đặt chính URL hoặc cơ chế có tệp json có thể được thiết lập nơi thông tin nằm trong tệp json (như tệp kê khai).

Nhà phát triển ứng dụng có thể nhận tệp d.ts qua npm chứa tất cả các kiểu của thư viện khuôn khổ. Bạn sẽ không cần nhập mô-đun vì đó là một URL từ xa. Vì vậy, bạn không cần phải nhập bất cứ điều gì vì nó được đảm bảo rằng thư viện được tham chiếu vì một thẻ script.

Answer 2

Tôi không nghĩ rằng rollup có một cái gì đó tương tự như webpack dll plugin, vì vậy, câu trả lời của tôi có thể xuất hiện không liên quan nhưng tôi nghĩ bạn có thể giả định nó như là một điểm khởi đầu tốt và bắt đầu tìm kiếm một cái gì đó tương tự trong rollup.

một thư viện sống trong một CDN:

1. Tạo một DLL với nó tương ứng DLL Reference mà chính xác mô tả làm thế nào để đòi hỏi các module xuất khẩu.
2. Sử dụng đường dẫn tự giải thích và giữ cho nó nhất quán như https://cdn.mydomain.com/<libraryName>/<version>/<libraryName>.{js,json,d.ts} (người yêu cầu phải thêm ?<cacheBustingUID> để tránh các sự cố lưu vào bộ nhớ cache của máy khách).Ngoài phiên bản bình thường, tôi cũng khuyên bạn nên sử dụng từ khóa latest cho trường version, điều này để đạt được số always true path trỏ đến phiên bản mới nhất của gói: (https://cdn.mydomain.com/foo/1.0.0/foo.{js,json,d.ts} và https://cdn.mydomain.com/foo/latest/foo.{js,json,d.ts}).
3. giải quyết tất cả các file và khởi động server dev (nhớ rằng webpack cho phép trả lại một lời hứa như một cấu hình)

module.exports = env => { 
    const libs = ((name, version, exts) => (
    exts.map(ext => `https://cdn.mydomain.com/${name}/${version}/${name}.${ext}`) 
))('foo', 'latest', ['js', 'd.ts', 'json']) 

    return Promise 
    .all(libs.map(fetch)) 
    .then([library, definitions, DLLReference] => { 
     // what to do? 
     // you can also inject the dynamic paths through `webpackDefinePlugin` 
    }) 
}