CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-babel-plugin-transform-es2015-arrow-functions

Babel plugin that transforms ES2015 arrow functions to ES5-compatible function expressions

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

Babel Plugin Transform ES2015 Arrow Functions

A Babel plugin that transforms ES2015 (ES6) arrow functions into ES5-compatible function expressions, enabling modern arrow function syntax to work in legacy environments while preserving semantic behavior including lexical this binding and non-constructible nature.

Package Information

  • Package Name: babel-plugin-transform-es2015-arrow-functions
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install --save-dev babel-plugin-transform-es2015-arrow-functions

Core Imports

// Import the plugin factory (default export)
const arrowFunctionsPlugin = require("babel-plugin-transform-es2015-arrow-functions");

For ES modules:

import arrowFunctionsPlugin from "babel-plugin-transform-es2015-arrow-functions";

Basic Usage

Via Babel Configuration (.babelrc)

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

With Options

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

Via Babel API

const babel = require("babel-core");

const result = babel.transform("const fn = () => {};", {
  plugins: ["transform-es2015-arrow-functions"]
});

Transformation Examples

Standard Mode (Default)

Input:

const greet = (name) => `Hello ${name}!`;
const numbers = [1,2,3].map(n => n * 2);

const obj = {
  name: "Bob",
  greet() {
    this.friends.forEach(friend => 
      console.log(`${this.name} greets ${friend}`)
    );
  }
};

Output:

const greet = function(name) {
  return `Hello ${name}!`;
};
const numbers = [1,2,3].map(function(n) {
  return n * 2;
});

const obj = {
  name: "Bob",
  greet: function greet() {
    var _this = this;
    this.friends.forEach(function(friend) {
      return console.log(`${_this.name} greets ${friend}`);
    });
  }
};

Spec Mode

Input:

const fn = () => this.value;

Output:

const fn = function() {
  babelHelpers.newArrowCheck(this, _this);
  return this.value;
}.bind(this);

Capabilities

Plugin Factory Function

The main export that creates a Babel plugin instance.

/**
 * Creates a Babel plugin for transforming arrow functions
 * @param {Object} api - Babel API object containing types and helpers
 * @param {Object} api.types - Babel types (t) for AST manipulation
 * @returns {Object} Babel plugin configuration with visitor pattern
 */
function arrowFunctionsPlugin({ types: t }): BabelPlugin;

Plugin Configuration Options

Controls how arrow functions are transformed.

interface PluginOptions {
  /**
   * Enable spec-compliant mode using .bind(this) instead of variable shadowing
   * @default false
   */
  spec?: boolean;
}

Babel Plugin Object

The returned plugin configuration object.

interface BabelPlugin {
  visitor: {
    /**
     * Visitor method that transforms arrow function expressions
     * @param path - Babel AST path object for the arrow function
     * @param state - Plugin state containing options and helpers
     */
    ArrowFunctionExpression(path: BabelPath, state: BabelState): void;
  };
}

Plugin Behavior Modes

Standard Mode (spec: false)

  • Method: Uses variable shadowing for this context
  • Performance: More efficient, simpler transformation
  • Output: Creates shadowed variables like var _this = this
  • Use Case: General purpose arrow function transformation

Spec Mode (spec: true)

  • Method: Uses .bind(this) calls for this binding
  • Compliance: More spec-compliant with ES6 arrow function behavior
  • Features:
    • Prevents instantiation with new operator
    • Adds runtime checks via babelHelpers.newArrowCheck
    • Preserves exact this binding semantics
  • Use Case: When strict ES6 compliance is required

Types

interface BabelPath {
  /** The AST node being visited */
  node: ArrowFunctionExpression;
  /** Replaces the current node with a new node */
  replaceWith(node: any): void;
  /** Ensures the arrow function has a block statement body */
  ensureBlock(): void;
  /** Gets a child path by property name */
  get(property: string): BabelPath;
  /** Transforms arrow function using built-in shadowing method */
  arrowFunctionToShadowed(): void;
}

interface BabelState {
  /** Plugin configuration options */
  opts: PluginOptions;
  /** Adds a helper function and returns its identifier */
  addHelper(name: string): any;
}

interface ArrowFunctionExpression {
  /** AST node type */
  type: "ArrowFunctionExpression" | "FunctionExpression";
  /** Shadow information for this binding */
  shadow?: { this: boolean };
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/babel-plugin-transform-es2015-arrow-functions@6.22.x
Publish Source
CLI
Badge
tessl/npm-babel-plugin-transform-es2015-arrow-functions badge