babel-plugin-system-import-transformer

    4.0.0 • Public • Published

    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.

    Install

    npm i babel-plugin-system-import-transformer

    DownloadsWeekly Downloads

    15,762

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    28.3 kB

    Total Files

    16

    Last publish

    Collaborators

    • thgreasi