Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including babel-plugin-system-import-transformer with all npm packages installed. Try it out:

var babelPluginSystemImportTransformer = require("babel-plugin-system-import-transformer")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

babel-plugin-system-import-transformer v4.0.0

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

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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free