Skip to content

thgreasi/babel-plugin-system-import-transformer

Repository files navigation

babel-plugin-system-import-transformer

Build Status npm npm

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:

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.

About

import() & System.import() to UMD pattern transformer plugin for Babel

Resources

License

Stars

Watchers

Forks

Packages

No packages published