babel-plugin-system-import-transformer

Babel plugin that replaces import() & System.import() with the equivalent UMD pattern

Transforms

import('./utils/serializer').then(function(module){
    console.log(module);
});
 
// AND
 
System.import('./utils/serializer').then(function(module){
    console.log(module);
});

to

new Promise(function (resolve, reject) {
    var global = window;
 
    if (typeof global.define === 'function' && global.define.amd) {
        global.require(['utilsSerializer'], resolve, reject);
    } else if (typeof module !== 'undefined' && (module.exports && typeof require !== 'undefined') ||
               typeof module !== 'undefined' && (module.component && (global.require && global.require.loader === 'component'))) {
        resolve(require('./utils/serializer'));
    } else {
        resolve(global['utilsSerializer']);
    }
}).then(function(module){
    console.log(module);
});

Requirements

• Babel v7.x.x

Notes:

• for babel ^6.14.0 please use the v3.x.x releases.
• for babel <6.14 please use the v2.x.x releases.
• for babel v5 please use the v1.x.x releases.

Installation

npm install babel-plugin-system-import-transformer

Add "system-import-transformer" to your plugins argument or inside the plugins options of your Gruntfile.

// in .babelrc
{
    "plugins": [
        "system-import-transformer"
    ]
}
 
// in grunt.js
babel: {
    options: {
        plugins: ["system-import-transformer"]
    }
}

Configuration

Relative paths and Aliases

The babel's getModuleId option (if defined) is used for the AMD and Global Module import.

babel: {
    options: {
        moduleIds: true,
        getModuleId: function(moduleName) {
            var files = {
                'src/utils/serializer': 'utilsSerializer'
            };
 
            return files[moduleName] || moduleName.replace('src/', '');
        },
        plugins: ['system-import-transformer']
    }
}

Options

commonJS

CommonJS specific options.

commonJS.useRequireEnsure

Type: Boolean
Values: [false/true]

When set to true, all CommonJS import statements will use Webpack's require.ensure() syntax. This enables dynamic module loading in CommonJS (Webpack) and works both for the UMD and (of course) CommonJS module target types.

{
    "plugins": [
        ["system-import-transformer", { "commonJS": { "useRequireEnsure": true } }]
    ]
}
 
// the CommonJS code part will look like:
new Promise(function (resolve) {
    require.ensure([], function (require) {
        resolve(require('./utils/serializer'));
    });
}).then(function(module){ console.log(module); });

modules

Type: String
Values: [UMD/amd/common]
Example

Specifies the target compilation module system. When set configured to an option other than UMD then system-import-transformer will omit the module type detection code and just insert the appropriate require statement wrapped with a Promise.

// targeting AMD
{
    "plugins": [
        ["system-import-transformer", { "modules": "amd" }]
    ]
}
 
// will emit an AMD specific code like:
new Promise(function (resolve, reject) {
    var global = window;
    global.require(['utilsSerializer'], resolve, reject);
}).then(function(module){ console.log(module); });

// targeting CommonJS
{
    "plugins": [
        ["system-import-transformer", { "modules": "common" }]
    ]
}
 
// will emit a CommonJS specific code like:
new Promise(function (resolve, reject) {
    resolve(require('./utils/serializer'));
}).then(function(module){ console.log(module); });

syntax

Syntax specific options.

syntax.import

Type: Boolean
Values: [true/false]
Example

When set to false, babel will not transpile import() statements.

syntax["system-import"]

Type: Boolean
Values: [true/false]
Example

When set to false, babel will not transpile System.import() statements.