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.
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'
}
});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 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 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 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.
Configurable module loader enabling backwards compatibility workflows for ES modules in browsers. If you're interested in modern workflows for ES module compatible browsers only, see ES Module Shims.
Release Links:
For discussion, join the Gitter Room.
The systemjs-examples repo contains a variety of examples demonstrating how to use SystemJS.
SystemJS can load multiple modules in less than a millisecond with its performance around a factor of 1.5 times the performance of native ES modules. The following performance benchmark was run by loading 426 javascript modules (all of @babel/core) on a Macbook pro with fast wifi internet connection. Each test was the average of five page loads in Chrome 80.
| Tool | Uncached | Cached |
|---|---|---|
| Native modules | 1668ms | 49ms |
| SystemJS | 2334ms | 81ms |
| es-module-shims | 2671ms | 602ms |
SystemJS provides two hookable base builds:
The minimal 2.3KB s.js loader provides a workflow where code written for production workflows of native ES modules in browsers (like Rollup code-splitting builds), can be transpiled to the System.register module format to work in older browsers that don't support native modules, including IE11++.
Since the ES module semantics such as live bindings, circular references, contextual metadata, dynamic import and top-level await can all be fully supported this way, while supporting CSP and cross-origin support, this workflow can be relied upon as a polyfill-like path.
<script type="systemjs-importmap"> (requires a fetch polyfill for eg IE11).import 'lodash') like the native module loader.The 3.7KB system.js loader loader builds on the s.js core and adds support for global loading, non-javascript module, and the SystemJS registry API.
<script type="systemjs-importmap"> (requires a fetch polyfill for eg IE11).The 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:
file:// urls).http:// urls), with included caching that respects the Content-Type header.applyImportMap api).Loading CommonJS modules is not currently supported in this loader and likely won't be. If you find you need them it is more advisable to use Node.js native module support where possible instead of the SystemJS Node.js loader.
The following pluggable extras can be dropped in with either the s.js or system.js loader:
Window.define which is created).import { x } from './global.js' instead of import G from './global.js'; G.x)System.register('name', ...) named bundles which can then be imported as System.import('name') (as well as AMD named define support)loader.transformThe following extras are included in system.js loader by default, and can be added to the s.js loader for a smaller tailored footprint:
System.import('//unpkg.com/lodash')..css, .wasm, .json module type loading support in line with the existing modules specifications.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.
Thank you to all our backers! 🙏 [Become a backer]
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
npm install systemjs
You can load System.register modules with a script element in your HTML:
<script src="system.js"></script>
<script>System.import('/js/main.js')</script>
<script>System.import('name-of-module')</script>
You can also dynamically load modules at any time with System.import():
System.import('/js/main.js');
where main.js is a module available in the System.register module format.
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:
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:
System.register('name', [], function () { ... });
While these can be supported with the named register extension, this approach is typically not recommended for modern modules workflows.
Say main.js depends on loading 'lodash', then we can define an import map:
<script src="system.js"></script>
<script type="systemjs-importmap">
{
"imports": {
"lodash": "https://unpkg.com/lodash@4.17.10/lodash.js"
}
}
</script>
<!-- Alternatively:
<script type="systemjs-importmap" src="path/to/map.json">
-->
<script>
System.import('/js/main.js');
</script>
A list of projects that use or work with SystemJS in providing modular browser workflows. Post a PR.
This list can be extended to include third-party loader extensions. Post a PR.
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 webpack@4.30.0, it is now possible to compile webpack bundles to System.register format, by modifying your webpack config:
{
output: {
libraryTarget: 'system',
}
}
If building code using the System global in Webpack, the following config is needed to avoid rewriting:
{
module: {
rules: [
{ parser: { system: false } }
]
}
}
Third party libraries and npm packages may be used as long as they are published in a supported module format. For packages that do not exist in a supported module format, here is a list of github repos that publish System.register versions of popular third party libraries (such as react, react-dom, rxjs, etc).
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.writeis not recommended when writing web applications, but for this use case it works really well and will only apply in older browsers anyway.
To support import 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>
If using CSS modules, a Constructable Stylesheets polyfill is needed - see the module types documentation for further info.
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
For the changelog, see CHANGELOG.md.
MIT
FAQs
Dynamic ES module loader
The npm package systemjs receives a total of 0 weekly downloads. As such, systemjs popularity was classified as not popular.
We found that systemjs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.