JavaScript packages or modules have always been an issue for developers working on large projects, mostly because defining the modules and loading these in a proper order can be a difficult task.

When Node was developed, the NPM (Node Package Manager) was also created. Considered a milestone in JavaScript package management, NPM offers a very stable, functional packaging system that helps facilitate the sharing of work between developers. NPM is mainly used for Node-related packages, but it can also handle front-end modules.

Since NPM is considered the defacto JavaScript package manager, a lot of other package managers (such as Bower) can be installed through NPM. This article will not cover the differences between npm and Bower (this article does), but it discusses another package manager, jspm.

Jspm is considered a very good alternative for deploying JavaScript packages to the browser. This package manager makes it possible to load models to the browser dynamically. What this means is that developers don't have to write a bunch of <script src=”...” /> tags in HTML to load the files anymore, since jspm resolves it for us.

Installing jspm is doe through npm:

npm install -g jspm

After installation we can scaffold a project, using the CLI offered by jspm, all we need to do is run:

jspm init

jspm initi command

It will create the packages.json, config.js files, plus the jspm_packages folder, since jspm is built on the installed SystemJS. SystemJS offers the possibility to dynamically load ES6 modules, CommonJS, and AMD modules using a unified interface.

After jspm init has finished we have the following structure:

generated packages.json

The config.js contains the System related configuration. First the baseURL is defined, then the transpiler (a.k.a. transcompiler), which in this case is Babel. You can consider Babel as the TypeScript compiler, since it takes some JavaScript-like language and produces JavaScript code after trans-compiling it. The paths say where the packages should be installed/loaded from, and the different folders for npm and github modules can be clearly seen.

The map property helps define shorter names for packages that can be used when importing modules.

We need to add two new files: index.html and myapp.js.

index.html:

<!DOCTYPE html>
<html>
  <head>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('./myapp');
    </script>
  </head>
  <body>
  </body>
</html>

myapp.js:

console.log("System import worked!");

You can install the project in Apache to browse it or use an npm package called serve, which helps it rapidly access websites. It's like a mini web-server, based on nodejitsu's http-server.

Please notice that in the HTML file we only wrote two script tags. The myapp.js file will be loaded dynamically by the ES6 module loader, which can be easily seen inside Chrome Developer Tools, Network tab:

Chrome Developer Tools - Network Tab

The system.js, then the config.js loads as we have defined in the index.html. The es6-module-loader.js then loads automatically, because we were using System.import() method to load a module that loads the myapp.js file.

The big advantage of this can be seen when there are many modules inside a project, but from the server, ONLY the imported ones are loaded and the developer does not have to manually write and manage the order of the script tags in the HTML file.

If we check the Console tab in Chrome, we can see that our JavaScript code was successfully executed:

Chorme Developer Tools - Console Tab

Installing modules using jspm can be done the same way we did with npm:

greg@earth:~/Development/_freelancer/javascript_package_management/my-sample-project$ jspm install angular
     Updating registry cache...
     Looking up github:angular/bower-angular
     Downloading github:angular/bower-angular@1.4.0
ok   Installed angular as github:angular/bower-angular@^1.4.0 (1.4.0)
ok   Install tree has no forks.
ok   Install complete.

After this, we can write: System.import(“angular”) and use it where we need it.

In this article we reviewed how the JavaScript package management tool evolved over the years. It started with npm, but that wasn't a perfect fit for front-end modules. Bower was then created, which is a better alternative, but still doesn't offer the same flexibility that jspm does. This is why jspm is the future of module management for front-end projects.

Greg Bogdan
Greg Bogdan Hire Me

Software Engineer, Blogger, Tech Enthusiast

I am a Software Engineer with over 7 years of experience in different domains(ERP, Financial Products and Alerting Systems). My main expertise is .NET, Java, Python and JavaScript. I like technical writing and have good experience in creating tutorials and how to technical articles. I am passionate about technology and I love what I do and I always intend to 100% fulfill the project which I am ...

Hire Me

Next Article

How to Use Google+ to Expand Your Customer Base