@babel/plugin-syntax-class-properties

What is @babel/plugin-syntax-class-properties?

The @babel/plugin-syntax-class-properties npm package allows Babel to parse class properties, enabling developers to use class properties syntax in JavaScript. This plugin is purely syntactical and does not apply any transformations. It is often used in conjunction with transformation plugins to compile class properties to a format compatible with older JavaScript engines.

What are @babel/plugin-syntax-class-properties's main functionalities?

Class Properties Syntax

Enables the use of static and instance class properties directly within class declarations. This syntax is part of the ECMAScript proposal and allows for clearer and more concise class definitions.

class MyClass {
  static myStaticProp = 42;
  myInstanceProp = 'hello';
}

Other packages similar to @babel/plugin-syntax-class-properties

@babel/plugin-proposal-class-properties

This package not only allows Babel to parse class properties but also transforms them so they can run in environments that do not support this feature natively. It is more comprehensive compared to @babel/plugin-syntax-class-properties, which only enables parsing.

@babel/preset-env

While not exclusively focused on class properties, this Babel preset includes capabilities to transform class properties based on the target environment. It is a broader tool that configures Babel plugins and polyfills according to the target browsers or runtime environments.

README

@babel/plugin-syntax-class-properties

Allow parsing of class properties.

Installation

npm install --save-dev @babel/plugin-syntax-class-properties

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["@babel/plugin-syntax-class-properties"]
}

Via CLI

babel --plugins @babel/plugin-syntax-class-properties script.js

Via Node API

require("@babel/core").transform("code", {
  plugins: ["@babel/plugin-syntax-class-properties"]
});