SystemJS

We are going to learn the basics by building a web site that imports ES6 Modules, AMD and CommonJS.

Initial Setup

Let’s start from a new folder and create a package.json file.

  • mkdir system-js-test && cd $_
  • npm init - Defaults are fine.

We need to install SystemJS, create an html page and an entry point.

  • npm install systemjs -S
  • touch index.html main.js

We’ve now installed SystemJS to our ./node_modules folder, created our HTML page and a main entry point for our javascript.

Update Main.js

We need to do something in our main.js file, for now let’s just output to the console.

console.log('Hello World!');

Update Index.html

We need to:

  • include the system.js library
  • import our main.js file.
  • Why not also import lodash?
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>SystemJS Hello World</title>
</head>
<body>

    <script src="node_modules/systemjs/dist/system.js"></script>
    <script>
      System.import('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js');
      System.import('main.js');
    </script>

</body>
</html>

Building and Running

In a real app you’d want to use some combination of node, gulp or webpack to build your javascript and to serve up your index.html page.

To keep things simple we will just use NPM scripts and the http-server library.

If you do not have http-server, just npm install http-server -g

package.json

Add a new command to your scripts section to create the server:

"scripts": {
  "serve": "http-server . -p 8080"
},

Run it!

Open up your console and you should see “Hello World!”. Now, on to the fun stuff…

Modules

The main reason to use SystemJS is to load modules. So let’s create an AMD module, a CommonJS module and an ES6 module.

Short cut: touch amd-module.js commonjs-module.js es6-module.js

AMD

Update your amd-module.js file with this:

define(function () {
  console.log('AMD Module was loaded!');
});

CommonJS

Update your commonjs-module.js file with this:

exports.default = function() {
  console.log('CommonJS module was loaded!');
};

ES6

Update your es6-module.js file with this:

export class es6Module {
  constructor() {
    console.log('ES6 Module was loaded!');
  }
}

Importing Each Module

We’ll need to update second <script>...</script tag in index.html file, like so:

    <script>
      System.import('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js');
      System.import('main.js');
      System.import('amd-module.js');
      System.import('commonjs-module.js').then(function(m) {
        new m.default();
      });
      System.import('es6-module.js').then(function(m) {
        new m.es6Module();
      });
    </script>

A Note about ES6 Modules

In order to use ES6, we will have to use a transpiler, like Traceur or Babel. For this example, we will use Traceur.

To do this, we will install Traceur as a dev dependency.

  1. npm install traceur -D
  2. Config SystemJS to use Traceur, by updating the index.html file with the following:
    <script>
      System.import('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js');
      System.import('main.js');
      System.import('amd-module.js');
      System.import('commonjs-module.js').then(function(m) {
        new m.default();
      });
      System.import('es6-module.js').then(function(m) {
        new m.es6Module();
      });
      // Add the config block below:
      System.config({
        transpiler: 'traceur',
        map: {
          traceur: 'node_modules/traceur/bin/traceur.js'
        }
      });
    </script>

Refresh!

After refreshing your browser, you should see something like this:

image

Summary

SystemJS is a universal module loader. You install SystemJS via NPM and can import ES6, CommonJS, AMD and more. Check out the repo here, read the docs and be sure to give them a star.

Source Code

You can see the completed code here.

Top