Trình quản lý gói: Bower vs jspm

Làm thế nào là Bower khác với jspm ? Bower có thể cung cấp chức năng jspm về bộ tải mô-đun đa năng SystemJS không?

Vâng, JSPM là một dự án lớn hơn và đầy tham vọng hơn nhiều so với Bower. Bower chỉ có một mục đích duy nhất là tải các tệp nguồn bạn cần từ web vào đĩa cứng của bạn. Đối với bạn là một người tiêu dùng, bower không làm bất cứ điều gì khác. Nếu bạn muốn thực thi các tệp tập lệnh từ bower, bạn cần tạo các thẻ tập lệnh của mình cho từng tệp đó.

Trong khi jspm không chỉ là một trình tải xuống mô-đun. Nó tải xuống theo hệ thống mặc định mà bạn đã đề cập. SystemJS được triển khai gần với https://whatwg.github.io/loader/ nhất có thể. Trên thực tế, tác giả của JSPM là người tham gia rất tích cực vào quá trình đặc tả. Với systemjs, ngày nay bạn có thể tải ES6 (bằng cách chuyển đổi chúng trong trình duyệt), CommonJS hoặc các mô-đun AMD trong trình duyệt mà không cần xây dựng chúng. Không chỉ các mô-đun ES6, mà tất cả các tính năng khác của ES6 được hỗ trợ bởi traceur / babeljs / stylescript. Tùy thuộc vào trình biên dịch mà bạn chọn khi chạy jspm init. SystemJS hoạt động 1: 1 trong node.js cũng như trong trình duyệt, vì vậy việc kiểm tra đơn vị ứng dụng của bạn có thể dễ dàng thực hiện.

Ngoài ra, nó có thể xây dựng gói cho bạn ( jspm build) khi bạn cần đi vào sản xuất. Vì vậy, rõ ràng jspm (+ systemjs) là một công cụ mạnh hơn. Vì vậy, theo quy tắc chung:

• cần nhanh chóng tải jquery và đưa nó vào html tạo mẫu bên máy chủ của bạn? Đi với thẻ script thông thường. Bower đã không được dùng nữa.
• cần xây dựng ứng dụng JS lớn? Đi với Webpack. JSPM đã không đạt được khối lượng lớn và tất cả mọi người đang làm webpack bây giờ.

Để thêm vào câu trả lời của Capaj:

Nếu bạn có một dự án nhỏ, hãy sử dụng jspm! Đó là tương lai! (Ai mà biết được, mọi thứ thay đổi, nhưng đây là một cuộc cá cược tốt).

Sử dụng dự án nhỏ:

$ jspm install jquery

thì trong HTML của bạn:

    <script src="jspm_packages/system.js"></script><!-- required -->
    <script src='config.js'></script><!-- required -->
    <script type="module">
        System.import('path/to/your/main.js')
    </script>

thì trong main.js:

import $ from 'jquery'; // ES6-style import
// do whatever with jQuery here.

Bạn có thể sử dụng các định dạng mô-đun CommonJS, AMD hoặc ES 6. JSPM tự động phát hiện chúng trong tệp của bạn (mặc dù bạn không thể trộn và kết hợp trong cùng một tệp).

var $ = require('jquery'); // CommonJS-style import
// do whatever with jQuery here.

define(['jquery'], function($) { // AMD-style import
    // do whatever with jQuery here.
})