web-dev-qa-db-fra.com

Gestionnaire de packages: Bower vs jspm

En quoi Bower est-il différent de jspm ? Bower peut-il fournir des fonctionnalités jspm sur chargeur de module universel SystemJS ?

bowerpackage-managersjspm
76
Lee Chee Kiam

Eh bien, JSPM est un projet beaucoup plus vaste et ambitieux que Bower. Bower n'a qu'un seul but: télécharger les fichiers source dont vous avez besoin depuis le Web sur votre disque dur. Pour vous en tant que consommateur, Bower ne fait rien d'autre. Si vous souhaitez exécuter des fichiers de script à partir de bower, vous devez créer vos balises de script pour chacun d'eux.

Bien que jspm ne soit pas seulement un téléchargeur de modules. Il télécharge par défaut systemjs que vous avez mentionné. SystemJS est implémenté aussi près que possible de https://whatwg.github.io/loader/ . En fait, l'auteur de JSPM est un participant très actif du processus de spécification. Avec systemjs, vous pouvez aujourd'hui charger des modules ES6 (en les transposant dans le navigateur), CommonJS ou AMD dans le navigateur sans les construire. Non seulement les modules ES6, mais toutes les autres fonctionnalités ES6 prises en charge par traceur/babeljs/TypeScript. Selon le compilateur que vous choisissez lors de l'exécution de jspm init. SystemJS fonctionne 1: 1 dans node.js ainsi que dans le navigateur, donc les tests unitaires de votre application se font facilement.

Il peut également créer le bundle pour vous (jspm build) lorsque vous devez passer en production. Il est donc évident que jspm (+ systemjs) est un outil plus puissant. Donc, en règle générale:

  • besoin d'obtenir rapidement jquery et de l'inclure dans votre html modèle côté serveur? Allez avec une balise de script régulière. Bower est obsolète.
  • besoin de construire une grande application JS? Allez avec Webpack. JSPM n'a pas atteint la masse critique et tout le monde fait du webpack maintenant.
100
Capaj

Pour compléter la réponse de Capaj:

Si vous avez un petit projet, optez quand même avec jspm! C'est l'avenir! (qui sait, les choses changent, mais c'est un bon pari).

Utilisation de petits projets:

$ jspm install jquery

puis dans votre 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>

puis dans main.js:

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

Vous pouvez utiliser les formats de module CommonJS, AMD ou ES 6. JSPM les détecte automatiquement dans vos fichiers (vous ne pouvez cependant pas les mélanger et les faire correspondre dans le même fichier).

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

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