blob: b5bf1a1b20b781b83b1fc4c5a7915a6bdaae2213 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
# @babel/plugin-proposal-decorators
> Compile class and object decorators to ES5
## Example
(examples are from proposal)
### Simple class decorator
```js
@annotation
class MyClass { }
function annotation(target) {
target.annotated = true;
}
```
### Class decorator
```js
@isTestable(true)
class MyClass { }
function isTestable(value) {
return function decorator(target) {
target.isTestable = value;
}
}
```
### Class function decorator
```js
class C {
@enumerable(false)
method() { }
}
function enumerable(value) {
return function (target, key, descriptor) {
descriptor.enumerable = value;
return descriptor;
}
}
```
## Installation
```sh
npm install --save-dev @babel/plugin-proposal-decorators
```
## Usage
Add the following line to your .babelrc file:
```json
{
"plugins": ["@babel/plugin-proposal-decorators"]
}
```
### Via CLI
```sh
babel --plugins @babel/plugin-proposal-decorators script.js
```
### Via Node API
```javascript
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-proposal-decorators"]
});
```
## Options
### `legacy`
`boolean`, defaults to `false`.
Use the legacy (stage 1) decorators syntax and behavior.
#### NOTE: Compatibility with `@babel/plugin-proposal-class-properties`
If you are including your plugins manually and using `@babel/plugin-proposal-class-properties`, make sure that `@babel/plugin-proposal-decorators` comes *before* `@babel/plugin-proposal-class-properties`.
When using the `legacy: true` mode, `@babel/plugin-proposal-class-properties` must be used in `loose` mode to support the `@babel/plugin-proposal-decorators`.
Wrong:
```json
{
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-decorators"
]
}
```
Right:
```json
{
"plugins": [
"@babel/plugin-proposal-decorators",
"@babel/plugin-proposal-class-properties"
]
}
```
```json
{
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }]
]
}
```
## References
* [Proposal: JavaScript Decorators](https://github.com/wycats/javascript-decorators/blob/master/README.md)
|
