babel-plugin-transform-es2015-modules-umd

What is babel-plugin-transform-es2015-modules-umd?

The babel-plugin-transform-es2015-modules-umd npm package is a plugin for Babel, a JavaScript compiler, that transforms ES2015 modules to UMD (Universal Module Definition) format. This allows the modules to be used in various environments, such as AMD, CommonJS, and as global variables.

What are babel-plugin-transform-es2015-modules-umd's main functionalities?

Module Transformation

Transforms ES2015 module syntax into UMD format, making it compatible with different module systems. The code sample shows an ES2015 import statement that would be converted to UMD.

import { square } from './math'; console.log(square(5));

Other packages similar to babel-plugin-transform-es2015-modules-umd

babel-plugin-transform-modules-amd

This plugin transforms ES2015 modules to AMD format specifically, unlike babel-plugin-transform-es2015-modules-umd which targets UMD format that is more universally compatible.

README

babel-plugin-transform-es2015-modules-umd

This plugin transforms ES2015 modules to Universal Module Definition (UMD).

Example

In

export default 42;

Out

(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define(["exports"], factory);
  } else if (typeof exports !== "undefined") {
    factory(exports);
  } else {
    var mod = {
      exports: {}
    };
    factory(mod.exports);
    global.actual = mod.exports;
  }
})(this, function (exports) {
  "use strict";

  Object.defineProperty(exports, "__esModule", {
    value: true
  });

  exports.default = 42;
});

Installation

npm install --save-dev babel-plugin-transform-es2015-modules-umd

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["transform-es2015-modules-umd"]
}

You can also override the names of particular libraries when this module is running in the browser. For example the es6-promise library exposes itself as global.Promise rather than global.es6Promise. This can be accommodated by:

{
  "plugins": [
    ["transform-es2015-modules-umd", {
      "globals": {
        "es6-promise": "Promise"
      }
    }]
  ]
}

Default semantics

There are a few things to note about the default semantics.

First, this transform uses the basename of each import to generate the global names in the UMD output. This means that if you're importing multiple modules with the same basename, like:

import fooBar1 from "foo-bar";
import fooBar2 from "./mylib/foo-bar";

it will transpile into two references to the same browser global:

factory(global.fooBar, global.fooBar);

If you set the plugin options to:

{
  "globals": {
    "foo-bar": "fooBAR",
    "./mylib/foo-bar": "mylib.fooBar"
  }
}

it will still transpile both to one browser global:

factory(global.fooBAR, global.fooBAR);

because again the transform is only using the basename of the import.

Second, the specified override will still be passed to the toIdentifier function in babel-types/src/converters. This means that if you specify an override as a member expression like:

{
  "globals": {
    "fizzbuzz": "fizz.buzz"
  }
}

this will not transpile to factory(global.fizz.buzz). Instead, it will transpile to factory(global.fizzBuzz) based on the logic in toIdentifier.

Third, you cannot override the exported global name.

More flexible semantics with exactGlobals: true

All of these behaviors can limit the flexibility of the globals map. To remove these limitations, you can set the exactGlobals option to true. Doing this instructs the plugin to:

1. always use the full import string instead of the basename when generating the global names
2. skip passing globals overrides to the toIdentifier function. Instead, they are used exactly as written, so you will get errors if you do not use valid identifiers or valid uncomputed (dot) member expressions.
3. allow the exported global name to be overridden via the globals map. Any override must again be a valid identifier or valid member expression.

Thus, if you set exactGlobals to true and do not pass any overrides, the first example of:

import fooBar1 from "foo-bar";
import fooBar2 from "./mylib/foo-bar";

will transpile to:

factory(global.fooBar, global.mylibFooBar);

And if you set the plugin options to:

{
  "globals": {
    "foo-bar": "fooBAR",
    "./mylib/foo-bar": "mylib.fooBar"
  },
  "exactGlobals": true
}

then it'll transpile to:

factory(global.fooBAR, global.mylib.fooBar)

Finally, with the plugin options set to:

{
  "plugins": [
    "external-helpers",
    ["transform-es2015-modules-umd", {
      "globals": {
        "my/custom/module/name": "My.Custom.Module.Name"
      },
      "exactGlobals": true
    }]
  ],
  "moduleId": "my/custom/module/name"
}

it will transpile to:

factory(mod.exports);
global.My = global.My || {};
global.My.Custom = global.My.Custom || {};
global.My.Custom.Module = global.My.Custom.Module || {};
global.My.Custom.Module.Name = mod.exports;

Via CLI

babel --plugins transform-es2015-modules-umd script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["transform-es2015-modules-umd"]
});