# SystemJS [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/systemjs/systemjs?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![Backers on Open Collective](https://opencollective.com/systemjs/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/systemjs/sponsors/badge.svg)](#sponsors) [![Downloads on JS Delivr](https://data.jsdelivr.com/v1/package/npm/systemjs/badge)](https://www.jsdelivr.com/package/npm/systemjs) SystemJS is a hookable, standards-based module loader. It provides a workflow where code written for production workflows of native ES modules in browsers ([like Rollup code-splitting builds](https://rollupjs.org/guide/en#code-splitting)), can be transpiled to the [System.register module format](docs/system-register.md) to work in older browsers that don't support native modules, running [almost-native module speeds](#performance) while supporting top-level await, dynamic import, circular references and live bindings, import.meta.url, module types, import maps, integrity and Content Security Policy with compatibility in older browsers back to IE11. ## Sponsors

> **Support SystemJS by [becoming a sponsor](https://opencollective.com/systemjs#sponsor).** Your logo will show up here with a link to your website. ## Backers Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/systemjs#backer)]

### Overview #### 1. s.js minimal production loader The minimal [2.8KB s.js production loader](dist/s.min.js) includes the following features: * Loads `System.register` modules, the CSP-compatible [SystemJS module format](docs/system-register.md). * Support for loading bare specifier names with [import maps](docs/import-maps.md) via ` ``` ### Loading with System.import You can also dynamically load modules at any time with `System.import()`: ```js System.import('/js/main.js'); ``` where `main.js` is a module available in the System.register module format. ### 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 Say `main.js` depends on loading `'lodash'`, then we can define an import map: ```html ``` ### IE11 Support IE11 continues to be fully supported, provided the relevant polyfills are available. The main required polyfill is a `Promise` polyfill. If using import maps a `fetch` polyfill is also needed. Both of these can be loaded conditionally using for example using [Bluebird Promises](http://bluebirdjs.com/docs/getting-started.html) and the [GitHub Fetch Polyfill](https://github.github.io/fetch/) over Unpkg: ```html ``` located _before_ the SystemJS script itself. The above will ensure these polyfills are only fetched for older browsers without `Promise` and `fetch` support. #### Note on Import Maps Support in IE11 When using external import maps (those with `src=""` attributes), there is an IE11-specific workaround that might need to be used. Browsers should not make a network request when they see `` during parsing of the initial HTML page. However, IE11 does so. [Codesandbox demonstration](https://codesandbox.io/s/vibrant-black-xiok4?file=/index.html) 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. This can be worked around by adding `crossorigin="anonymous"` as an attribute to the `

	Stars	Issues	Version	Updated	Created
@teambit/bvm	40	21	1.0.3	3 months ago	3 years ago
luigi	0	0	0.0.1	11 years ago	11 years ago
oc			0.49.53	14 days ago	9 years ago
single-spa	13,032	54	6.0.1	2 months ago	9 years ago
systemjs	12,860	68	6.14.3	4 months ago	10 years ago

@teambit/bvm vs luigi vs oc vs single-spa vs systemjs

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past