ES6 Modules and Dependencies with JSPM

The Current Context

For some time now the JavaScript community has jumped on the ES6 bandwagon and started using it to develop their web applications. Even though browsers are racing to implement all of the ES6 specs, they are still found to be lacking. To overcome this, developers are using a number of tools and workflows to write clean and maintainable ES6 JavaScript apps.

To write an ES6 app today, you need a transpiler to convert your ES6 code to ES5. The most popular transpilers are Babel and Traceur. Next, you need a module loader to combine all of the modules into one usable. The module loader you choose depends on which module format you prefer.  The most popular choices are RequireJS for AMD, Browserify for CommonJS, and es6-module-loader for ES6 modules. In the end, you will have to minify the code and enable source maps for debugging.

You will also need a way download third party modules. Browserify takes a CommonJS module and transforms it into a browser-understandable version, so the obvious choice for downloading third party modules would be to use NPM. If, on the other hand, you’re using RequireJS, then you can use any package manager and configure Requirejs to find the files you need or you can use a tool like Bower so you don’t have to maintain that configuration. Finally, you can use a task runner like Grunt or Gulp to do all this work for you while writing code.

All in all, you need at least three separate tools: a transpiler, a module loader, and package manager.

Enter JSPM

JSPM is a JavaScript package manager that is able to load a number of different module formats: AMD, CommonJS,  and ES6 modules. It does this by using System.js, which in turn uses es6-module-loader to load ES modules. System.js is also able to load AMD and CommonJS modules.

It also comes with both Babel and Traceur to transpile your code. You can configure it to use whichever you prefer. Another nice feature of JSPM is it’s ability to download and install third party packages from it’s own repository, npm, or Github.

The Basics

Let’s start by installing it. This is done with npm:

$ npm install -g jspm

After the installation is done, we can initialize our new project. It will prompt you to answer some questions to help you configure the project.

$ jspm init

Package.json file does not exist, create it? [yes]:
Would you like jspm to prefix the jspm package.json properties under jspm? [yes]:
Enter server baseURL (public folder path) [./]:
Enter jspm packages folder [./jspm_packages]:
Enter config file path [./config.js]:
Configuration file config.js doesn't exist, create it? [yes]:
Enter client baseURL (public folder URL) [/]:
Do you wish to use a transpiler? [yes]:
Which ES6 transpiler would you like to use, Babel, TypeScript or Traceur? [babel]:

Now let’s install jQuery and load it into our app:

$ jspm install jquery

<!DOCTYPE html>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>

import $ from 'jquery';


Now lad index.js in the borwser and open up the console:

> 2.1.4

JSPM can also bundle our app files:

$ jspm bundle-sfx index.js 
     Building the single-file sfx bundle for index.js...
ok   Built into build.js with source maps, unminified.


JSPM is the closest thing to an all-in-one tool for easily writing and maintaining modern web applications without getting tangled in the multitude of tools and workflows used nowadays to develop complex JavaScript applications. It also unifies the different types of module syntaxes and package managers available in the JavaScript community.

More details on JSPM can be found here.

Alexandru Pirjol

Alexandru Pirjol

Module Lead

Alexandru Pirjol is has been a Module Lead at 3Pillar Global for 2 years. He has over 6 years of experience in front-end web development. He also has experience working with JavaScript, CSS, JSON, HTML, AJAX, and XML.

Leave a Reply

Related Posts

Building a Microservice Architecture with Spring Boot and Do... This is the first post in what will be a 4-part series on building a microservice architecture with Spring Boot & Docker. This post will provide a...
Building a Microservice Architecture with Spring Boot and Do... Part II: Getting Set-Up and Started Introduction and Tools In this part, we'll get to work on building out the solution discussed in Part I. I'm goi...
Building a Microservice Architecture with Spring Boot and Do... Part III: Building Your First Microservice, its Container, and Linking Containers We're about ready to actually get started with building a microserv...
Building a Microservice Architecture with Spring Boot and Do... This is the fourth blog post in a 4-part series on building a microservice architecture with Spring Boot and Docker. If you would like to read the pre...
Innovation Wars, with Scott Bales Scott Bales joins us on this episode of The Innovation Engine to dive into the concept of "innovation wars." Among the topics we'll discuss are what c...


Sign up today to receive our monthly product development tips newsletter.