# SystemJS — Dynamic ES Module Loader for the Browser

> A configurable module loader that enables dynamic import() and ES module semantics in browsers and older environments without native module support.

## Install

Save as a script file and run:

# SystemJS — Dynamic ES Module Loader for the Browser

## Quick Use
```html
<!-- Include SystemJS -->
<script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.js"></script>

<!-- Configure import maps -->
<script type="systemjs-importmap">
{
  "imports": {
    "react": "https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js"
  }
}
</script>

<!-- Load your app -->
<script>
  System.import("./app.js");
</script>
```

## Introduction
SystemJS is a dynamic module loader that implements import maps and ES module semantics in environments that do not natively support them. It was instrumental in enabling module-based JavaScript development in the browser before native ES module support became widespread, and remains relevant for micro-frontend architectures.

## What SystemJS Does
- Loads ES modules, AMD, CommonJS, and global scripts dynamically at runtime
- Implements the import maps specification for module resolution
- Supports dynamic import() for code splitting without a build step
- Provides a plugin system for loading CSS, JSON, and other file types as modules
- Works in browsers back to IE11 with the s.js minimal loader variant

## Architecture Overview
SystemJS intercepts module load requests, resolves specifiers using import maps, fetches the module source, and evaluates it in a module registry. The System.register format wraps modules for environments without native ESM support. Plugins hook into the resolve, fetch, translate, and instantiate phases, enabling custom loading behavior for any file type.

## Self-Hosting & Configuration
- Include system.js or the minimal s.js variant via a script tag
- Define import maps inline or load them from an external JSON file
- Use the extras packages for AMD and named-register support
- Configure the loader via System.config() for base URL and map overrides
- Integrate with single-spa for micro-frontend module federation

## Key Features
- Import maps support for bare module specifier resolution
- Dynamic import() without requiring a bundler or build step
- Multiple module format support (ESM, AMD, CommonJS, globals)
- Plugin architecture for loading non-JavaScript assets
- Minimal s.js variant under 2 KB for production use

## Comparison with Similar Tools
- **Native ES Modules** — Browsers now support import/export natively with import maps; SystemJS provides a polyfill for older browsers
- **webpack Module Federation** — Build-time module sharing between applications; more complex but integrated with the webpack ecosystem
- **RequireJS** — AMD module loader that preceded SystemJS; limited to the AMD format
- **import-maps polyfill (es-module-shims)** — Lighter polyfill focused solely on import maps without SystemJS's multi-format support

## FAQ
**Q: Is SystemJS still needed with native ES modules?**
A: For modern browsers with import map support, native ESM is sufficient. SystemJS remains useful for legacy browser support and micro-frontend architectures using single-spa.

**Q: What is System.register format?**
A: System.register is a module format that wraps ES modules for environments without native ESM. Build tools like Rollup and webpack can output this format for SystemJS consumption.

**Q: How does SystemJS relate to single-spa?**
A: single-spa, the micro-frontend framework, uses SystemJS as its recommended module loader for dynamically loading independently deployed micro-applications at runtime.

**Q: Can I use SystemJS with TypeScript?**
A: Yes. Configure your TypeScript compiler to output System.register format (module: "system" in tsconfig), and SystemJS will load the compiled output.

## Sources
- https://github.com/systemjs/systemjs
- https://github.com/systemjs/systemjs/blob/main/docs/README.md

---
Source: https://tokrepo.com/en/workflows/asset-a6556d0b
Author: Script Depot