Noncommital Premarital Mischief

npm

Check out our latest tech talk, "JavaScript Supply Chain Security" presented by VP of Security, Adam Baldwin.Watch it here »

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

29,523

version

4.0.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability