wake-up-neo.com

Paketmanager: Bower vs jspm

Wie unterscheidet sich Bower von jspm ? Kann Bower JSPM-Funktionen für SystemJS Universal Module Loader bereitstellen?

76
Lee Chee Kiam

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

Dabei ist jspm nicht nur ein Modul-Downloader. Es werden standardmäßig die von Ihnen erwähnten systemjs heruntergeladen. SystemJS wird so nah wie möglich an https://whatwg.github.io/loader/ implementiert. Derzeit ist der Autor von JSPM sehr aktiv am Spezifikationsprozess beteiligt. Mit systemjs können Sie heute ES6-Module (indem Sie sie im Browser transpilieren), CommonJS- oder AMD-Module im 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 von jspm init Auswählen. SystemJS funktioniert sowohl in node.js als auch im Browser 1: 1, so dass Unit-Tests Ihrer App einfach durchgeführt werden können.

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

  • müssen Sie schnell JQuery erhalten und es in Ihr serverseitiges HTML-Template einbinden? Verwenden Sie ein reguläres Skript-Tag. Laube 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 das Webpack.
100
Capaj

So fügen Sie Capajs Antwort hinzu:

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 projekt verwenden:

$ jspm install jquery

dann in deinem 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.
})
64
trusktr