@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.15.4 (2021-09-02)

:eyeglasses: Spec Compliance

• babel-helper-create-class-features-plugin, babel-helpers, babel-plugin-bugfix-v8-spread-parameters-in-optional-chaining, babel-plugin-proposal-async-generator-functions, babel-plugin-proposal-class-properties, babel-plugin-proposal-private-methods, babel-plugin-proposal-private-property-in-object, babel-preset-env, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime
  • #13601 Disallow reinitializing private elements (@komyg)

:bug: Bug Fix

• #13638 [eslint] Allow "latest" as ecmaVersion (@fisker)
• babel-traverse, babel-types
  • #13723 getBindingIdentifiers should return params for private methods (@JLHwung)
• babel-types
  • #13715 [babel 8] fix: stricter rest element builder check (@JLHwung)
• babel-helper-compilation-targets
  • #13697 fix: pass browserslistEnv to resolveTargets (@meskill)
• babel-helper-create-class-features-plugin, babel-plugin-proposal-class-properties, babel-plugin-proposal-private-property-in-object
  • #13656 fix: fix static private field shadowed by local variable (@colinaaa)
• babel-plugin-transform-typescript
  • #13664 [ts] Fix transform for nested namespaces shorthand syntax (@nicolo-ribaudo)
• babel-parser
  • #13680 fix(babel-parser): delete static property from class static block for TS (@sosukesuzuki)
  • #13695 fix: assure left bracket is not consumed after dot (@JLHwung)
• babel-core
  • #13532 fix: non breaking align options naming (@fedeci)

:memo: Documentation

• babel-parser
  • #13691 add missing ExportNamespaceSpecifier in spec.md (@flyinox)

:house: Internal

• babel-helper-create-class-features-plugin, babel-plugin-proposal-class-static-block, babel-plugin-proposal-private-property-in-object, babel-plugin-syntax-class-static-block, babel-plugin-syntax-private-property-in-object, babel-plugin-syntax-top-level-await, babel-plugin-transform-modules-commonjs, babel-plugin-transform-modules-systemjs, babel-preset-env, babel-standalone
  • #13717 archive stage 4 parser plugins (@JLHwung)

:running_woman: Performance

• babel-core, babel-generator, babel-helper-annotate-as-pure, babel-helper-builder-binary-assignment-operator-visitor, babel-helper-builder-react-jsx, babel-helper-define-map, babel-helper-explode-assignable-expression, babel-helper-function-name, babel-helper-get-function-arity, babel-helper-hoist-variables, babel-helper-member-expression-to-functions, babel-helper-module-imports, babel-helper-module-transforms, babel-helper-optimise-call-expression, babel-helper-remap-async-to-generator, babel-helper-replace-supers, babel-helper-simple-access, babel-helper-skip-transparent-expression-wrappers, babel-helper-split-export-declaration, babel-helper-wrap-function, babel-helpers, babel-preset-env, babel-template, babel-traverse
  • #13685 Use named imports for babel types (@JLHwung)
• babel-cli, babel-helper-define-map, babel-helpers, babel-node, babel-parser, babel-plugin-proposal-async-generator-functions, babel-plugin-proposal-decorators, babel-plugin-transform-classes, babel-plugin-transform-for-of, babel-plugin-transform-modules-systemjs, babel-plugin-transform-parameters, babel-traverse, babel-types
  • #13609 perf: partially replace .concat with .push (@fedeci)