@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.

Example

In

export default 42;

Out

System.register([], function (_export, _context) {
  return {
    setters: [],
    execute: function () {
      _export("default", 42);
    }
  };
});

For dynamic import support (import('./lazy.js').then(m => ...)), enable the @babel/plugin-syntax-dynamic-import plugin before this one.

Installation

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

Usage

Via .babelrc (Recommended)

.babelrc

Without options:

{
  "plugins": ["@babel/plugin-transform-modules-systemjs"]
}

With options:

{
  "plugins": [
    ["@babel/plugin-transform-modules-systemjs", {
      // outputs SystemJS.register(...)
      "systemGlobal": "SystemJS"
    }]
  ]
}

Via CLI

babel --plugins @babel/plugin-transform-modules-systemjs script.js

Via Node API

require("@babel/core").transform("code", {
  plugins: ["@babel/plugin-transform-modules-systemjs"]
});