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.
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…
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.