@babel/plugin-transform-computed-properties

    In

    Out

    1. var _obj;
    3. function _defineProperty(obj, key, value) {
    4.   if (key in obj) {
    5.     Object.defineProperty(obj, key, {
    6.       value: value,
    7.       enumerable: true,
    8.       configurable: true,
    9.       writable: true,
    10.     });
    11.   } else {
    12.     obj[key] = value;
    14.   return obj;
    15. }
    17. var obj = ((_obj = {}),
    18. _defineProperty(_obj, "x" + foo, "heh"),
    19. _defineProperty(_obj, "y" + bar, "noo"),
    21. _defineProperty(_obj, "bar", "bar"),
    22. _obj);
    1. npm install --save-dev @babel/plugin-transform-computed-properties

    Without options:

    1. {
    2.   "plugins": [
    3.     [
    4.       "@babel/plugin-transform-computed-properties",
    5.       {
    6.         "loose": true
    7.       }
    8.     ]
    9.   ]
    10. }

      boolean, defaults to false

      Just like method assignment in classes, in loose mode, computed property names use simple assignments instead of being defined. This is unlikely to be an issue in production code.

      1. // babel.config.json
      2. {
      3.   "assumptions": {
      4.     "setComputedProperties": true
      6. }

      Example

      1. var obj = {
      2.   ["x" + foo]: "heh",
      3.   ["y" + bar]: "noo",
      4.   foo: "foo",
      5.   bar: "bar",
      6. };

      Out

      When setComputedProperties is true.

      When setComputedProperties is false.

      1. import _defineProperty from "@babel/runtime/helpers/defineProperty";
      3. var _obj;
      5. var obj = ((_obj = {}),
      6. _defineProperty(_obj, "x" + foo, "heh"),
      7. _defineProperty(_obj, "y" + bar, "noo"),
      8. _defineProperty(_obj, "foo", "foo"),
      9. _defineProperty(_obj, "bar", "bar"),