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);
});

Installation

npm install babel-plugin-system-import-transformer

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

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 babel is configured to use AMD or CommonJS modules

babel: { options: { modules: 'amd' } }
// OR
babel: { options: { modules: 'common' /* this is the default value for babel */ } }

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); });