in “ Web applications ”,
June 27, 2016.

# SystemJs: The Universal Loader That Lets You Use ES6 Modules

I stumbled upon SystemJs today. I thought it would be interesting to include modules in ES6 format, so I gave it a try and here are some of my findings.

I stumbled upon SystemJs today. I thought it would be interesting to include modules in ES6 format, so I gave it a try and here are some of my findings.

## What Is SystemJs?

SystemJs is a Universal Module Loader for JavaScript. If you’ve used RequireJs or a CommonJs bundler in the past, you have probably created modules. Basically, it is a way of breaking down your code into self-contained modules in order to include just the modules you need, when you need them, in your actual application. SystemJs lets you use modules in many different formats, but I was mostly interested in the ES6 module syntax.

## What’s so cool about those ES6 modules?

Modules are a new feature in ES6. The syntax is both easy to use and easy to read. This syntax allows you to export variables, classes, functions or objects from one file to another. Here is a quick example of how it works:

export.js

var accessibleFromOtherFile = 1;
var notAccessibleFromOtherFile = 1;
export var accessibleFromOtherFile;


import.js

import * as otherFile from “export.js”;
console.log(otherFile.accessibleFromOtherFile); // 1
console.log(otherFile.notAccessibleFromOtherFile); // undefined

For more information on ES6 modules, I strongly recommend Dr. Rauschmayer’s blog.

## Back to SystemJs

So let’s try to use SystemJs to load the modules. First of all, let’s create a very basic HTML page that includes SystemJs. We’ll fill that empty script tag in a few minutes.

index.html



Exploring SystemJs



Let’s also create two files: one for our main application and another one with math functions that we will import into our main application.

main.js

import * as math from "./math";

console.log("1 + 1 = " + math.add(1,1));
console.log("1 - 1 = " + math.substract(1,1));

math.js

export function add(x, y) {
return x+y;
}

export function substract(x, y) {
return x-y;
}

Nothing fancy, but it’s always good to start simple. Now let’s edit our index.html page. We now need to add two lines to configure SystemJs. The first one will tell SystemJs to use Babel as the ES6 transpiler and the second one will tell it which file is your application entry point.

index.html

System.config({
transpiler: "babel"
});

System.import("./js/main.js");

Now run this code in your browser and… ta-dah! The output will magically appear in your console. The use of a separate module may have been overkill in this case, but you get the point.

1 + 1 = 2
1 – 1 = 0

You might have noticed that, in your network tab, the babel-core@5.js file was fetched automatically from jspm.io. That is a little bonus of using jspm to load system.js in your script tag. Jspm is a package manager that can act more or less as a CDN for your files. We’ll have more on jspm in a future post; in the meantime, suffice it to say that it’s easy to use with SystemJs.

## Anything else I should know?

Yes. There is another little perk that you get with all this. Now that all of your code is transpiled from ES6 to ES5, you can use *all* of the ES6 syntax in your browser: no more excuses not to use it! As an example, you can edit your main.js file to add the following:

main.js

//Arrow Functions (this should not work in Safari 9 unless transpiler works)
var arrow = () => console.log("It works! ");
arrow();

You should see the message “It works!” in your console. The arrow functions are already part of Chrome, but if you tried to run this without a transpiler in Safari 9, it would fail.