Last year I wrote on getting up and running with jspm. So, why another post about it? As Webpack seems the current status-quo for bundling, I wanted to simply share my thoughts on why I generally prefer JSPM over Webpack and why you might want consider giving it a go.
Fatigueless browser package management, and more.
- Install -
jspm install react
- Require -
import React from 'react'
- Boom! There is no point 3. Go building things!
Yes, you are right, I was cheating, to get to that point we need to have jspm installed and configured. I assume we want to use JSX, Babel for transpiling, and all the ES6 cowabungas… easy:
Using ES6 Modules Today
We have all been writing ES6 modules for a while now, but for what? It is possible to use them directly in all browsers today using the ES6 loader polyfill. JSPM rely on the SystemJS universal module loader, that is built on top of it. Simply use systemjs to import your app.
Load any module format, from any registry.
No need to publish an npm module when you could simply load it from github. With JSPM you can load any module format (ES6, AMD, CommonJS and globals) directly from any registry such as npm and GitHub.
Don’t make me think production/development workflows
Loading modules as separate files with ES6 and plugins compiled in the browser may be cool but definitely something you would rather want for development only, so what about production workflows? JSPM optimize modules into a bundle, layered bundles or a self-executing bundle with a single command:
Couple of options are available:
Automatically loading bundle (—inject).
If you don’t want to include the bundle with a script tag, but rather load it only when it is needed:
Make bundles with arithmetic, yo!
Creates a file
moment and all their dependencies, excluding
react and all its dependencies:
For more advanced options, check http://jspm.io/docs/production-workflows.html
Those are the biggest reasons that make me favour jspm over webpack, If you want to play around with JSPM, feel free to fork my jspm-playground repository it comes with branches for:
- getting started
- css modules
- hot reloading
- production workflows