node package manager

babel-plugin-transform-es2015-arrow-functions

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 a() {};
var a = function a(b) {
  return b;
};
 
var double = [1, 2, 3].map(function (num) {
  return num * 2;
});
console.log(double); // [2,4,6] 
 
var bob = {
  _name: "Bob",
  _friends: ["Sally", "Tom"],
  printFriends: function printFriends() {
    var _this = this;
 
    this._friends.forEach(function (f) {
      return console.log(_this._name + " knows " + f);
    });
  }
};
console.log(bob.printFriends());

[Try in REPL](http://babeljs.io/repl/#?evaluate=true&lineWrap=true&presets=es2015%2Ces2015-loose&experimental=false&loose=false&spec=false&code=var%20a%20%3D%20()%20%3D%3E%20%7B%7D%3B%0Avar%20a%20%3D%20(b)%20%3D%3E%20b%3B%0A%0Aconst%20double%20%3D%20%5B1%2C2%2C3%5D.map((num)%20%3D%3E%20num%20*%202)%3B%0Aconsole.log(double)%3B%20%2F%2F%20%5B2%2C4%2C6%5D%0A%0Avar%20bob%20%3D%20%7B%0A%20%20_name%3A%20%22Bob%22%2C%0A%20%20_friends%3A%20%5B%22Sally%22%2C%20%22Tom%22%5D%2C%0A%20%20printFriends()%20%7B%0A%20%20%20%20this._friends.forEach(f%20%3D%3E%0A%20%20%20%20%20%20console.log(this._name%20%2B%20%22%20knows%20%22%20%2B%20f))%3B%0A%20%20%7D%0A%7D%3B%0Aconsole.log(bob.printFriends())%3B&playground=true)

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 - This option wraps the generated function in .bind(this) and keeps uses of this inside the function as-is, instead of using a renamed this. It also adds a runtime check to ensure the functions are not instantiated.

Private packages for the whole team

It’s never been easier to manage developer teams with varying permissions and multiple projects. Learn more about Private Packages and Organizations…

how? learn more

Collaborators list

Stats

Try it out

Keywords

babel-plugin

Dependencies (1)

babel-runtime

Dependents (206)

polyserve-2, babel-bundle, comby-util, babel-preset-es2015-cdn, eth-client, @helio-training/babel-preset-helio, babel-preset-esfp, rpcq, babel-preset-palea, @jlongster/babel-preset-react-native, babel-preset-es2015-tree-shaking, babel-preset-es2015-ng-compat, wc-starterkit, react-matrix-decoder, babel-preset-env, @glimmer/build, akpack, babel-preset-es2015-script, babel-preset-es2015-ie-native-modules, babel-preset-stockulus, babel-preset-streamplace, @holisticon/angularjs-common, babel-preset-es2015-without-strict-loose, fis-msprd-babel-preset-es2015_6_18_0, babel-preset-env-standalone, @swift-developer/babel-preset-swifty, babel-preset-udemy, babel-preset-forbeslindesay, polyserve, babel-preset-webrtc, generator-arwen, babel-preset-philpl, babel-preset-quad, babel-preset-fe, buddy-plugin-babel, pragmatist, @riim/babel-preset-2015, babel-preset-fbjs, enb-babel-zen, babel-preset-bro, babel-preset-mse-video, babel-preset-opencollective-webpack, babel-preset-es2015-no-reg, babel-preset-juan, babel-preset-es2015-without-symbol, @elastic/babel-preset-kibana, babel-preset-es2015-no-strict, babel-preset-es2015-react-no-gen, babel-preset-es2015-loose-balance, babel-preset-benzinga-webpack, and more