Package Exports

babel-plugin-system-import-transformer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (babel-plugin-system-import-transformer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

babel-plugin-system-import-transformer

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

Transforms

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

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

Note: 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']
    }
}

AMD & CommonJS

When you are transforming to AMD or CommonJS modules you should set the respective plugin option:

// AMD
{
    "plugins": [
        ["system-import-transformer", { "modules": "amd" }]
    ]
}

// CommonJS
{
    "plugins": [
        ["system-import-transformer", { "modules": "common" }]
    ]
}

system-import-transformer will omit the module type detection code and just insert the appropriate require statement wrapped with a Promise.

// AMD
new Promise(function (resolve, reject) {
    var global = window;
    global.require(['utilsSerializer'], resolve, reject);
}).then(function(module){ console.log(module); });

// CommonJS
new Promise(function (resolve, reject) {
    resolve(require('./utils/serializer'));
}).then(function(module){ console.log(module); });

Note: the default transpilation target is UMD