I am not the kind of developer who jumps on bandwagons and uses whatever new tool is released or replaces another. However, after using Aurelia for over a year now and putting up with the numerous breaking changes in Jspm and System.js causing issues with Aurelia, I have had enough.
This will not be a guide telling you how to upgrade to Webpack from Jspm or System.js, just detailing my thoughts around switching over to Webpack and the benefits it brings.
Update April 2017: Since writing this, the Webpack implementation has been rewritten from the ground up and supports Webpack 2 and is fully-featured. The original implementation had caveats and some Webpack features couldn’t be used.
I realise, that Webpack has long been the darling of the React world for some time now, I do some React development myself from time-to-time and have worked with Webpack before.
Do not get me wrong, Jspm is still great, but the breaking changes have been painful, using it alongside System.js has introduced notable performance issues (especially in Edge).
Really, the gap is closing. The benefit of Jspm is that it handles all of your dependencies separately in a jspm_packages folder and maps them in a config.js file. However, Webpack can be configured to load your package.json dependencies meaning you can just use npm install to manage dependencies and not worry about two separate folders and commands.
Previously my workflow was something like this:
- npm install
- jspm install -y
- jspm dl-loader –latest
- gulp watch
Now my workflow looks like this:
- npm install
- npm run dev
With the use of Webpack also comes hot module swapping. If you are not familiar with what this is, it means if you make a file change, that file is updated in the browser and you don’t lose your current state. Unlike Browsersync, your page isn’t reloaded. That file is literally swapped out in the page. It is a cool feature that any React developer will rave on about for days.
Yes, using Webpack does require a little upfront commitment of time, however you get all of the benefits of using Jspm without the added overhead of managing separate dependencies or performance issues introduced by using System.js. Developing with a bundle makes for a painless experience.