@babel/plugin-proposal-decorators
Example
Simple class decorator
JavaScript
@annotation
class MyClass {}
function annotation(target) {
target.annotated = true;
}
Class decorator
JavaScript
@isTestable(true)
class MyClass {}
function isTestable(value) {
return function decorator(target) {
target.isTestable = value;
};
}
Class method decorator
JavaScript
class C {
message = "hello!";
@bound
m() {
console.log(this.message);
}
}
function bound(value, { name, addInitializer }) {
addInitializer(function () {
this[name] = this[name].bind(this);
});
}
Installation
- npm
- Yarn
- pnpm
npm install --save-dev @babel/plugin-proposal-decorators
yarn add --dev @babel/plugin-proposal-decorators
pnpm add --save-dev @babel/plugin-proposal-decorators
Usage
With a configuration file (Recommended)
babel.config.json
{
"plugins": [
["@babel/plugin-proposal-decorators", { "version": "2023-05" }]
]
}
Via Node API
JavaScript
require("@babel/core").transformSync("code", {
plugins: [
["@babel/plugin-proposal-decorators", { version: "2023-05" }],
]
});
Options
History
Version | Changes |
---|---|
v7.22.0 | Added support for version: "2023-05" |
v7.21.0 | Added support for version: "2023-01" |
v7.19.0 | Added support for version: "2022-03" |
v7.17.0 | Added the version option with support for "2021-12" , "2018-09" and "legacy" |
version
"2023-05"
, "2023-01"
, "2022-03"
, "2021-12"
, "2018-09"
or "legacy"
.
Selects the decorators proposal to use:
"2023-05"
is the proposal version after the updates that reached consensus in the March and May 2023 TC39 meetings, integrating these changes."2023-01"
is the proposal version after the updates that reached consensus in the January 2023 TC39 meeting, integratingpzuraq/ecma262#4
."2022-03"
is the proposal version that reached consensus for Stage 3 in the March 2022 TC39 meeting. You can read more about it attc39/proposal-decorators@8ca65c046d
."2021-12"
is the proposal version as it was presented to TC39 in Dec 2021. You can read more about it attc39/proposal-decorators@d6c056fa06
."2018-09"
is the proposal version that was initially promoted to Stage 2 presented to TC39 in Sept 2018. You can read more about it attc39/proposal-decorators@7fa580b40f
.legacy
is the legacy Stage 1 proposal, defined atwycats/javascript-decorators@e1bf8d41bf
. The legacy mode will not have feature updates, and there are known discrepancies between Babel and TypeScript. It's recommended to migrate to the"2023-05"
proposal.
警告
Babel 8 will only support "2023-05"
and "legacy"
. If you are using a different decorators version, it's recommended to migrate to "2023-05"
.
The spec repo provides a brief summary of the differences between these versions.
If you specify the decoratorsBeforeExport
option, version
defaults to "2018-09"
, otherwise it is a required option.
decoratorsBeforeExport
This option:
- is disallowed when using
version: "legacy"
,version: "2022-03"
,version: "2023-01"
, orversion: "2023-05"
; - is required when using
version: "2018-09"
; - is optional and defaults to
false
when usingversion: "2021-12"
.
boolean
JavaScript
// decoratorsBeforeExport: false
export @decorator class Bar {}
// decoratorsBeforeExport: true
@decorator
export class Foo {}
This option was originally added to help tc39 collect feedback from the community by allowing experimentation with the proposed syntaxes. The proposal has now settled on allowing decorators either before or after export
.