2. system.js loader

• [Tracing hooks](docs/hooks.md##onloaderr-id-deps-iserrsource-sync) and [registry deletion API](docs/api.md#registry) for reloading workflows.
• Supports loading Wasm, CSS and JSON [module types](docs/module-types.md).
• Includes the [global loading extra](#extras) for loading global scripts, useful for loading library dependencies traditionally loaded with script tags.

3. system-node.cjs loader

The [system-node.cjs](/dist/system-node.cjs) loader is a version of SystemJS build designed to run in Node.js, typically for workflows where System modules need to be executed on the server like SSR. It has the following features:

Extras

The following [pluggable extras](dist/extras) can be dropped in with either the s.js or system.js loader:

SystemJS Babel

To support easy loading of TypeScript or ES modules in development SystemJS workflows, see the SystemJS Babel Extension.

SystemJS does not support direct integration with the native ES module browser loader because there is no way to share dependencies between the module systems. For extending the functionality of the native module loader in browsers, see ES module Shims, which like SystemJS, provides workflows for import maps and other modules features, but on top of base-level modules support in browsers, which it does using a fast Wasm-based source rewriting to remap module specifiers.

Performance

| Tool | Uncached | Cached |
| ---- | -------- | ------ |
| Native modules | 1668ms | 49ms |
| SystemJS | 2334ms | 81ms |

Getting Started

Introduction video.

The systemjs-examples repo contains a variety of examples demonstrating how to use SystemJS.

Installation

npm install systemjs

Documentation

• [Import Maps](docs/import-maps.md)
• [API](docs/api.md)
• [System.register](docs/system-register.md)
• [Loader Hooks](docs/hooks.md)
• [Module Types](docs/module-types.md)

Example Usage

Loading a System.register module

html

Loading with System.import

js
System.import('/js/main.js');

Bundling workflow

For an example of a bundling workflow, see the Rollup Code Splitting starter project - https://github.com/rollup/rollup-starter-code-splitting.

Note that when building System modules you typically want to ensure anonymous System.register statements like:

js
System.register([], function () { ... });

are emitted, as these can be loaded in a way that behaves the same as normal ES modules, and not named register statements like:

js
System.register('name', [], function () { ... });

While these can be supported with the named register extension, this approach is typically not recommended for modern modules workflows.

Import Maps

html


{
  "imports": {
    "lodash": "https://unpkg.com/[email protected]/lodash.js"
  }
}

<!-- Alternatively:

-->

IE11 Support

IE11 continues to be fully supported, provided the relevant polyfills are available.

Both of these can be loaded conditionally using for example using Bluebird Promises and the GitHub Fetch Polyfill over Unpkg:

html

  if (typeof Promise === 'undefined')
    document.write('<\/script>');
  if (typeof fetch === 'undefined')
    document.write('<\/script>');

Note on Import Maps Support in IE11

Normally this is not an issue, as SystemJS will make an additional request via fetch/xhr for the import map. However, a problem can occur when the file is cached after the first request, since the first request caused by IE11 does not send the Origin request header by default. If the request requires CORS, the lack of an Origin request header causes many web servers (including AWS Cloudfront) to omit the response CORS headers. This can result in the resource being cached without CORS headers, which causes the later SystemJS fetch() to fail because of CORS checks.

Community Projects

A list of projects that use or work with SystemJS in providing modular browser workflows. Post a PR.

• beyondjs.com -TypeScript first meta-framework for universal microfrontends/micronservices.
• esm-bundle - list of System.register versions for major libraries, including documentation on how to create a System.register bundle for any npm package.
• es-dev-server - A web server for developing without a build step.
• import map overrides - Dynamically inject an import map stored in local storage so that you can override the URL for any module. Can be useful for running development modules on localhost against the server.
• js-env - Collection of development tools providing a unified workflow to write JavaScript for the web, node.js or both at the same time.
• jspm.org - Package manager for native modules, using SystemJS for backwards compatibility.
• single-spa - JavaScript framework for front-end microservices.
• systemjs-webpack-interop - npm lib for setting webpack public path and creating webpack configs that work well with SystemJS.
• @wener/system - hooks to make System works with npm registry & package.json}

Compatibility with Webpack

Code-splitting builds on top of native ES modules, like Rollup offers, are an alternative to the Webpack-style chunking approach - offering a way to utilize the native module loader for loading shared and dynamic chunks instead of using a custom registry and loader as Webpack bundles include. Scope-level optimizations can be performed on ES modules when they are combined, while ensuring no duplicate code is loaded through dynamic loading and code-sharing in the module registry, using the features of the native module loader and its dynamic runtime nature.

systemjs-webpack-interop is a community-maintained npm library that might help you get webpack and systemjs working well together.

As of [email protected], it is now possible to compile webpack bundles to System.register format, by modifying your webpack config:

js
{
  output: {
    libraryTarget: 'system', 
  }
}

js
{
  module: {
    rules: [
      { parser: { system: false } }
    ]
  }
}

Using npm packages