@babel/plugin-transform-modules-systemjs

What is @babel/plugin-transform-modules-systemjs?

The @babel/plugin-transform-modules-systemjs package is a plugin for Babel that transforms ECMAScript modules to SystemJS format. This is useful for enabling module loading in environments that do not natively support ES modules, or for integrating with module loaders that expect SystemJS format. It allows developers to write their code using the standard ES6 module syntax and then compile it to a format that is compatible with the SystemJS loader.

What are @babel/plugin-transform-modules-systemjs's main functionalities?

Transform ES modules to SystemJS

This feature allows you to write your modules using ES6 import/export syntax and then transform them into SystemJS format. The code sample shows a simple import statement that would be converted to SystemJS format by the plugin.

import { foo } from 'my-module';
foo();

Customizable module IDs

The plugin allows for customization of the generated module IDs, enabling better integration with existing SystemJS configurations and module naming conventions. The code sample illustrates an export statement that would be transformed, with the module ID being customizable.

export const myExport = () => 'Hello World';

Interop with CommonJS and AMD modules

The plugin provides interoperability with CommonJS and AMD modules, allowing them to be imported into SystemJS formatted modules. The code sample demonstrates importing a CommonJS module and using it within an ES module.

import cjsModule from 'commonjs-module';
cjsModule.doSomething();

Other packages similar to @babel/plugin-transform-modules-systemjs

@babel/plugin-transform-modules-commonjs

This package transforms ES6 modules to CommonJS format. It is similar to @babel/plugin-transform-modules-systemjs but targets a different module system. While SystemJS is a dynamic module loader that can load various module formats, CommonJS is a standard for Node.js and is used for server-side and some client-side JavaScript applications.

@babel/plugin-transform-modules-amd

This Babel plugin transforms ES6 modules to Asynchronous Module Definition (AMD) format. Similar to the SystemJS plugin, it allows for writing modules in ES6 syntax and compiling them to a format compatible with AMD loaders like RequireJS. The main difference is the target module system; AMD is primarily used for asynchronous loading of modules in browsers.

rollup-plugin-commonjs

This is a plugin for Rollup, a module bundler, that converts CommonJS modules into ES6 so they can be included in a Rollup bundle. It serves a similar purpose to @babel/plugin-transform-modules-systemjs by enabling the use of a different module format, but it is specific to the Rollup ecosystem and focuses on the conversion from CommonJS to ES6 rather than the other way around.

README

@babel/plugin-transform-modules-systemjs

This plugin transforms ES2015 modules to SystemJS

See our website @babel/plugin-transform-modules-systemjs for more information.

Install

Using npm:

npm install --save-dev @babel/plugin-transform-modules-systemjs

or using yarn:

yarn add @babel/plugin-transform-modules-systemjs --dev

Changelog

v7.27.1 (2025-04-30)

:eyeglasses: Spec Compliance

• babel-parser
  • #17254 Allow using of as lexical declaration within for (@JLHwung)
  • #17230 Disallow get/set in TSPropertySignature (@JLHwung)
• babel-parser, babel-types
  • #17193 Stricter TSImportType options parsing (@JLHwung)

:bug: Bug Fix

• babel-plugin-proposal-destructuring-private, babel-plugin-proposal-do-expressions, babel-traverse
  • #17137 fix: do expressions should allow early exit (@kermanx)
• babel-helper-wrap-function, babel-plugin-transform-async-to-generator
  • #17251 Fix: propagate argument evaluation errors through async promise chain (@magic-akari)
• babel-helper-remap-async-to-generator, babel-plugin-transform-async-to-generator
  • #17231 fix apply()/call() annotated as pure (@Lacsw)
• babel-helper-fixtures, babel-parser
  • #17233 Create ChainExpression within TSInstantiationExpression (@JLHwung)
• babel-generator, babel-parser
  • #17226 Fill optional AST properties when both estree and typescript parser plugin are enabled (Part 2) (@JLHwung)
• babel-parser
  • #17224 Fill optional AST properties when both estree and typescript parser plugin are enabled (Part 1) (@JLHwung)
  • #17080 Fix start of TSParameterProperty (@JLHwung)
• babel-compat-data, babel-preset-env
  • #17228 Update firefox bugfix compat data (@JLHwung)
• babel-traverse
  • #17156 fix: Objects and arrays with multiple references should not be evaluated (@liuxingbaoyu)
• babel-generator
  • #17216 Fix: support const type parameter in generator (@JLHwung)

:nail_care: Polish

• babel-plugin-bugfix-v8-spread-parameters-in-optional-chaining, babel-plugin-proposal-decorators, babel-plugin-transform-arrow-functions, babel-plugin-transform-class-properties, babel-plugin-transform-destructuring, babel-plugin-transform-object-rest-spread, babel-plugin-transform-optional-chaining, babel-plugin-transform-parameters, babel-traverse
  • #17221 Reduce generated names size for the 10th-11th (@nicolo-ribaudo)

:house: Internal

• babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime
  • #17263 Remove unused regenerator-runtime dep in @babel/runtime (@nicolo-ribaudo)
• babel-compat-data, babel-preset-env
  • #17256 Tune plugin compat data (@JLHwung)
• babel-compat-data, babel-standalone
  • #17236 migrate babel-compat-data build script to mjs (@JLHwung)
• Other
  • #17232 Bump typescript-eslint to 8.29.1 (@JLHwung)
  • #17219 test: add basic typescript-eslint integration tests (@JLHwung)
  • #17205 Inline regenerator in the relevant packages (@nicolo-ribaudo)
• babel-register
  • #16844 Migrate @babel/register to cts (@liuxingbaoyu)
• babel-cli, babel-compat-data, babel-core, babel-generator, babel-helper-compilation-targets, babel-helper-fixtures, babel-helper-module-imports, babel-helper-module-transforms, babel-helper-plugin-test-runner, babel-helper-transform-fixture-test-runner, babel-helpers, babel-node, babel-parser, babel-plugin-transform-modules-amd, babel-plugin-transform-modules-commonjs, babel-plugin-transform-modules-systemjs, babel-plugin-transform-modules-umd, babel-plugin-transform-react-display-name, babel-plugin-transform-regenerator, babel-plugin-transform-runtime, babel-plugin-transform-typeof-symbol, babel-plugin-transform-typescript, babel-preset-env, babel-register, babel-standalone, babel-types
  • #17207 Enforce node protocol import (@JLHwung)
• babel-plugin-transform-regenerator
  • #17205 Inline regenerator in the relevant packages (@nicolo-ribaudo)
  • #17205 Inline regenerator in the relevant packages (@nicolo-ribaudo)
• babel-helpers, babel-plugin-transform-async-generator-functions, babel-plugin-transform-regenerator, babel-preset-env, babel-runtime-corejs3
  • #17205 Inline regenerator in the relevant packages (@nicolo-ribaudo)
• babel-helpers, babel-plugin-transform-regenerator
  • #17205 Inline regenerator in the relevant packages (@nicolo-ribaudo)
  • #17205 Inline regenerator in the relevant packages (@nicolo-ribaudo)
• babel-helpers
  • #17205 Inline regenerator in the relevant packages (@nicolo-ribaudo)

:microscope: Output optimization

• babel-helpers, babel-plugin-transform-modules-commonjs, babel-runtime-corejs3
  • #16538 Reduce interopRequireWildcard size (@liuxingbaoyu)
• babel-helpers, babel-plugin-transform-async-generator-functions, babel-plugin-transform-regenerator, babel-preset-env, babel-runtime-corejs3
  • #17213 Reduce regeneratorRuntime size (@liuxingbaoyu)