@babel/plugin-transform-classes

What is @babel/plugin-transform-classes?

The @babel/plugin-transform-classes package is a plugin for Babel that transforms ES2015+ class syntax into equivalent ES5 code. This is useful for ensuring compatibility with environments that do not support the latest JavaScript features.

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

Class transformation

Transforms ES2015+ class syntax into equivalent ES5 constructor functions with prototype methods.

{"class MyClass { constructor(name) { this.name = name; } greet() { return 'Hello, ' + this.name; } } }

Super calls

Handles 'super' calls and transforms them into appropriate ES5 code that calls the parent class constructor or methods.

{"class ChildClass extends ParentClass { constructor(name) { super(name); } } }

Static methods

Transforms static methods in classes to static methods on the constructor function in ES5.

{"class MyClass { static myStaticMethod() { return 'I am static'; } } }

Instance properties

Transforms class instance properties into assignments within the constructor function.

{"class MyClass { myProperty = 'default value'; } }

Other packages similar to @babel/plugin-transform-classes

@babel/plugin-transform-arrow-functions

Transforms ES2015+ arrow functions into equivalent ES5 function expressions. Similar in that it provides transformation of modern JavaScript features to ES5, but focuses on arrow functions instead of classes.

@babel/plugin-transform-destructuring

Transforms ES2015+ destructuring assignments and parameters into equivalent ES5 code. Similar in that it provides transformation of modern JavaScript syntax to ES5, but focuses on destructuring rather than class syntax.

@babel/plugin-transform-spread

Transforms ES2015+ spread syntax for arrays and function calls into equivalent ES5 code. Similar in that it provides transformation of modern JavaScript features to ES5, but focuses on spread syntax instead of class syntax.

README

@babel/plugin-transform-classes

Compile ES2015 classes to ES5

Caveats

When extending a native class (e.g., class extends Array {}), the super class needs to be wrapped. This is needed to workaround two problems:

• Babel transpiles classes using SuperClass.apply(/* ... */), but native classes aren't callable and thus throw in this case.
• Some built-in functions (like Array) always return a new object. Instead of returning it, Babel should treat it as the new this.

The wrapper works on IE11 and every other browser with Object.setPrototypeOf or __proto__ as fallback. There is NO IE <= 10 support. If you need IE <= 10 it's recommended that you don't extend natives.

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-classes

Usage

Via .babelrc (Recommended)

.babelrc

// without options
{
  "plugins": ["@babel/plugin-transform-classes"]
}

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

Via CLI

babel --plugins @babel/plugin-transform-classes script.js

Via Node API

require("@babel/core").transform("code", {
  plugins: ["@babel/plugin-transform-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.