babel-plugin-system-import-transformer

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

Transforms

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

to

1new Promise(function (resolve, reject) {
2    var global = window;
3
4    if (typeof global.define === 'function' && global.define.amd) {
5        global.require(['utilsSerializer'], resolve, reject);
6    } else if (typeof module !== 'undefined' && (module.exports && typeof require !== 'undefined') ||
7               typeof module !== 'undefined' && (module.component && (global.require && global.require.loader === 'component'))) {
8        resolve(require('./utils/serializer'));
9    } else {
10        resolve(global['utilsSerializer']);
11    }
12}).then(function(module){
13    console.log(module);
14});

Installation

npm install babel-plugin-system-import-transformer

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

1babel: {
2    options: {
3        plugins: ["system-import-transformer"]
4    }
5}

Configuration

Relative paths and Aliases

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

1babel: {
2    options: {
3        moduleIds: true,
4        getModuleId: function(moduleName) {
5            var files = {
6                'src/utils/serializer': 'utilsSerializer'
7            };
8
9            return files[moduleName] || moduleName.replace('src/', '');
10        },
11        plugins: ['system-import-transformer']
12    }
13}

AMD & CommonJS

When babel is configured to use AMD or CommonJS modules

1babel: { options: { modules: 'amd' } }
2// OR
3babel: { 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.

1// AMD
2new Promise(function (resolve, reject) {
3    var global = window;
4    global.require(['utilsSerializer'], resolve, reject);
5}).then(function(module){ console.log(module); });
6
7// CommonJS
8new Promise(function (resolve, reject) {
9    resolve(require('./utils/serializer'));
10}).then(function(module){ console.log(module); });