1. babel-plugin-transform-es2015-classes
Compile ES2015 classes to ES5
babel-plugin-transform-es2015-classes
Package: babel-plugin-transform-es2015-classes
Created by: babel
Last modified: Mon, 13 Jun 2022 04:04:17 GMT
Version: 6.24.1
License: MIT
Downloads: 5,931,860
Repository: https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-es2015-classes

Install

npm install babel-plugin-transform-es2015-classes
yarn add babel-plugin-transform-es2015-classes

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.

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.

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin