@babel/plugin-syntax-decorators

What is @babel/plugin-syntax-decorators?

The @babel/plugin-syntax-decorators package is a plugin for Babel, a JavaScript compiler, that allows Babel to parse and understand decorator syntax. Decorators are a stage 2 proposal for JavaScript and provide a way to add annotations and a meta-programming syntax for class declarations and members. Decorators can be used to annotate and modify classes and properties at design time.

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

Parsing decorator syntax

This feature enables Babel to parse decorators, which are annotations placed directly above class declarations, methods, or properties. The code sample shows a simple decorator applied to a class.

@decorator
class MyClass {}
function decorator(target) {
  // modify target
}

Other packages similar to @babel/plugin-syntax-decorators

@babel/plugin-proposal-decorators

This package is similar to @babel/plugin-syntax-decorators but includes both parsing and transforming capabilities for decorators. While @babel/plugin-syntax-decorators only allows Babel to parse decorator syntax, @babel/plugin-proposal-decorators also transforms decorators according to the proposal.

core-decorators

core-decorators is a library of decorators for JavaScript classes. Unlike @babel/plugin-syntax-decorators, which only enables syntax parsing, core-decorators provides actual implementations of common decorators such as @autobind, @readonly, and @override.

README

@babel/plugin-syntax-decorators

Allow parsing of decorators.

Installation

npm install --save-dev @babel/plugin-syntax-decorators

Usage

Via .babelrc (Recommended)

.babelrc

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

Via CLI

babel --plugins @babel/plugin-syntax-decorators script.js

Via Node API

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

Options

legacy

boolean, defaults to false.

Use the legacy (stage 1) decorators syntax.