Менеджер пакетів: Bower проти jspm

Question 1

Чим Bower відрізняється від jspm ? Чи може Bower забезпечити функціональність jspm щодо універсального навантажувача модулів SystemJS ?

Question 2

Ну JSPM - набагато масштабніший та амбітніший проект, ніж Bower. Bower має лише одну мету - завантажити потрібні вихідні файли з Інтернету на ваш жорсткий диск. Для вас, як споживача, компанія Bower більше нічого не робить. Якщо ви хочете виконувати файли скриптів з Bower, вам потрібно створити теги сценарію для кожного з них.

Хоча jspm - це не тільки модуль для завантаження. Він завантажує системні файли за замовчуванням, про які ви згадали. SystemJS реалізовано якомога ближче до https://whatwg.github.io/loader/ . Насправді автор JSPM є дуже активним учасником процесу специфікації. За допомогою systemjs сьогодні ви можете завантажувати модулі ES6 (переклавши їх у браузері), модулі CommonJS або AMD у браузер, не будуючи їх. Не тільки модулі ES6, але й усі інші функції ES6, що підтримуються traceur / babeljs / typecript. Залежно від того, який компілятор ви вибрали під час запуску jspm init. SystemJS працює у форматі 1: 1 як у node.js, так і в браузері, тому модульне тестування вашого додатка легко виконується.

Крім того, він може створити вам комплект ( jspm build), коли вам потрібно перейти на виробництво. Тож очевидно, що jspm (+ systemjs) є більш потужним інструментом. Отже, як правило:

потрібно швидко отримати jquery та включити його у свій серверний шаблонний html? Ідіть із звичайним тегом скрипта. Bower застаріла.
потрібно створити великий додаток JS? Ідіть із Webpack. JSPM не досяг критичної маси, і зараз усі роблять веб-пакет.

Question 3

Щоб додати відповідь Капая:

Якщо у вас невеликий проект, все одно скористайтеся jspm! Це майбутнє! (хто знає, речі змінюються, але це хороша ставка).

Використання малого проекту:

$ jspm install jquery

то у вашому HTML:

    <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>

то в main.js:

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

Ви можете використовувати формати модулів CommonJS, AMD або ES 6. JSPM автоматично виявляє їх у ваших файлах (хоча ви не можете змішувати та поєднувати в одному файлі).

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

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