1
|
# babel-plugin-transform-es2015-computed-properties
|
2
|
|
3
|
> Compile ES2015 computed properties to ES5
|
4
|
|
5
|
## Example
|
6
|
|
7
|
**In**
|
8
|
|
9
|
```js
|
10
|
var obj = {
|
11
|
["x" + foo]: "heh",
|
12
|
["y" + bar]: "noo",
|
13
|
foo: "foo",
|
14
|
bar: "bar"
|
15
|
};
|
16
|
```
|
17
|
|
18
|
**Out**
|
19
|
|
20
|
```js
|
21
|
var _obj;
|
22
|
|
23
|
function _defineProperty(obj, key, value) {
|
24
|
if (key in obj) {
|
25
|
Object.defineProperty(obj, key, {
|
26
|
value: value,
|
27
|
enumerable: true,
|
28
|
configurable: true,
|
29
|
writable: true
|
30
|
});
|
31
|
} else {
|
32
|
obj[key] = value;
|
33
|
}
|
34
|
|
35
|
return obj;
|
36
|
}
|
37
|
|
38
|
var obj = (
|
39
|
_obj = {},
|
40
|
_defineProperty(_obj, "x" + foo, "heh"),
|
41
|
_defineProperty(_obj, "y" + bar, "noo"),
|
42
|
_defineProperty(_obj, "foo", "foo"),
|
43
|
_defineProperty(_obj, "bar", "bar"),
|
44
|
_obj
|
45
|
);
|
46
|
```
|
47
|
|
48
|
## Installation
|
49
|
|
50
|
```sh
|
51
|
npm install --save-dev babel-plugin-transform-es2015-computed-properties
|
52
|
```
|
53
|
|
54
|
## Usage
|
55
|
|
56
|
### Via `.babelrc` (Recommended)
|
57
|
|
58
|
**.babelrc**
|
59
|
|
60
|
Without options:
|
61
|
|
62
|
```json
|
63
|
{
|
64
|
"plugins": ["transform-es2015-computed-properties"]
|
65
|
}
|
66
|
```
|
67
|
|
68
|
With options:
|
69
|
|
70
|
```json
|
71
|
{
|
72
|
"plugins": [
|
73
|
["transform-es2015-computed-properties", {
|
74
|
"loose": true
|
75
|
}]
|
76
|
]
|
77
|
}
|
78
|
```
|
79
|
|
80
|
### Via CLI
|
81
|
|
82
|
```sh
|
83
|
babel --plugins transform-es2015-computed-properties script.js
|
84
|
```
|
85
|
|
86
|
### Via Node API
|
87
|
|
88
|
```javascript
|
89
|
require("babel-core").transform("code", {
|
90
|
plugins: ["transform-es2015-computed-properties"]
|
91
|
});
|
92
|
```
|
93
|
|
94
|
## Options
|
95
|
|
96
|
### `loose`
|
97
|
|
98
|
`boolean`, defaults to `false`
|
99
|
|
100
|
Just like method assignment in classes, in loose mode, computed property names
|
101
|
use simple assignments instead of being defined. This is unlikely to be an issue
|
102
|
in production code.
|
103
|
|
104
|
#### Example
|
105
|
|
106
|
***In***
|
107
|
|
108
|
```js
|
109
|
var obj = {
|
110
|
["x" + foo]: "heh",
|
111
|
["y" + bar]: "noo",
|
112
|
foo: "foo",
|
113
|
bar: "bar"
|
114
|
};
|
115
|
```
|
116
|
|
117
|
***Out***
|
118
|
|
119
|
```js
|
120
|
var _obj;
|
121
|
|
122
|
var obj = (
|
123
|
_obj = {},
|
124
|
_obj["x" + foo] = "heh",
|
125
|
_obj["y" + bar] = "noo",
|
126
|
_obj.foo = "foo",
|
127
|
_obj.bar = "bar",
|
128
|
_obj
|
129
|
);
|
130
|
```
|