Simplifying the ES6 Workflow With JSPM

For a while now, people all around the JavaScript community have been declaring that it is now possible to use ES6 to produce JavaScript applications. Aside from the fact that browsers are implementing more and more of the spec, there are several great transpilers that will convert you ES6 code into ES5 code, such as Traceur and Babel (aka 6to5 which recently changed its name). Beyond that, there are more and more tools coming out to make the workflow simpler and more robust. Today is a great day for ES6!

The Many “Old” Tools

Up until now, we’ve had to use multiple tools in order to make development in ES6 possible, at least you did if you developed things “correctly” by separating your modules into separate files and using a module loading system to make sure all dependencies are loaded in the correct order.

You could either write your JavaScript using the ES6 module syntax and have it converted to the necessary system, or just write it in the CommonJS or AMD style depending on which dependency manager you used. Then, you would use Traceur or Babel to convert the ES6 to ES5 and then use RequireJS or Browserify to combine all the modules together into one usable file. You could also skip RequireJS/Browserify and use a polyfill for the ES6 module loader.

Either way, you need to use 2 separate tools, plus a minifier and hope sourcemaps work throughout that train of tools (assuming you care about those things, which you probably do). Finally, you need some way to download third-party modules to use in your application. Browserify works quite nicely with NPM, which is great because you’re probably already using NPM anyway (or at least have it installed) and it has a fantastically good number of packages available for you. If you’re using RequireJS, they you could use whatever package manager you wanted and just configure it to find the files that you need, or you could use something like Bower and an additional tool to automate the configuration so you don’t have to write all those paths into the config file yourself.

Now, I don’t want to make any of these workflows sound too terrible because they have served innumerable developers quite well for a while now. You can set up all of these workflows to through Grunt or Gulp and have a simple automated way of handling everything. Once it is all set up, some of the workflows are actually quite simple and nicely automated. The most difficult part is getting things set up…

The One “New” Tool

Things are different now. It is now extremely simple to get that whole tool pipeline set up by using a single tool: JSPM. JSPM is a command line tool that handles package management (takes the place of Bower or NPM), module loading (replace RequireJS or Browserify), and handles the ES6 transpilation (so you don’t need to explicitly use Traceur or Babel, though it uses them under the hood).

After installing JSPM via NPM (npm install -g jspm) You could also refer to my previous post to see how to use it without installing it globally) you just initialize a project in the command line with jspm init and it’ll ask a few questions for configuration and then you’re all set. You can start writing your ES6 code, using jspm install to grab any dependencies you might need, then use jspm bundle-sfx command to compile your code into something you can use in the browser.

The best way to learn about JSPM is to see it in action, and since I don’t currently have any videos of my own that show off how to use JSPM, I’ll refer you to the JSPM home page where there are a couple great introduction videos in the “Guides” section.

I’m just going to leave you with that for now and potentially revisit this subject in the future, including the possibility of making my own video.

Conclusion

JavaScript development is constantly getting easier and more automated but, with JSPM, we are taking another big leap forward, especially as it pertains to moving into the future by writing ES6 today. I highly encourage everyone to check it out. God bless and Happy Coding!