Babel is a free and open-source JavaScript transcompiler. It converts ECMAScript 2015+ (ES6+) code into a backward-compatible version of JavaScript that can be run by older JavaScript engines.
Starting from Babel
7.14
@babel/plugin-proposal-class-properties
and @babel/plugin-proposal-private-methods
plugins
which were included to use the class features are now enabled by default in @babel/preset-env
.
@babel/plugin-proposal-class-properties:
This plugin transforms class properties in such a way that we can define class properties using property initializer syntax (i.e., by using the = assignment operator).
In the previous versions of Babel, the class syntax only allows us to define methods inside a class.
Any properties we want on an instance of an object, created within a class, need to be defined inside the constructor method.
class Person {
constructor() {
this.name = "Alice";
}
getName() {
return this.name;
}
}
Starting from Babel 7.14 (ECMAScript 2022), we no longer have to define properties inside the constructor.
class Person {
name = "Alice"; //Property initializer syntax
getName() {
return this.name;
}
}
@babel/plugin-proposal-class-properties
plugin also adds support for static fields and methods.
class Person {
static department = "IT"; //Static class properties
static getDepartment() {
return Person.department;
};
}
@babel/plugin-proposal-private-methods:
With this plugin, we can define private class fields and class methods using a hash(#) prefix.
class Person {
name = "Alice"; //Property initializer syntax
#hours = 40; // # means private!
get #timeSheet() { // private getter
return this.#hours * 4; // using a private field
}
}
Before
In previous versions,
we had to include the plugins @babel/plugin-proposal-class-properties
and @babel/plugin-proposal-private-methods
in the .babelrc.json
configuration after installing it in the devDependencies.
npm install @babel/plugin-proposal-private-methods --save-dev
npm install @babel/plugin-proposal-class-properties --save-dev
// .babelrc.json
{
"presets": ['@babel/preset-env'],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-private-methods"
]
}
After
Starting from Babel 7.14,
we can remove @babel/plugin-proposal-class-properties
and @babel/plugin-proposal-private-methods
from the .babelrc.json
.
They are now available by default in @babel/preset-env
.
// .babelrc.json
{
"presets": ["@babel/preset-env"]
}