babel-plugin-transform-es2015-modules-systemjs

What is babel-plugin-transform-es2015-modules-systemjs?

The babel-plugin-transform-es2015-modules-systemjs package is a Babel plugin that transforms ES2015 (ES6) module syntax into SystemJS module format. This allows developers to use ES2015 module syntax while ensuring compatibility with SystemJS, a dynamic module loader.

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

Transform ES2015 import statements to SystemJS

This feature transforms ES2015 import statements into SystemJS-compatible format. The code sample demonstrates how to use Babel to transform an ES2015 import statement into a SystemJS module.

const code = `import { example } from 'module';`;
const output = Babel.transform(code, { plugins: ['transform-es2015-modules-systemjs'] }).code;
console.log(output);

Transform ES2015 export statements to SystemJS

This feature transforms ES2015 export statements into SystemJS-compatible format. The code sample shows how to use Babel to transform an ES2015 export statement into a SystemJS module.

const code = `export const example = 'example';`;
const output = Babel.transform(code, { plugins: ['transform-es2015-modules-systemjs'] }).code;
console.log(output);

Other packages similar to babel-plugin-transform-es2015-modules-systemjs

babel-plugin-transform-es2015-modules-commonjs

This Babel plugin transforms ES2015 module syntax into CommonJS format. It is useful for environments that use CommonJS modules, such as Node.js. Compared to babel-plugin-transform-es2015-modules-systemjs, it targets a different module system.

babel-plugin-transform-es2015-modules-amd

This Babel plugin transforms ES2015 module syntax into AMD (Asynchronous Module Definition) format. It is useful for environments that use AMD modules, such as RequireJS. Compared to babel-plugin-transform-es2015-modules-systemjs, it targets the AMD module system.

babel-plugin-transform-es2015-modules-umd

This Babel plugin transforms ES2015 module syntax into UMD (Universal Module Definition) format. UMD modules are compatible with both CommonJS and AMD environments. Compared to babel-plugin-transform-es2015-modules-systemjs, it provides a more universal solution for module compatibility.

README

babel-plugin-transform-es2015-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 syntax-dynamic-import plugin before this one.

Installation

npm install --save-dev babel-plugin-transform-es2015-modules-systemjs

Usage

Via .babelrc (Recommended)

.babelrc

Without options:

{
  "plugins": ["transform-es2015-modules-systemjs"]
}

With options:

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

Via CLI

babel --plugins transform-es2015-modules-systemjs script.js

Via Node API

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