systemjs

What is systemjs?

SystemJS is a dynamic module loader that can load ES modules, AMD, CommonJS, and global scripts in the browser and Node.js. It provides a way to load modules asynchronously and supports various module formats, making it a versatile tool for managing dependencies and module loading in JavaScript applications.

What are systemjs's main functionalities?

Loading ES Modules

SystemJS can dynamically import ES modules. The code sample demonstrates how to load an ES module asynchronously and handle the loaded module.

System.import('/path/to/module.js').then(function(module) {
  console.log(module);
});

Loading CommonJS Modules

SystemJS can also load CommonJS modules. The code sample shows how to load a CommonJS module asynchronously.

System.import('/path/to/commonjs-module.js').then(function(module) {
  console.log(module);
});

Loading AMD Modules

SystemJS supports loading AMD modules. The code sample demonstrates how to load an AMD module asynchronously.

System.import('/path/to/amd-module.js').then(function(module) {
  console.log(module);
});

Loading Global Scripts

SystemJS can load global scripts that do not export any modules. The code sample shows how to load a global script asynchronously.

System.import('/path/to/global-script.js').then(function() {
  console.log('Global script loaded');
});

Configuring SystemJS

SystemJS allows configuration for module loading. The code sample demonstrates how to configure the base URL, paths, and module mappings.

System.config({
  baseURL: '/base/url',
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  map: {
    'jquery': 'npm:jquery@3.5.1/dist/jquery.js'
  }
});

Other packages similar to systemjs

requirejs

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, such as Rhino and Node. Compared to SystemJS, RequireJS primarily focuses on AMD modules and does not support as many module formats.

webpack

Webpack is a module bundler that takes modules with dependencies and generates static assets representing those modules. Unlike SystemJS, which is a dynamic module loader, Webpack bundles modules at build time, which can result in better performance for production applications.

browserify

Browserify allows you to use Node.js-style require() to organize your browser code and load modules. It transforms Node.js modules into a format that can be used in the browser. Compared to SystemJS, Browserify focuses on CommonJS modules and does not support as many module formats.

es-module-loader

ES Module Loader is a polyfill for the ES Module Loader specification. It provides a way to load ES modules in environments that do not natively support them. Compared to SystemJS, ES Module Loader is more focused on ES modules and does not support other module formats.

README

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. s.js minimal loader

The 1.5KB s.js minimal loader supports:

• 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. system.js loader

The 2.5KB system.js loader supports:

• 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
• Works in IE11+ when Fetch (for WASM) and Promises are polyfilled

Extras

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.

Installation

npm install systemjs@alpha

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>

Polyfills for Older Browsers

Promises

Both builds of SystemJS need Promises in the environment to work, which aren't supported in older browsers like IE11.

Promises can be conditionally polyfilled using, for example, Bluebird (generally the fastest Promise polyfill):

<script>
  if (typeof Promise === 'undefined')
    document.write('<script src="node_modules/bluebird/js/browser/bluebird.core.js"><\/script>');
</script>

Generally document.write is not recommended when writing web applications, but for this use case it works really well and will only apply in older browsers anyway.

Fetch

To support package maps in the system.js build, a fetch polyfill is need. The GitHub polyfill is recommended:

<script>
  if (typeof fetch === 'undefined')
    document.write('<script src="node_modules/whatwg-fetch/fetch.js"><\/script>');
</script>

Loader Extensions

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

• transform-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