@babel/plugin-transform-modules-systemjs

This plugin transforms ECMAScript modules to SystemJS. Note that only the syntax of import/export statements (import "./mod.js") and import expressions (import('./mod.js')) is transformed, as Babel is unaware of different resolution algorithms between implementations of ECMAScript modules and SystemJS.

Example​

In

exportdefault42;

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

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

pnpm add --save-dev @babel/plugin-transform-modules-systemjs

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

Usage​

With a configuration file (Recommended)​

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").transformSync("code",{
plugins:["@babel/plugin-transform-modules-systemjs"],
});

Options​

moduleIds​

boolean defaults to !!moduleId

Added in: v7.9.0

Enables module ID generation.

moduleId​

string

Added in: v7.9.0

A hard-coded ID to use for the module. Cannot be used alongside getModuleId.

getModuleId​

(name: string) => string

Added in: v7.9.0

Given the babel-generated module name, return the name to use. Returning a falsy value will use the original name.

moduleRoot​

string

Added in: v7.9.0

A root path to include on generated module names.