SystemJS

Universal dynamic module loader - loads ES6 modules, AMD, CommonJS and global scripts in the browser and NodeJS. Works with both Traceur and 6to5.

Designed as a collection of extensions to the ES6 module loader which can also be applied individually.

• Loads any module format with exact circular reference and binding support.
• Loads ES6 modules compiled into the System.register bundle format for production, maintaining circular references support.
• Supports RequireJS-style map, paths, bundles and global shims.
• Loader plugins allow loading assets through the module naming system such as CSS, JSON or images.

Designed to work with the ES6 Module Loader polyfill (9KB) for a combined total footprint of 16KB minified and gzipped.

Runs in IE8+ and NodeJS.

For discussion, see the Google Group.

For a list of guides and tools, see the community project page.

Documentation

• Basic Use
• Loader Configuration
• Map Configuration
• Meta Configuration
• Module Format Support
• Relative Dynamic Loading
• Versions Extension
• Production Workflows
• Creating Plugins
• Creating a Custom Module Format

Getting Started

Browser Use

Download es6-module-loader.js into the same folder as system.js.

Load SystemJS with a single script tag:

<script src="system.js"></script>

It will load es6-module-loader.js itself.

To load ES6, locate traceur.js in the same folder and it will be loaded when needed.

For use with 6to5 set:

<script>
  System.transpiler = '6to5';
</script>

Alternatively a custom path to 6to5 can also be set:

<script src="system.js" data-6to5-src="path/to/6to5.js"></script>

NodeJS Use

To load modules in NodeJS, install SystemJS with:

  npm install systemjs

We can then load modules equivalently to in the browser:

var System = require('systemjs');

/* 
 * Include
 *   System.transpiler = '6to5';
 * to use 6to5 instead of Traceur
 */

// loads './app.js' from the current directory
System.import('./app').then(function(m) {
  console.log(m);
});

If configuring baseURL for use in Windows, prepend file: i.e.

System.config({
 baseURL: 'file:' + path.resolve('../path')
});

Plugins

Plugins handle alternative loading scenarios, including loading assets such as CSS or images, and providing custom transpilation scenarios.

Supported Plugins:

• CSS System.import('my/file.css!')
• Image System.import('some/image.png!image')
• JSON System.import('some/data.json!').then(function(json){})
• Text System.import('some/text.txt!text').then(function(text) {})

Additional Plugins:

• CoffeeScript System.import('./test.coffee!')
• Jade
• JSX System.import('template.jsx!')
• Markdown System.import('app/some/project/README.md!').then(function(html) {})
• WebFont System.import('google Port Lligat Slab, Droid Sans !font')
• Ember Handlebars System.import('template.hbs!')

Read the guide here on creating plugins.

Running the tests

To install the dependencies correctly, run bower install from the root of the repo, then open test/test.html in a browser with a local server or file access flags enabled.

License

MIT