or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

babel-plugin-transform-es2015-modules-systemjs

Babel plugin that transforms ES2015 module syntax to SystemJS format. This plugin converts standard ES2015 import/export declarations into System.register() calls compatible with the SystemJS universal module loader.

Package Information

Package Name: babel-plugin-transform-es2015-modules-systemjs
Package Type: npm
Language: JavaScript
Installation: npm install --save-dev babel-plugin-transform-es2015-modules-systemjs
Dependencies: babel-template, babel-helper-hoist-variables, babel-runtime

Core Imports

The plugin is used through Babel's plugin system rather than direct imports:

.babelrc

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

Node API

const babel = require("babel-core");

const result = babel.transform(code, {
  plugins: ["transform-es2015-modules-systemjs"]
});

Basic Usage

Input ES2015 Module

export default 42;
export const greeting = "Hello";
import { utils } from "./utils";

Output SystemJS Module

System.register(["./utils"], function (_export, _context) {
  "use strict";
  var utils;
  return {
    setters: [function (_utils) {
      utils = _utils.utils;
    }],
    execute: function () {
      _export("default", 42);
      const greeting = "Hello";
      _export("greeting", greeting);
    }
  };
});

Capabilities

Plugin Export

The plugin exports a default function that follows Babel's plugin API structure.

/**
 * Default export: Babel plugin factory function
 * @param {Object} babel - Babel object containing types and other utilities
 * @param {Object} babel.types - Babel types utility object for AST manipulation
 * @returns {Object} Babel plugin object with visitor methods
 */
export default function ({ types }) {
  return {
    visitor: {
      CallExpression(path, state) { /* Handle dynamic imports */ },
      ReferencedIdentifier(path, state) { /* Handle __moduleName */ },
      Program: {
        enter(path, state) { /* Initialize plugin state */ },
        exit(path, state) { /* Transform module structure */ }
      }
    }
  };
}

Plugin Configuration Options

The plugin accepts configuration options through Babel's plugin options system via state.opts.

interface PluginState {
  opts: {
    /** Name of the global SystemJS object (default: "System") */
    systemGlobal?: string;
  };
  contextIdent: Identifier;
}

interface NodePath {
  node: Node;
  scope: Scope;
  get(key: string): NodePath;
  replaceWith(node: Node): void;
  remove(): void;
  isAssignmentExpression(): boolean;
  isUpdateExpression(): boolean;
  isIdentifier(): boolean;
}

interface Identifier {
  type: "Identifier";
  name: string;
}

Configuration Examples:

Via .babelrc with options:

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

Via Node API:

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

Module Transformations

The plugin handles the following ES2015 module patterns:

Import Declarations

Default imports: import foo from "module" → SystemJS setter with default property access
Named imports: import { bar } from "module" → SystemJS setter with named property access
Namespace imports: import * as ns from "module" → SystemJS setter with full module assignment
Side-effect imports: import "module" → SystemJS dependency without setter body

Export Declarations

Default exports: export default value → _export("default", value)
Named exports: export const foo = 1 → Variable declaration + _export("foo", foo)
Export from: export { bar } from "module" → SystemJS setter with re-export logic
Export all: export * from "module" → SystemJS setter with property enumeration

Dynamic Imports

Dynamic import calls: import("module") → _context.import("module")

Module Metadata

Module name access: __moduleName → _context.id

Visitor Methods

The plugin implements several Babel visitor methods to transform different types of AST nodes.

interface PluginVisitor {
  /** Transforms dynamic import() calls to SystemJS context.import() */
  CallExpression(path: NodePath, state: PluginState): void;
  
  /** Transforms __moduleName references to context.id */
  ReferencedIdentifier(path: NodePath, state: PluginState): void;
  
  /** Plugin lifecycle methods for program-level transformations */
  Program: {
    /** Initialize plugin state and generate unique identifiers */
    enter(path: NodePath, state: PluginState): void;
    
    /** Main transformation logic converting ES2015 modules to SystemJS */
    exit(path: NodePath, state: PluginState): void;
  };
}

Usage Patterns

Via .babelrc Configuration

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

Via CLI

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

Via Node API

const babel = require("babel-core");

const result = babel.transform(sourceCode, {
  plugins: ["transform-es2015-modules-systemjs"]
});

console.log(result.code); // SystemJS formatted output

With Custom SystemJS Global

babel.transform(code, {
  plugins: [
    ["transform-es2015-modules-systemjs", {
      systemGlobal: "SystemJS" // Uses SystemJS.register instead of System.register
    }]
  ]
});

With Module ID Configuration

The plugin works with Babel's built-in module configuration options:

babel.transform(code, {
  moduleIds: true,  // Enable module ID generation
  moduleId: "my-custom-module-name", // Specify custom module name
  plugins: ["transform-es2015-modules-systemjs"]
});

This produces:

System.register("my-custom-module-name", [], function (_export, _context) {
  // module body
});

SystemJS Output Format

The plugin generates SystemJS modules using the System.register() format:

/**
 * SystemJS module registration format produced by the plugin
 * @param {string[]} dependencies - Array of module dependency paths
 * @param {Function} factory - Factory function that defines the module
 */
System.register(dependencies, function(_export, _context) {
  "use strict";
  return {
    setters: [
      // Functions for receiving dependency exports
    ],
    execute: function() {
      // Module initialization and export code
    }
  };
});

The generated modules are compatible with SystemJS loaders and can be used in browsers and Node.js environments that support SystemJS.

Dependencies

The plugin relies on several Babel helper packages for its functionality:

/** Core dependencies used internally by the plugin */
interface PluginDependencies {
  /** Template builder for generating SystemJS register calls */
  "babel-template": {
    /** Creates template functions from string templates */
    default(template: string): (...args: any[]) => Node;
  };
  
  /** Variable hoisting utilities for proper scoping */
  "babel-helper-hoist-variables": {
    /** Hoists variables to the top of their containing scope */
    default(path: NodePath, emit: (id: Identifier) => void): void;
  };
  
  /** Runtime helpers for generated code */
  "babel-runtime": {
    /** Polyfills and helper functions */
  };
}