babel-plugin-transform-es2015-classes

What is babel-plugin-transform-es2015-classes?

The babel-plugin-transform-es2015-classes package is a Babel plugin that transforms ES2015 (ES6) class syntax into a form that can be understood by older JavaScript environments that do not support ES2015 classes. This allows developers to write modern JavaScript code while maintaining compatibility with older environments.

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

Class Declaration Transformation

Transforms ES2015 class declarations into a form that can be understood by older JavaScript environments.

class Example { constructor() { this.value = 42; } getValue() { return this.value; } }

Inheritance Transformation

Transforms ES2015 class inheritance syntax into a form that can be understood by older JavaScript environments.

class Parent { constructor() { this.parentValue = 'parent'; } } class Child extends Parent { constructor() { super(); this.childValue = 'child'; } }

Static Methods Transformation

Transforms ES2015 static methods into a form that can be understood by older JavaScript environments.

class Example { static staticMethod() { return 'static method'; } }

Other packages similar to babel-plugin-transform-es2015-classes

babel-plugin-transform-es2015-arrow-functions

This package transforms ES2015 arrow functions into ES5 function expressions. While it focuses on arrow functions rather than classes, it serves a similar purpose of enabling modern JavaScript syntax in older environments.

babel-plugin-transform-es2015-parameters

This package transforms ES2015 parameter syntax (such as default parameters and rest parameters) into ES5-compatible code. It complements babel-plugin-transform-es2015-classes by handling another aspect of ES2015 syntax.

README

babel-plugin-transform-es2015-classes

Compile ES2015 classes to ES5

Caveats

Built-in classes such as Date, Array, DOM etc cannot be properly subclassed due to limitations in ES5 (for the es2015-classes plugin). You can try to use babel-plugin-transform-builtin-extend based on Object.setPrototypeOf and Reflect.construct, but it also has some limitations.

Examples

In

class Test {
  constructor(name) {
    this.name = name;
  }
  
  logger () {
    console.log("Hello", this.name);
  }
}

Out

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

var Test = function () {
  function Test(name) {
    _classCallCheck(this, Test);

    this.name = name;
  }

  Test.prototype.logger = function logger() {
    console.log("Hello", this.name);
  };

  return Test;
}();

Installation

npm install --save-dev babel-plugin-transform-es2015-classes

Usage

Via .babelrc (Recommended)

.babelrc

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

// with options
{
  "plugins": [
    ["transform-es2015-classes", {
      "loose": true
    }]
  ]
}

Via CLI

babel --plugins transform-es2015-classes script.js

Via Node API

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

Options

loose

boolean, defaults to false.

Method enumerability

Please note that in loose mode class methods are enumerable. This is not in line with the spec and you may run into issues.

Method assignment

Under loose mode, methods are defined on the class prototype with simple assignments instead of being defined. This can result in the following not working:

class Foo {
  set bar() {
    throw new Error("foo!");
  }
}

class Bar extends Foo {
  bar() {
    // will throw an error when this method is defined
  }
}

When Bar.prototype.foo is defined it triggers the setter on Foo. This is a case that is very unlikely to appear in production code however it's something to keep in mind.