Paketmanager: Bower vs jspm

Antworten:

100

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.
Capaj
quelle
Um etwas genauer zu sein, verwendet SystemJS selbst eine ES6-Modul-Einstellscheibe. Wenn Sie also nur ES6-Modulunterstützung benötigen, können Sie SJS überspringen (es sei denn, Sie möchten andere Funktionen).
ShawnFumo
@ Capaj, ich bin sehr fasziniert von SystemJS und doch scheint es nicht den Schwung zu haben, den es haben sollte. Bieten einige der anderen (Webpack vielleicht?) Auch das Erstellen als optionale Funktion an? Mein Hauptziel ist die Verwendung der ES6-Modulsyntax sowie des Shim-Knotens und der Browser, um damit umzugehen. Sekundäres Ziel: Die bereitgestellte Build-Funktion ist optional. Drittens: Unterstützung für diese zukünftige Ehrfurcht gebietend: 2ality.com/2013/11/es6-modules-browsers.html
Jon Coombs
8
" Bower hat nur einen Zweck: Laden Sie die benötigten Quelldateien aus dem Internet auf Ihre Festplatte herunter. " Deshalb ist es wirklich gut, da es nur einen Job erledigt.
Tugberk
2
@ Tugberk ja, aber unsere Arbeit als Webentwickler endet nicht dort, oder? Wir müssen diese Bibliothek von Drittanbietern laden und verwenden. Hier übertrifft und schlägt JSPM alle anderen Alternativen. Besonders das beliebteste Webpack.
Capaj
64

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.
})
trusktr
quelle
18
Ich bin zwar froh, dass Sie von jspm so begeistert sind, aber ich denke wirklich, dass Menschen, die einem HTML-Dokument jquery hinzufügen müssen, mit normalen Skript-Tags besser dran sind.
Capaj
10
JQuery ist in diesem Fall nur ein Beispiel, daher glaube ich nicht, dass Ihr Kommentar gültig ist. Ich muss sagen, ich mag die Energie der Antwort - so aufgeregt und glücklich, dass ich sofort jspm verwenden möchte. :-)
Mladen Mihajlovic
2
Der Punkt ist nicht das. Ja, wir können nur jquery als Skript hinzufügen. Aber das Faszinierende kommt, wenn Sie mehrere Modulabhängigkeiten mit Importanweisungen in JS haben. Dann muss die Datei system.js nur noch mit config.js konfiguriert und die Importanweisungen in der Kette der Javascript-Abhängigkeiten erwähnt werden.
Joy
1
Ich möchte nur hinzufügen, dass dies var $ = require('jquery');ein Import im CommonJS- Stil und kein AMD- Stil ist.
Andreas Wahlqvist