It’s super frustrating that ES6 module syntax is officially part of the language specification, yet no browser supports it yet!

So most of the times, if you just want to use ES6 modules, you need to use something like Webpack or Browserify, adding one more step to do before you can actually start coding.

Of course, for production, you would want to bundle the files anyway, but is there no way to just quickly get started with development without all these steps?

Enter SystemJS

Luckily, these problems aren’t new, so there are new tools that have appeared to help.

System.js is one of these tools. It is a module loader that, besides ES6, can also load global modules, AMD or CommonJS modules.

The nice part about it is that you don’t need any extra build step to use it. Just include it in your index.html and that’s it.

Show me the code

We’ll only have three files: two ES6 modules, one including the other, and one index.html files to put them all together. We’ll include SystemJS using npm.

Prepare some ES6 modules

First file, an Animal farm :D

// js/animal-farm.js
export const duck = {
    quack: function() {
        console.log('Quack quack')
    }
};

export const dog = {
    bark: function() {
        console.log('Woof woof');
    }
};

export const cat = {
    meow: function() {
        console.log('meow meow');
    }
};

And the second, the main entry point:

// js/main.js
import { dog, cat } from 'animal-farm.js';

dog.bark();
cat.meow();

Download SystemJS and the Babel plugin for ES6

npm install systemjs sytemjs-plugin-babel

Include them in the index.html

    <script src="node_modules/systemjs/dist/system.js"></script>
    <script>
      // Configure the SystemJS module loader
      SystemJS.config({
      	// Tell it that our javascript files are in the /js folder
        baseURL: '/js',
        // Tell it to apply Babel to our JS files
        transpiler: 'plugin-babel',
        // Configure the Babel plugin - it's basically just telling it where to read the files from - in our case, they're in node_modules
        map: {
            'plugin-babel': '../node_modules/systemjs-plugin-babel/plugin-babel.js',
            'systemjs-babel-build': '../node_modules/systemjs-plugin-babel/systemjs-babel-browser.js'
        },
        
      });

      // Now that the configuration is complete, we can include our main file! (/js/main.js)
      SystemJS.import('main.js');
    </script>

Open the browser

Aaaand that’s it, you’re application is running! You should see the console.log messages in the DevTools Console.

But wait, what about debugging?

You’ll notice that even if the code is run directly in the browser, transpilation still occurs, except that it’s at runtime. However, sourcemaps work out of the box, so you can still continue to debug your code normally. The only change is that in the sources folder you will see both files: original and transpiled:

SystemJS sourcemaps

Further reading

Comments