Universal dynamic module loader - loads ES6 modules, AMD, CommonJS and global scripts in the browser and NodeJS.
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.
- Loader Configuration
- Map Configuration
- Meta Configuration
- Module Format Support
- Relative Dynamic Loading
- Versions Extension
- Production Workflows
- Creating Plugins
- Creating a Custom Module Format
Download es6-module-loader.js
and traceur.js
and locate them in the same folder as system.js
from this repo.
We then include dist/system.js
with a script tag in the page.
es6-module-loader.js
will then be included from the same folder automatically and Traceur is dynamically included from traceur.js
when loading an ES6 module only.
Alternatively, es6-module-loader.js
or traceur.js
can be included before system.js
with a script tag in the page.
The standard application structure would be something like the following:
index.html:
<script src="system.js"></script>
<script>
// Identical to writing System.baseURL = ...
System.config({
// set all requires to "lib" for library code
baseURL: '/lib/',
// set "app" as an exception for our application code
paths: {
'app/*': '/app/*.js'
}
});
System.import('app/app')
</script>
app/app.js:
// relative require for within the package
require('./local-dep'); // -> /app/local-dep.js
// library resource
var $ = require('jquery'); // -> /lib/jquery.js
// format detected automatically
console.log('loaded CommonJS');
Module format detection happens in the order System.register, ES6, AMD, then CommonJS and falls back to global modules.
Named defines are also supported, with the return value for a module containing named defines being its last named define.
Note that when running locally, ensure you are running from a local server or a browser with local XHR requests enabled. If not you will get an error message.
For Chrome on Mac, you can run it with:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files &> /dev/null &
In Firefox this requires navigating to
about:config
, enteringsecurity.fileuri.strict_origin_policy
in the filter box and toggling the option to false.
app/es6-file.js:
export class q {
constructor() {
this.es6 = 'yay';
}
}
<script>
System.import('app/es6-file').then(function(m) {
console.log(new m.q().es6); // yay
});
</script>
ES6 modules define named exports, provided as getters on a special immutable Module
object.
To build for production, see the production workflows.
For further details about SystemJS module format support, see the wiki page.
For further infomation on ES6 module loading, see the ES6 Module Loader polyfill documentation.
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 Community Plugins:
- 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')
Additional plugin submissions to the above are welcome.
Read the guide here on creating plugins.
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');
// loads './app.js' from the current directory
System.import('./app').then(function(m) {
console.log(m);
});
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.
MIT