Paketmanager: Bower vs jspm

Wie ist Bower anders als jspm ? Kann Bower JSPM-Funktionen für den Universal Module Loader von SystemJS bereitstellen ?

Nun, JSPM ist ein viel größeres und ehrgeizigeres Projekt als Bower. Bower hat nur einen Zweck: Laden Sie die benötigten Quelldateien aus dem Internet auf Ihre Festplatte herunter. Für Sie als Verbraucher macht Bower nichts anderes. Wenn Sie Skriptdateien von bower ausführen möchten, müssen Sie Ihre Skript-Tags für jede von ihnen erstellen.

Während jspm nicht nur ein Modul-Downloader ist. Es lädt standardmäßig die von Ihnen erwähnten Systemjs herunter. SystemJS wird so eng wie möglich an https://whatwg.github.io/loader/ implementiert . Tatsächlich ist der Autor von JSPM ein sehr aktiver Teilnehmer des Spezifikationsprozesses. Mit systemjs können Sie heute ES6- (indem Sie sie im Browser transpilieren), CommonJS- oder AMD-Module in den Browser laden, ohne sie zu erstellen. Nicht nur ES6-Module, sondern alle anderen ES6-Funktionen, die von traceur / babeljs / typescript unterstützt werden. Abhängig davon, welchen Compiler Sie beim Ausführen auswählen jspm init. SystemJS funktioniert sowohl in node.js als auch im Browser 1: 1, sodass Unit-Tests Ihrer App problemlos durchgeführt werden können.

Außerdem kann es das Bundle für Sie ( jspm build) erstellen, wenn Sie zur Produktion gehen müssen. Es ist also offensichtlich, dass jspm (+ systemjs) ein leistungsfähigeres Werkzeug ist. Als Faustregel gilt:

• Müssen Sie schnell jquery erhalten und es in Ihre serverseitige HTML-Vorlage aufnehmen? Gehen Sie mit einem normalen Skript-Tag. Bower ist veraltet.
• Müssen Sie eine große JS-App erstellen? Gehen Sie mit Webpack. JSPM hat die kritische Masse nicht erreicht und alle machen jetzt Webpack.

Um Capajs Antwort zu ergänzen:

Wenn Sie ein kleines Projekt haben, gehen Sie trotzdem mit jspm! Es ist die Zukunft! (Wer weiß, die Dinge ändern sich, aber das ist eine gute Wette).

Kleine Projektnutzung:

$ jspm install jquery

dann in Ihrem 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>

dann in main.js:

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

Sie können die Modulformate CommonJS, AMD oder ES 6 verwenden. JSPM erkennt sie automatisch in Ihren Dateien (Sie können sie jedoch nicht in derselben Datei mischen und abgleichen).

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

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