SystemJS 2.0

Configurable module loader enabling backwards compatibility workflows for ES modules in browsers.

Read the SystemJS 2.0 announcement post

For the previous release see the SystemJS 0.21.x branch

SystemJS is currently sponsored by Canopy Tax.

SystemJS 2.0 provides two hookable base builds:

1. The 1.5KB s.js minimal loader:

• Loads System.register modules supporting all ES module semantics
• Loads and resolves URLs only, excluding support for bare specifier names (eg /lodash.js but not lodash)
• Hookable loader supporting custom extensions
• Works in IE11+ when Promises are polyfilled
• Ideal for use in Rollup code-splitting builds

2. The 2.5KB system.js loader:

• Tracing hooks and registry deletion API for reloading workflows
• Supports loading global scripts as modules, as well as Sytem.register modules
• Supports package name maps for resolving bare specifier names, loaded via <script type="systemjs-packagenamemap">
• Supports loading WASM based on the .wasm file extension
• Supports running in Web Workers

In addition, the following pluggable extras are provided:

• AMD loading support (through Window.define which is created)
• Named exports convenience extension support for global and AMD module formats (import { x } from './global.js' instead of import G from './global.js'; G.x)
• Transform loader support, using fetch and eval, supporting a hookable loader.transform

Since all loader features are hookable, custom extensions can be easily made following the same approach as the bundled extras. See the hooks documentation for more information.

For discussion, join the Gitter Room.

Documentation

• Package Name Maps
• API
• System.register
• Loader Hooks

Example Usage

Loading a System.register module

<script src="system.js"></script>
<script>
  System.import('/js/main.js');
</script>

where main.js is a module available in the System.register module format.

Package Name Maps

Say main.js depends on loading 'lodash', then we can define a package name map:

<script type="systemjs-packagemap">
{
  "packages": {
    "lodash": "https://unpkg.com/lodash@4.17.10/lodash.js"
  }
}
</script>
<!-- Alternatively:
<script type="systemjs-packagemap" src="path/to/map.json">
-->
<!-- SystemJS must be loaded after the package map -->
<script src="system.js"></script>
<script>
  System.import('/js/main.js');
</script>

Browser transpilation

To load ES modules directly in older browsers with SystemJS we can install and use the Babel plugin:

<script src="system.js"></script>
<script src="extras/transform.js"></script>
<script src="plugin-babel/dist/babel-transform.js"></script>
<script>
  // main and all its dependencies will now run through transform before loading
  System.import('/js/main.js');
</script>

Loader Extensions

This list can be extended to include third-party loader extensions. Feel free to post a PR to share your work.

• plugin-babel Supports ES module transformation into System.register with Babel.

Contributing to SystemJS

Project bug fixes and changes are welcome for discussion, provided the project footprint remains minimal.

To run the tests:

npm run build && npm run test

License

MIT