babel-plugin-transform-es2015-arrow-functions

What is babel-plugin-transform-es2015-arrow-functions?

The babel-plugin-transform-es2015-arrow-functions package is a Babel plugin that transforms ES2015 (ES6) arrow functions into ES5 function expressions. This is useful for ensuring compatibility with environments that do not support ES2015 syntax.

What are babel-plugin-transform-es2015-arrow-functions's main functionalities?

Transform Arrow Functions

This feature transforms ES2015 arrow functions into ES5 function expressions. This is particularly useful for ensuring that your code runs in environments that do not support ES2015 syntax.

const add = (a, b) => a + b;
// Transformed to:
var add = function(a, b) {
  return a + b;
};

Lexical 'this' Binding

Arrow functions do not have their own 'this' context and instead inherit 'this' from the parent scope. This feature ensures that the 'this' context is correctly bound when transforming arrow functions to ES5.

const obj = {
  value: 10,
  increment: function() {
    setTimeout(() => {
      this.value++;
    }, 1000);
  }
};
// Transformed to:
var obj = {
  value: 10,
  increment: function() {
    var _this = this;
    setTimeout(function() {
      _this.value++;
    }, 1000);
  }
};

Other packages similar to babel-plugin-transform-es2015-arrow-functions

babel-plugin-transform-es2015-function-name

This plugin transforms ES2015 function names to ensure compatibility with older environments. While it focuses on function names rather than arrow functions, it serves a similar purpose of making ES2015 features compatible with ES5.

babel-plugin-transform-es2015-parameters

This plugin transforms ES2015 parameter features like default parameters and rest parameters into ES5-compatible code. It complements babel-plugin-transform-es2015-arrow-functions by handling other ES2015 syntax features.

babel-plugin-transform-es2015-template-literals

This plugin transforms ES2015 template literals into ES5 string concatenations. Like babel-plugin-transform-es2015-arrow-functions, it ensures that modern JavaScript syntax can run in older environments.

README

babel-plugin-transform-es2015-arrow-functions

Compile ES2015 arrow functions to ES5

Example

In

var a = () => {};
var a = (b) => b;

const double = [1,2,3].map((num) => num * 2);
console.log(double); // [2,4,6]

var bob = {
  _name: "Bob",
  _friends: ["Sally", "Tom"],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f));
  }
};
console.log(bob.printFriends());

Out

var a = function () {};
var a = function (b) {
  return b;
};

const double = [1, 2, 3].map(function (num) {
  return num * 2;
});
console.log(double); // [2,4,6]

var bob = {
  _name: "Bob",
  _friends: ["Sally", "Tom"],
  printFriends() {
    var _this = this;

    this._friends.forEach(function (f) {
      return console.log(_this._name + " knows " + f);
    });
  }
};
console.log(bob.printFriends());

Installation

npm install --save-dev babel-plugin-transform-es2015-arrow-functions

Usage

Via .babelrc (Recommended)

.babelrc

Without options:

{
  "plugins": ["transform-es2015-arrow-functions"]
}

With options:

{
  "plugins": [
    ["transform-es2015-arrow-functions", { "spec": true }]
  ]
}

Via CLI

babel --plugins transform-es2015-arrow-functions script.js

Via Node API

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

Options

spec

boolean, defaults to false.

Example

Using spec mode with the above example produces:

var _this = this;

var a = function a() {
  babelHelpers.newArrowCheck(this, _this);
}.bind(this);
var a = function a(b) {
  babelHelpers.newArrowCheck(this, _this);
  return b;
}.bind(this);

const double = [1, 2, 3].map(function (num) {
  babelHelpers.newArrowCheck(this, _this);
  return num * 2;
}.bind(this));
console.log(double); // [2,4,6]

var bob = {
  _name: "Bob",
  _friends: ["Sally", "Tom"],
  printFriends() {
    var _this2 = this;

    this._friends.forEach(function (f) {
      babelHelpers.newArrowCheck(this, _this2);
      return console.log(this._name + " knows " + f);
    }.bind(this));
  }
};
console.log(bob.printFriends());

This option enables the following:

• Wrap the generated function in .bind(this) and keeps uses of this inside the function as-is, instead of using a renamed this.

• Add a runtime check to ensure the functions are not instantiated.

• Add names to arrow functions.