babel-plugin-transform-runtime

What is babel-plugin-transform-runtime?

The babel-plugin-transform-runtime package is a Babel plugin that optimizes code by enabling the re-use of Babel's injected helper code to save on codesize. It also helps to avoid polluting the global scope with polyfills and provides a way to use the latest JavaScript features without worrying about compatibility issues.

What are babel-plugin-transform-runtime's main functionalities?

Helper Code Reuse

This feature allows the re-use of Babel's helper functions across multiple files, reducing the overall size of the compiled code.

module.exports = {
  plugins: [
    ['@babel/plugin-transform-runtime', {
      helpers: true
    }]
  ]
};

Avoiding Global Pollution

By using the core-js library, this feature ensures that polyfills are not added to the global scope, preventing potential conflicts with other libraries or code.

module.exports = {
  plugins: [
    ['@babel/plugin-transform-runtime', {
      corejs: 3
    }]
  ]
};

Async/Await Transformation

This feature allows the transformation of async/await syntax to generator functions, enabling compatibility with environments that do not support async/await natively.

module.exports = {
  plugins: [
    ['@babel/plugin-transform-runtime', {
      regenerator: true
    }]
  ]
};

Other packages similar to babel-plugin-transform-runtime

@babel/plugin-transform-async-to-generator

This package transforms async/await syntax to generator functions. It is similar to the async/await transformation feature of babel-plugin-transform-runtime but focuses solely on this transformation.

core-js

core-js is a modular standard library for JavaScript that includes polyfills for ECMAScript features. It can be used in conjunction with Babel to provide polyfills without polluting the global scope, similar to the core-js integration in babel-plugin-transform-runtime.

babel-plugin-polyfill-corejs3

This Babel plugin automatically imports core-js polyfills based on the usage in the code. It provides similar functionality to the core-js integration in babel-plugin-transform-runtime but focuses on automatic polyfill imports.

README

babel-plugin-transform-runtime

Externalise references to helpers and builtins, automatically polyfilling your code without polluting globals.

Why?

Babel uses very small helpers for common functions such as _extend. By default this will be added to every file that requires it. This duplication is sometimes unnecessary, especially when your application is spread out over multiple files.

This is where the runtime transformer plugin comes in: all of the helpers will reference the module babel-runtime to avoid duplication across your compiled output. The runtime will be compiled into your build.

Another purpose of this transformer is to create a sandboxed environment for your code. If you use babel-polyfill and the built-ins it provides such as Promise, Set and Map, those will pollute the global scope. While this might be ok for an app or a command line tool, it becomes a problem if your code is a library which you intend to publish for others to use or if you can't exactly control the environment in which your code will run.

The transformer will alias these built-ins to core-js so you can use them seamlessly without having to require the polyfill.

See the technical details section for more information on how this works and the types of transformations that occur.

Installation

$ npm install babel-plugin-transform-runtime

It is also recommended you install the babel-runtime package as a runtime dependency, if you haven't already, as the transformed code will require that package. See the examples below for more details.

Usage

Via .babelrc (Recommended)

Add the following line to your .babelrc file:

// without options
{
  "plugins": ["transform-runtime"]
}

// with options
{
  "plugins": [
    ["transform-runtime", {
      "helpers": false, // defaults to true
      "polyfill": false, // defaults to true
      "regenerator": true, // defaults to true
      "moduleName": "babel-runtime" // defaults to "babel-runtime"
    }]
  ]
}

Via CLI

$ babel --plugins transform-runtime script.js

Via Node API

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

Technical details

The runtime transformer plugin does three things:

• Automatically requires babel-runtime/regenerator when you use generators/async functions.
• Automatically requires babel-runtime/core-js and maps ES6 static methods and built-ins.
• Removes the inline babel helpers and uses the module babel-runtime/helpers instead.

What does this actually mean though? Basically, you can use built-ins such as Promise, Set, Symbol etc as well use all the Babel features that require a polyfill seamlessly, without global pollution, making it extremely suitable for libraries.

Make sure you include babel-runtime as a dependency.

Regenerator aliasing

Whenever you use a generator function or async function:

function* foo() {

}

the following is generated:

"use strict";

var _marked = [foo].map(regeneratorRuntime.mark);

function foo() {
  return regeneratorRuntime.wrap(function foo$(_context) {
    while (1) switch (_context.prev = _context.next) {
      case 0:
      case "end":
        return _context.stop();
    }
  }, _marked[0], this);
}

This isn't ideal as then you have to include the regenerator runtime which pollutes the global scope.

Instead what the runtime transformer does it compile that to:

"use strict";

var _regenerator = require("babel-runtime/regenerator");

var _regenerator2 = _interopRequireDefault(_regenerator);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var _marked = [foo].map(_regenerator2.default.mark);

function foo() {
  return regeneratorRuntime.wrap(function foo$(_context) {
    while (1) switch (_context.prev = _context.next) {
      case 0:
      case "end":
        return _context.stop();
    }
  }, _marked[0], this);
}

This means that you can use the regenerator runtime without polluting your current environment.

core-js aliasing

Sometimes you may want to use new built-ins such as Map, Set, Promise etc. Your only way to use these is usually to include a globally polluting polyfill.

What the runtime transformer does is transform the following:

var sym = Symbol();

var promise = new Promise;

console.log(arr[Symbol.iterator]());

into the following:

"use strict";

var _getIterator2 = require("babel-runtime/core-js/get-iterator");

var _getIterator3 = _interopRequireDefault(_getIterator2);

var _promise = require("babel-runtime/core-js/promise");

var _promise2 = _interopRequireDefault(_promise);

var _symbol = require("babel-runtime/core-js/symbol");

var _symbol2 = _interopRequireDefault(_symbol);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var sym = (0, _symbol2.default)();

var promise = new _promise2.default();

console.log((0, _getIterator3.default)(arr));

This means is that you can seamlessly use these native built-ins and static methods without worrying about where they come from.

NOTE: Instance methods such as "foobar".includes("foo") will not work.

Helper aliasing

Usually babel will place helpers at the top of your file to do common tasks to avoid duplicating the code around in the current file. Sometimes these helpers can get a little bulky and add unnecessary duplication across files. The runtime transformer replaces all the helper calls to a module.

That means that the following code:

class Person {
}

usually turns into:

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Person = function Person() {
  _classCallCheck(this, Person);
};

the runtime transformer however turns this into:

"use strict";

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Person = function Person() {
  (0, _classCallCheck3.default)(this, Person);
};