Trình duyệt - Cách bao gồm các tập lệnh bên thứ ba không được mua công khai

Question

Tôi mới sử dụng trình duyệt và việc sử dụng nó không hoàn toàn rõ ràng đối với tôi mặc dù các lợi ích dường như hấp dẫn.

Tôi có một vài câu hỏi và hy vọng ai đó có thể làm rõ.

1. Tôi đã xem các bài đăng trên blog về cách sử dụng browserify-shim trong package.json để bao gồm thư viện của bên thứ ba như jquery và bootstrap. Tôi cũng đã thấy các bài đăng nơi các công cụ như gulp được sử dụng tạo tệp bó. Tôi dường như không thể tìm thấy một câu trả lời tốt về lý do tại sao browserify-shim là cần thiết nếu các công cụ như gulp có thể tự động hóa quá trình. Ai đó có thể vui lòng làm sáng tỏ không? Tại sao browserify-shim lại yêu cầu? Tôi cảm thấy dung dịch gulp là một chút sạch hơn mặc dù có liên quan nhiều hơn một chút. Nó sẽ không gây ô nhiễm package.json với trình duyệt cụ thể những thứ đó là một điều xây dựng và do đó đi cùng với gulp (chỉ ý kiến ​​cá nhân của tôi)

2. Làm thế nào để đối phó với thư viện của bên thứ ba không có trong npm và cũng không công cộng? Ví dụ: chúng tôi mua tập lệnh từ bên thứ ba. Kịch bản đó không phải là bất kỳ js phổ biến nào, nhưng là một tệp js thông thường với một số phụ thuộc (ví dụ, trên jquery và gạch dưới).

Answer 1

Browserify cho phép bạn chụp thế giới của Node và bó nó lên để giao cho một trình duyệt. Nó hiểu các module Node, xác định các phụ thuộc thông qua các câu lệnh CommonJS require.

Nhưng nếu bạn có một số mã JS hoặc thư viện mà không định nghĩa là một mô-đun Node và không CommonJS không hỗ trợ? Nhập browserify-shim. Nó cung cấp một trình bao bọc shim xung quanh bất kỳ tập lệnh nào, như tập lệnh bên thứ ba riêng tư của bạn, để nó có thể được định nghĩa và được sử dụng như một mô-đun Nút mà Browserify hiểu.

Việc sử dụng browserify-shim hoàn toàn trực giao với cách bạn thực hiện Browserify. Về cơ bản có hai lựa chọn ở đó: A) Sử dụng Browserify's command line API hoặc B) Sử dụng Browserify's JS API.

Sử dụng một công cụ xây dựng, như Gulp, ngụ ý tùy chọn thứ hai, kể từ khi bạn muốn sử dụng API JS Browserify tại Gulp bạn xây dựng kịch bản (ví dụ: gulpfile.js). Rất nhiều người thích sử dụng Gulp vì nó có một hệ sinh thái tốt của các plugin cho phép bạn làm nhiều hơn là chỉ gọi Browserify (ví dụ: biên dịch CoffeeScript, biên dịch SASS, chạy JSHint, v.v.).

Vì vậy, để giải đáp thắc mắc cụ thể của bạn:

1. Browserify-shim chỉ là cần thiết nếu bạn có mã JS rằng không phải là viết như một Node/CommonJS mô-đun mà bạn cần phải bó qua Browserify. Để làm như vậy, bạn sẽ cần phải thông báo cho browserify-shim biết các tệp nào là shim làm mô-đun (và những phụ thuộc nào chúng có) trong package.json. Lưu ý rằng điều này hoàn toàn không liên quan đến Gulp; vì vậy bạn sẽ cần nó cho dù bạn sử dụng Gulp hay không.

2. Điều bạn mô tả là trường hợp sử dụng hoàn hảo của browserify-shim. Đặt (các) tập lệnh của bên thứ ba trong dự án của bạn, định cấu hình các tệp thành các mô-đun trong gói.json theo tài liệu của b-shim, require chúng trong mã của bạn và thực thi Browserify để gói chúng với mã của bạn. Bạn cũng có thể bó chúng lại một cách riêng biệt, đặt chúng vào dự án của riêng mình, vv - tuy nhiên bạn muốn cấu trúc nó.

Một vài điều cần lưu ý:

• Bạn có thể Shim chỉ là về bất cứ thư viện JS theo cách này.
• Làm mờ thư viện JS thành mô-đun Nút thay đổi phạm vi toàn cục thành phạm vi riêng. Hy vọng rằng mọi thứ trong thư viện được đặt tên để tất cả chức năng của nó có thể được xuất dưới dạng một mô-đun duy nhất, nhưng nếu không, bạn có thể phải sửa đổi mã mờ để đính kèm một cách rõ ràng vào window (dễ dàng nhưng không được khuyến nghị) hoặc chia nhỏ mã thành các tệp/mô-đun riêng biệt.
• Cả Browserify và Gulp đều sử dụng các luồng trong API JS của họ, nhưng Browserify sử dụng các luồng Node gốc trong khi Gulp sử dụng các luồng Vinyl. Vì chúng không chơi tốt với nhau, bạn có thể phải sử dụng vinyl-source-stream để điều chỉnh Gulp thành Browserify (ví dụ để đổi tên tệp trong đường dẫn Browserify) hoặc sử dụng vinyl-transform để thích ứng với Browserify thành Gulp (ví dụ: bọc luồng Browserify để sử dụng một đường ống Gulp).