SystemJS
![Support](https://supporter.60devs.com/api/b/33df4abbec4d39260f49015d2457eafe/SystemJS)
For upgrading to SystemJS 0.17-0.19, see the SystemJS 0.17 release upgrade notes for more information, or read the updated SystemJS Overview guide.
Universal dynamic module loader - loads ES6 modules, AMD, CommonJS and global scripts in the browser and NodeJS. Works with both Traceur and Babel.
Built on top of the ES6 Module Loader polyfill.
~15KB minified and gzipped, runs in IE8+ and NodeJS.
For discussion, see the Google Group.
For a list of guides and tools, see the Third-Party Resources Wiki.
Documentation
Basic Use
Browser
<script src="system.js"></script>
<script>
System.config({
baseURL: '/app'
});
System.import('main.js');
</script>
To load ES6, locate a transpiler (traceur.js
, 'browser.js' from Babel, or 'typescript.js' from TypeScript)
in the baseURL path, then set the transpiler:
<script>
System.config({
transpiler: 'babel',
babelOptions: {
}
});
</script>
Alternatively a custom path to Babel or Traceur can also be set through paths:
System.config({
map: {
traceur: 'path/to/traceur.js'
}
});
Polyfills
SystemJS relies on Promise
and URL
being present in the environment. When these are not available it will send a request out to the system-polyfills.js
file located in the dist folder which will polyfill window.Promise
and window.URLPolyfill
.
This is typically necessary in IE, so ensure to keep this file in the same folder as SystemJS.
Alternatively these polyfills can be loaded with a script tag before SystemJS or via other polyfill implementations as well.
NodeJS
To load modules in NodeJS, install SystemJS with:
npm install systemjs
If transpiling ES6, also install the transpiler:
npm install traceur babel typescript
We can then load modules equivalently to in the browser:
var System = require('systemjs');
System.transpiler = 'traceur';
System.import('./app.js').then(function(m) {
console.log(m);
});
If using TypeScript, set global.ts = require('typescript')
before importing to ensure it is loaded correctly.
If you are using jspm as a package manager you will also need to load the generated config.js
. The best way to do this in node is to get your System
instance through jspm, which will automatically load your config correctly for you:
var System = require('jspm').Loader();
System.import('lodash').then(function (_) {
console.log(_);
});
Plugins
Supported loader plugins:
Additional Plugins:
Guides:
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