babel-plugin-system-import-transformer

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 v6.14.x

Notes:

• for babel < v6.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

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