3 ms·
I regularly use JSPM (with systemJS) for new projects, and I've liked it a lot. Back when webpack first came out, I struggled a little bit with figuring out wh
by hardwaresofton 11y ago
I regularly use JSPM (with systemJS) for new projects, and I've liked it a lot.
Back when webpack first came out, I struggled a little bit with figuring out what it actually did. While I understand now, I am not why I would want to (or you) switch from JSPM to webpack. I don't see any features that webpack has that JSPM doesn't (and JSPM offered ES6 support well before of course, with babel on by default).
I like to use JSPM because of how relatively easy everything fits together -- and how straightforward it is to use and configure.
For those not familiar, JSPM is a package manager, module bundler, and module loader all in one for javascript applications.
This means you can:
jspm install <package>
And JSPM will look in NPM/Github (and it's possible to add registries, like bower) for stuff . That's the package management facet.
jspm bundle-sfx js/main dist/build.js
Bundle your code all together, and drop it in a file
<import src="system.js">
<script>
// set our baseURL reference path
System.config({
baseURL: '/app'
});
// loads /app/main.js
System.import('main.js');
</script>
Load your modules on the fly like you would with something like RequireJS.
As you may have guessed, JSPM relies on SystemJS (https://github.com/systemjs/systemjs https://github.com/systemjs/systemjs) internally for some of the features above.
This video really opened my eyes to what it could do:
https://www.youtube.com/watch?v=iukBMY4apvI https://www.youtube.com/watch?v=iukBMY4apvI
- sandGorgon 11y agowell i like jspm, but as others have mentioned - it is too slow. is there a way to compile all the dependencies and cache-buster-fingerprint them ? I serve my app statically using nginx and cloudfront.
- hardwaresofton 11y agoWhat's your full build/bundle time like? May be faster to just bundle the parts you need and build them (and use the compiled output). Also ensure caching is enabled for the stuff you want to cache (deps, I assume). Cachebusting is possible with systemjs. Looks like this project is a good start: https://github.com/stealjs/cache-bust https://github.com/stealjs/cache-bust Here's a quick-n-dirty fix for this same problem when working with Aurelia: https://github.com/aurelia/framework/issues/94#issuecomment-102876409 https://github.com/aurelia/framework/issues/94#issuecomment-... Here's where SystemJS devs are discussing adding cachebusting: https://github.com/systemjs/systemjs/issues/172 https://github.com/systemjs/systemjs/issues/172
- sandGorgon 11y agoi was looking at the last issue. it seems inconclusive - I like to serve my js from CDN, so this is very very important. what is your opinion of webpack in general though ?
- hardwaresofton 11y agoAhh unfortunately I don't one worth sharing -- I've only used webpack once, most other projects (big or small) I've worked on have used RequireJS, JSPM, or Ember CLI. Also, please look at the other responses, bundling deps seems to be the definitive answer to how to speed up JSPM. Though of course your cache busting issue is separate.
- sandGorgon 11y agoso im a little confused. coming from the Rails world I thought cache busting was pretty fundamental.. especially if you want to use CDN. Is this not baked into every build tool out there ? How does one take care of caching while serving assets .. or is the general philosophy of JS right now around SPA (so dont care to cache) ?
- hardwaresofton 11y agoCaching is definitely important for front end tooling, but it depends on which tooling you're having perform the job. It is also generally considered a deployment worry. Cache busting can be implemented in various ways-- by using a templating language (ex. ERB), by using a build tool like grunt/gulp, by using you JS bundler, or by using your module resolver (in the case that the bundler and resolver are not the same entity). JSPM just doesn't take a built-in stance on it (as of now, as I noted there is a ticket to get it included), but it certainly is configurable enough to allow you to add cache busting (by changing the loader). Not trying to apologize for JSPM -- it would certainly be better if they had some sort of cache busting option that was easily available and obvious. I think the thought here is that when you're ready to push to production, and you build your actual bundle, you name that file whatever you need to to bust caches.
- circlingthesun 11y agoGulp-rev-all (https://github.com/smysnk/gulp-rev-all https://github.com/smysnk/gulp-rev-all) works well for me.
- sandGorgon 11y agoare you using this with systemjs ? can you point out how ?
- circlingthesun 11y agoWell, I use SystemJS to build a stream of in memory files and pipe them to gulp-rev-all. My gulpfile is a bit complex but feel free to use it as reference: http://pastebin.com/zgBsx7Zj http://pastebin.com/zgBsx7Zj
- true_religion 11y agoIt is pretty slow, but I'm guessing that's from the Babel compilation. I ended up compiling the 3rd party dependencies into a single bundle, then letting JSPM run only on my app's code.