@babel/plugin-transform-arrow-functions
NOTE: This plugin is included in
@babel/preset-env
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-arrow-functions
Usage
With a configuration file (Recommended)
Without options:
{ "plugins": ["@babel/plugin-transform-arrow-functions"] }
With options:
{ "plugins": [["@babel/plugin-transform-arrow-functions", { "spec": true }]] }
Via CLI
babel --plugins @babel/plugin-transform-arrow-functions script.js
Via Node API
require("@babel/core").transformSync("code", { plugins: ["@babel/plugin-transform-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 ofthis
inside the function as-is, instead of using a renamedthis
.Add a runtime check to ensure the functions are not instantiated.
Add names to arrow functions.
You can read more about configuring plugin options here