Glen Maddern
3 HN recommenders · recommended in 4 months, 2015–2017
10:32 · 58K views · Jan 7, 2015
A short screencast tour of JSPM, SystemJS and ES6 features, building a small app with the then-new JavaScript module and package tooling. It shows how JSPM works as a package manager, bundler and loader.
Commenters credit it with opening their eyes to JSPM and using it to choose build systems.
4 comments from Hacker News
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 ( [LINK] ) internally for some of the features above. This video really opened my eyes to what it could do: this video
If you're looking for alternatives to Webpack, please also check out JSPM (a good short description might be "preprocessing system + package manager + systemjs"): [LINK] It takes a little more to get it to work with vue (the plugin that makes .vue files work is older and unsupported nowadays), but I use it just fine, with my template, styling and component files separated (I wrote a little thing: [LINK] ) If you dislike how complex webpack is, you'll like JSPM -- here's the video that got me hooked (it's pretty old but still valid): this video
My favourite way is via JSPM and live-server. I got into that after watching this amazing dev video: this video
As if the churn wasn't already bad enough, I've recently started using JSPM[1] and it's pretty awesome. I'm writing ES6+ code with hot reloading react components. If you're trying to decide between build systems I would recommend checking it out, and watching this video[2] for a nice overview. [1] [LINK] [2] this video