1 |
3a515b92
|
cagy
|
# 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 |
|
|
```
|