ChatGPT解决这个技术问题 Extra ChatGPT

Package Manager: Bower vs jspm

How is Bower different than jspm? Can Bower provide jspm functionality about SystemJS universal module loader?


C
Capaj

Well JSPM is much larger and ambitious project than Bower. Bower has only one purpose-to download source files you need from the web to your hard disk. For you as a consumer, bower doesn't do anything else. If you want to execute script files from bower, you need to create your script tags for each of them.

While jspm is not only a module downloader. It downloads by default systemjs that you have mentioned. SystemJS is implemented as closely to https://whatwg.github.io/loader/ as possible. Actually author of JSPM is very active participant of the specification process. With systemjs, today you are able to load ES6(by transpiling them in the browser), CommonJS or AMD modules in the browser without building them. Not only ES6 modules, but all the other ES6 features supported by traceur/babeljs/typescript. Depending on which compiler you choose when running jspm init. SystemJS works 1:1 in node.js as well as in browser, so unit testing your app is easily done.

Also it can build the bundle for you(jspm build) when you need to go to production. So it is obvious that jspm(+systemjs) is a more powerful tool. So as a rule of thumb:

need to quickly get jquery and include it in your serverside templated html? Go with a regular script tag. Bower has been deprecated.

need to build large JS app? Go with Webpack. JSPM has failed to reach critical mass and everyone's doing webpack now.


Just to be a little more precise, SystemJS itself uses an ES6 module shim so if you just needed ES6 module support you could skip SJS (unless you wanted some other features it has).
@Capaj, I'm very intrigued by SystemJS and yet it seems to not have the momentum that it should. Do some of the others (Webpack maybe?) also provide building as an optional feature? My main goal is to use ES6 module syntax and shim node and browsers to handle it. Secondary goal: that the provided build feature is optional. Third: support for this future awesomeness: 2ality.com/2013/11/es6-modules-browsers.html
"Bower has only one purpose-to download source files you need from the web to your hard disk." which is why it's really good as it does only one job.
@tugberk yes, but our work as web developers doesn't end there, does it? We need to load that 3rd party library and use it. That is where JSPM excells and beats all other alternatives. Especially the most popular webpack.
t
trusktr

To add on to Capaj's answer:

If you have a small project, go with jspm anyway! It's the future! (who knows, things change, but this is a good bet).

Small project use:

$ jspm install jquery

then in your 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>

then in main.js:

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

You can use CommonJS, AMD, or ES 6 module formats. JSPM auto-detects them in your files (you can't mix and match in the same file though).

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

While I am glad that you are so enthusiastic about jspm, I really think for people who need to add jquery to an html document, they are better off with normal script tags.
JQuery in this case is just an example so I don't think your comment is valid. I must say I like the energy of the answer - so excited and happy, makes me want to use jspm immediately. :-)
The point isnt that . Yes we can add just jquery as a script . But the fascinating stuff comes when u have multiple module dependencies with import statements into JS . Then all the system.js is required is to configure the packages using config.js and mention the import statements in the chain of javascript dependencies.
I'd just like to add that var $ = require('jquery'); is a CommonJS-style import and not AMD-style.
I am just trying to understand jspm, and I think I must be missing something very basic. Does jspm still work if jspm.io is not reachable?